- 首页 > it技术 > >
js数组方法大全（包括es6新增以及遍历方法）
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]// 1、push从数组尾部添加一个或多个元素，变异方法返回数组长度，变异方法
console.log(arr.push(10, 11));
console.log('push', arr);
// 2、pop从数组尾部删除，并返回删除的元素，变异方法
console.log('pop', arr.pop())// 3、shift删除数组第一个元素并返回删除的元素，变异方法
console.log('shift', arr.shift())// 4、unshift从数组头部添加一个或多个元素，返回添加后数组的长度，变异方法
console.log('unsift', arr.unshift(1, 11));
// 5、concat拼接一个或多个数组，非变异方法
const concat = arr.concat(['a', 'aaa'], ['b'], 'c', 'd')
console.log('concat', concat);
// 6、join按照规定连接符拼接数组中的元素，非变异方法
const str = arr.join('-')
console.log('str', str);
// 7、reverse用于颠倒数组元素的顺序，变异方法
console.log('reverse', arr.reverse());
console.log('arr', arr);
// 8、sort如果里面没有任何参数，则按照字符编码排序，如果想自定义排序方式，则传入一个函数， 变异方法
let sortArr = [7, 3, 2, 6, 4, 3, 9, 56]
console.log('sort', sortArr.sort((a, b) => { return a - b }));
console.log('sortArr', sortArr);
// sort原理是用的冒泡排序的思想
// 冒泡排序实现升序
// 一共要冒sortArr-1次泡，每次冒泡比较次数比上一次少1（第一次比较次数为sortArr-1），所以每趟比较sortArr-1-i次
let mySortArr = [7, 3, 2, 6, 4, 3, 9, 56]
// for (var i = 0;
i <= mySortArr.length - 1;
i++) {
//for (var j = 0;
j < mySortArr.length - i;
j++) {
//if (mySortArr[j] > mySortArr[j + 1]) {
//var temp;
//temp = mySortArr[j];
//mySortArr[j] = mySortArr[j + 1];
//mySortArr[j + 1] = temp
//}
//}
// }
// console.log('mySortArr', mySortArr);
function sort(arr, fn) {
for (var i = 0;
i <= arr.length - 1;
i++) {
for (var j = 0;
j < arr.length - i;
j++) {
if (fn(arr[j], arr[j + 1]) > 0) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp
}
}
}
console.log('mySortArr', arr);
}
function fn(a, b) { return a - b }
sort(mySortArr, fn)// 9、slice返回一个新数组，从start到end（不包括），注意为负时只能从左到右截取，-1代表倒数第一个元素，非变异方法
let slice = arr.slice(-2, -1);
console.log('arr', arr);
console.log('slice', slice);
// 10、splice从数组中添加或删除元素，会改变原数组，返回被删除的元素数组，可实现替换操作，变异方法
console.log('arr', arr);
console.log('splice', arr.splice(1, 3, 'delete'));
console.log('arr', arr);
// es6新增 find()/findIndex()/fill()/entries()/keys()/values()/includes()// 11、数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
console.log('arr', arr);
console.log('find', arr.find(v => { return v > 6 }));
// 12、数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
console.log('findIndex', arr.findIndex((v, i, arr) => { return v > 8 }));
console.log('findIndex-1', arr.findIndex((v, i, arr) => { return v > 100 }));
// 这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。
function f(v) {
return v > this.age;
}
let person = { name: 'John', age: 20 };
console.log([10, 12, 26, 15].find(f, person));
// 26// indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。
console.log([NaN].findIndex(v => Object.is(NaN, v)))// 13、fill方法使用给定值，填充一个数组。
console.log('fill', [1, 2, 3].fill('5'));
console.log('fill', new Array(3).fill('6'));
// 下面代码表示，fill方法从 1 号位开始，向原数组填充 7，到 2 号位之前结束。也可用来替换
// 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']// 14、ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"// 数组的遍历方法// 1、forEach遍历但是有个缺点是不能用break来中断循环，也不能return跳出函数，类似于for循环
arr.forEach((v, i, arr) => { console.log('forEach', v);
})// 2、map 返回映射后的数组, 非变异方法
let maparr = [1, 2, 3]
let map = maparr.map((v, i, arr) => { return v * v })
console.log('map', map);
console.log(maparr.map(Math.sqrt));
// 3、filter 过滤符合条件的元素
let filterarr = [12, 23, 14, 56, 34]
let newFilter = filterarr.filter((v, i, arr) => { return v > 18 })
console.log('newFilter', newFilter);
// 4、some 只要有一个元素满足就返回true
let some = ['a', 'b', 'c']
console.log('some', some.some((v, i, arr) => { return v = 'b' }));
// 5、every 所有元素满足条件才返回true
let every = [12, 10, 29]
console.log('every', every.every((v, i, arr) => { return v > 20 }));
// 6、reduce
let reducearr = [12, 23, 14, 56, 34]
const Obj = reducearr.reduce((obj, v, i, arr) => { obj[i] = v;
return obj }, {})
console.log('reduce', Obj);
// 7、for in
// 8、for of
// 9、for
推荐阅读
