JavaScript 数组的操作

原生js的数组方法

1. concat

   concat()方法用于合并两个或多个数组或给数组合并值。不会更改原有数组，而是直接返回一个新数组。

   语法：var newArray = arr.concat(value1,value2...value);

   参数：value：可选参数，可以是数组，也可以是具体的变量或值

   var arr1 = [1,2,3,4];
   var arr2 = ["胃","必","治"];
   var arr = arr1.concat(arr2);
   console.log(arr);
   // [1, 2, 3, 4, "胃", "必", "治"]
   

2. join

   join()方法将一个数组(伪数组)的所有元素连接成一个字符串并返回。

   语法：arr.join([分隔符])

   参数：[分隔符]：可选参数，表示用什么符号分隔，如果不填的话默认用逗号分隔。

   var arr = ["我今年",18,false];
   console.log(arr.join()); // 我今年,18,false
   console.log(arr.join("-")); // 我今年-18-false
   console.log(arr.join("")); // 我今年18false
   

3. push

   后增。push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。会改变原数组

   语法：arr.push(value1,value2...value)

   参数：value：可以是数组，也可以是具体的变量或值

   var a = [2,3,4];
   var b = a.push(5,6);
   console.log(a); // [2,3,4,5,6]
   console.log(b); // 5
   

4. pop

   后删。pop()方法用于删除数组最后一个元素，并返回最后一个元素，会改变原数组。

   语法：arr.pop()

   var arr = [2,3,4];
   console.log(arr.pop()); // 4
   console.log(arr); // [2,3]
   

5. shift

   前删。shift()方法可以把数组的第一个元素删除，并返回第一个元素。会改变原数组。

   语法：arr.shift()

   var arr = [2,3,4];
   console.log(arr.shift()); // 2
   console.log(arr); // [3,4]
   

6. unshift

   前增。unshift()方法向数组的开头增加一个或多个元素，并返回新的长度。会改变原数组。

   语法：arr.unshift(value1,value2...)

   参数：value：可以是数组，也可以是具体的变量或值。

   var arr = [2,3,4,5];
   console.log(arr.unshift(0,1)); // 6
   console.log(arr); // [0,1,2,3,4,5]
   

7. slice

   截取。slice()方法可以截取并返回一个新的数组（从start到end中的元素（不包含end））。不会修改原数组。

   语法：arr.slice(start,end)

   参数：start：number类型，截取头的下标；

   ​ end：number类型，截取尾的下标；

   var arr = [2,3,4,5];
   console.log(arr.slice(1,3)); // [3,4]
   console.log(arr) // [2,3,4,5]
   

8. splice()

   更新。splice()方法很强大，包含了添加和删除，所以可以达到替换的效果。该方法返回被删除的元素组成的数组。会改变原数组。

   语法：arr.splice(index,length,value1,value2...)

   参数：

   • index：起始下标
   • length：删除元素的位移
   • value：插入的新元素，可以是多个

   // 使用splice完成删除
   var arr = [2,3,4,5,"haha"];
   var arr2 = arr.splice(1,2); // 从index为1的元素开始，删除2个元素并以数组形式返回，原数组发生改变
   console.log(arr) // [2,5,"haha"]
   console.log(arr2) // [3,4]
   
   // 使用splice完成增加
   var arr = [2,3,4,5,"haha"];
   arr.splice(1,0,8,9,"bobo"); // 从index为1的位置（元素4）开始，删除0个元素，并在index（3）对应的元素前新增三个元素（8,9,"bobo"）
   console.log(arr); //[2,8,9,"bobo",3,4,5,"haha"]
   
   // 使用splice完成替换
   var arr = ["a","b","x","d"];
   arr.splice(2,1,"c"); // 从index为2的位置（"x"）开始，删除1个元素，并在该位置上增加一个新的元素"c"。
   console.log(arr); // ["a","b","c","d"]
   

9. sort()

   排序。按照Unicode编码的位置排序，默认升序。返回排序后的数组。会改变原数组。

   var fruit = ['cherries','apples','bananas'];
   console.log(fruit.sort()); // ['apples','bananas','cherries']
   
   var scores = [1,10,21,2];
   console.log(scores.sort()); // [1,10,2,21]
   

10. reverse()

    倒序。reverse()方法颠倒数组中元素的顺序，返回颠倒后的数组。会改变原数组。

    var arr = [2,3,4];
    console.log(arr.reverse()); // [4,3,2]
    console.log(arr); // 4,3,2
    

ES5 数组方法

1. indexOf() 和 lastIndexOf()

   查找。indexOf()从开始往后查找，lastIndexOf()从末尾往前查找。返回第一个查找到的元素的下标（未找到则返回-1）。不改变原数组。

   语法：

   • arr.indexOf(value)
   • arr.lastIndexOf(value)

   参数：value：查找的元素

   var arr = [2,3,4,5,2];
   console.log(arr.indexOf(2)); // 0
   console.log(arr.indexOf(8)); // -1
   console.log(arr.lastIndexOf(2)); // 4
   

