过一遍|JavaScript中迭代数组的api

在JavaScript中Array有很多好用的方法，如下表

Array.push() 增末尾

const arr = [1,2,3,4,5];
const newArr = arr.push(0);

console.log(newArr);  // 6 返回的是数组的长度
console.log(arr);   // [ 1, 2, 3, 4, 5, 0 ] 改变了原数组

Array.pop() 删末尾

const arr = [1,2,3,4,5];
const newArr = arr.pop();

console.log(newArr);  // 5 返回的是被删除项
console.log(arr);   // [ 1, 2, 3, 4 ] 改变了原数组

Array.shift() 删头部

const arr = [1,2,3,4,5];
const newArr = arr.shift();

console.log(newArr);  // 1 返回的是被删除项
console.log(arr);   // [  2, 3, 4, 5 ] 改变了原数组

Array.unshift() 增头部

const arr = [1,2,3,4,5];
const newArr = arr.unshift(0);

console.log(newArr);  // 6 返回的是数组的长度
console.log(arr);   // [  0, 1, 2, 3, 4, 5 ] 改变了原数组

Array.reverse() 反转数组

const arr = [1,2,3,4,5];
const newArr = arr.reverse();

console.log(newArr);  // [ 5, 4, 3, 2, 1 ] 
console.log(arr);   // [ 5, 4, 3, 2, 1 ] 改变了原数组

Array.sort() 数组排序

语法：

arr.sort([compareFunction])

const arr = [1,2,3,4,5];
const newArr = arr.sort((a, b) => a - b);

console.log(newArr);  // [ 1, 2, 3, 4, 5 ]
console.log(arr);   // [ 1, 2, 3, 4, 5 ]  改变了原数组

Array.splice() 截取数组

const arr = [1,2,3,4,5];
const newArr = arr.splice(1,3);  // (start,end)

console.log(newArr);  // [ 2, 3, 4 ] 返回截取到的数组 （注意包括end ）
console.log(arr);   // [ 1,5 ]  改变了原数组

---

Array.join() 数组转字符串

const arr = [1,2,3,4,5];
const newArr = arr.join('');  

console.log(newArr, typeof newArr);  // 12345 string
console.log(arr);   // [ 1, 2, 3, 4, 5 ]  没有改变原数组

Array.concat() 链接数组

const arr1 = [1,2,3,4,5];
const arr2 = [6,7,8];  

const newArr = arr1.concat(arr2);

console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr1, arr2);  // [ 1, 2, 3, 4, 5 ] [ 6, 7, 8 ]  没有改变原数组

Array.forEach() 遍历数组

const arr = [1,2,3,4,5];

const newArr = [];
arr.forEach(item => {
    if (item > 3) {
        newArr.push(item);
    }
})

console.log(newArr); // [ 4, 5 ]
console.log(arr); // [ 1, 2, 3, 4, 5 ] 没有改变原数组

Array.map() 相同规则处理数组 返回数组

const arr = [1,2,3,4,5];

const newArr = arr.map(item => item *2);
console.log(newArr); // [ 2, 4, 6, 8, 10 ]
console.log(arr); // [ 1, 2, 3, 4, 5 ] 没有改变原数组

Array.filter() 过滤 返回数组

const arr = [1,2,3,4,5];

const newArr = arr.filter(item => item > 3);
console.log(newArr); // [ 4, 5 ]
console.log(arr); // [ 1, 2, 3, 4, 5 ] 没有改变原数组

Array.every() 每一项符合 返回true

const arr = [1,2,3,4,5];

const newArr = arr.every(item => item > 0);
console.log(newArr); // true
console.log(arr); // [ 1, 2, 3, 4, 5 ] 没有改变原数组

Array.some() 有符合的 返回true

const arr = [1,2,3,4,5];

const newArr = arr.some(item => item > 3);
console.log(newArr); // true
console.log(arr); // [ 1, 2, 3, 4, 5 ] 没有改变原数组

Array.reduce() 接收prev和cur项，用于求和

const arr = [1,2,3,4,5];

const newArr = arr.reduce((prev, cur) => {
    prev += cur;
    return prev;
});
console.log(newArr); // 15
console.log(arr); // [ 1, 2, 3, 4, 5 ] 没有改变原数组

Array.flat() 数组扁平化 可以指定深度

const arr = [1,[2,3],4,[5]];

const newArr = arr.flat();

console.log(newArr); // [ 1, [ 2, 3 ], 4, [ 5 ] ]
console.log(arr); // [ 1, 2, 3, 4, 5 ] 没有改变原数组

Array.slice() 截取数组 返回区间

const arr = [ 1, 2, 3, 4, 5 ];

const newArr = arr.slice(1,4);  // (start, end)

console.log(newArr); // [ 2,3,4 ]
console.log(arr); // [ 1, 2, 3, 4, 5 ] 没有改变原数组

---

splice 和 slice的区别

1. splice 包含end slice不包含end
2. splice 改变原数组 slice不改变原数组