JS 数组方法总结

1、按是否改变原数组进行区分

1.1、不改变原数组

• 追加元素

   //1、concat
    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
    console.log(arr1); // ['a', 'b', 'c', 'd', 'e']
     //2、ES6扩展运算符...
    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
    const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

• 删除元素

   //1、filter
    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd']
     //2、slice
    const arr1 = ['a', 'b', 'c', 'd', 'e'];  
    const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e']  
    const arr3 = arr1.slice(2) // ['c', 'd', 'e']

• 替换元素

   //1、map
    const arr1 = ['a', 'b', 'c', 'd', 'e']  
    const arr2 = arr1.map(item => {  
        if(item === 'c') {
          item = 'CAT';
        }
        return item;
     }); // ['a', 'b', 'CAT', 'd', 'e']

1.2、改变原数组

• 追加
  push & unshift
• 删除
  pop & shift
• 替换
  splice

2、数组遍历

• forEach

var arr = [1,2,3,4,5,6,7,8];
// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}
console.log("========================");
//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});

• reduce
  reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)
  callback有两个参数pre,next.
  当不传入initialValue时，pre是数组的第一个值，next是第二个
  当传入initValue时，pre是initValue，next是数组的第一个参数
  注：initValue可以是任意类型的数据，不一定是数组中元素的类型。该方法并未对数组中元素进行操作，可看作遍历数组的一种。

var arr = ["apple","orange"];
//未传入
function noPassValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
    return prev + " " +next;
  });
}
//传入一个对象
function passValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);  
    prev[next] = 1;
    return prev;
  },{});
}
console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());