2. forEach()

   遍历。forEach()方法可以直接对数组遍历并用回调函数进行操作。

   语法：arr.forEach(callback(value,index,array))

   参数：

   • callback：回调函数

     有三个参数：

     1. value：当前元素
     2. index：当前元素的下标
     3. array：整个数组

   var arr = [1,2,3,4,5];
   arr.forEach(function(value,index,array){
       arr[index] += 1;
   })
   console.log(arr); // [2,3,4,5,6]
   

3. every

   判断。每次遍历回调函数都为true，才会返回true。否则返回false。

   语法：arr.every(callback(value))

   参数：

   • callback：回调函数

     参数：value：遍历的值

   var arr = [1,2,-1,0,3]
   arr.every(function(value){
       return val>0
   })  // fasle
   
   var arr2 = [5,6,7]
   arr2.every(function(value){
       return val>0
   })  // true
   
   

4. some

   判断。只要有一个元素满足回调函数，就会返回true。全部都不满足则返回false。

   语法：arr.some(callback(value))

   参数：

   • callback：回调函数

     参数：value：遍历的值

   var arr = [1,2,3,0,-1];
   arr.some(function(value){
       return value < 0;
   }) // true
   
   var arr2 = [1,2,3,0,6];
   arr2.some(function(value){
       return value < 0;
   }) // false
   

5. map

   加工。遍历数组，并通过回调函数操作后返回一个新数组。原数组不变。

   语法：arr.map(callback(value))

   参数：

   • callback：回调函数

     有一个参数：

     value：当前元素

   var arr = [1,2,3,4,5];
   var arr2 = arr.map(function(value){
       return value * 2;
   })
   console.log(arr); // 1,2,3,4,5
   console.log(arr2); // 2,4,6,8,10
   

6. filter

   过滤。遍历数组中的元素，返回满足回调函数的元素组成的数组。原数组不变。

   语法：arr.filter(callback)

   参数：

   • callback：回调函数

     参数：value：遍历的值

   var arr = [1,2,3,4,5,6,7];
   var arr2 = arr.filter(function(value){
       return value % 2 == 0;
   })
   console.log(arr); // [1,2,3,4,5,6,7]
   console.log(arr2); // [2,4,6]
   

7. reduce

   归并。功能很强大，reduce()方法从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

   语法：arr.reduce(callback(acc,value,index,array)，initialValue)

   参数：

   • callback：回调函数

     acc：累积器，累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。

     value：当前元素

     index：当前索引（可选参数

     array：原数组（可选参数

   • initialValue：初始值（可选参数

   // reduce 基本累加
   var arr = [1,2,3,4];
   var res = arr.reduce(function(acc,value){
       return acc + value;
   })
   console.log(res); // 10
   
   

    // reduce 对对象的值进行操作
   var initialValue = 0;
   var arr = [{x:1},{x:2},{x:3},{x:4}]
   var res = arr.reduce(function(acc,value){
       return acc + value.x;
   },initialValue)
   console.log(res); // 10
   

    // reduce 将二维数组转化为一维数组
   var arr = [[0,1],[2,3],[4,5]];
   var res = arr.reduce(function(acc,value){
       return acc.concat(value);
   },[]);
   console.log(res); // [0,1,2,3,4,5]
   

   // 计算数组中每个元素出现的次数
   var arr = ['Alley','Bob','Hehe','Alley','Eric','Bruce','Alley','Eric','Tiff']
   var res = arr.reduce(function(allNames,name){
       if(name in allNames){
           allNames[name] ++;
       }
       else{
           allNames[name] = 1;
       }
       return allNames;
   },{});
   console.log(res); // {Alley: 3,Bob: 1,Bruce: 1,Eric: 2,Hehe: 1,Tiff: 1}
   

   // 按照属性对object进行分类
   var people = [
       {name:'Alley',age:30},
       {name:'Eric',age:40},
       {name:'Apple',age:20},
       {name:'Edan',age:30},
       {name:'Code00',age:20}
   ]
   function groupBy(objectArr,property){
       return objectArr.reduce(function(acc,obj){
           var key = obj[property];
           if(!acc[key]){
               acc[key] = [];
           }
           acc[key].push(obj);
           return acc
       },{});
   }
   var groupPeople = groupBy(people,'age');
   console.log(groupPeople);
   // {
   //     20:[{{name:'Apple',age:20},{name:'Code00',age:20}}],
   //     30:[{name:'Edan',age:30},{name:'Alley',age:30},],
   //     40:[{name:'Eric',age:40}]
   // }
   

   // reduce 实现数组去重
   var arr = ['a','b','a','b','c','e','f','d','c','e']
   var res = arr.reduce(function(acc,currentValue){
       if(acc.indexOf(currentValue) === -1){
           acc.push(currentValue);
       }
       return acc;
   },[])
   console.log(res); // ['a','b','c','e','f','d']
   
   // 2：
   var arr2 = [1,2,4,6,7,8,5,3,3,2,5,7,5,4];
   var newArr = arr2.sort();
   var res2 = newArr.reduce((init,current)=>{
       if(init.length === 0 || init[init.length-1] !== current){
           init.push(current);
       }
       return init;
   },[]);
   console.log(res2); // [1,2,3,4,5,6,7,8]