JavaScript之你可能不知道的数组巧用

ES5和ES6数组拓展之后数组方法有几十种之多，各组组合应用让数组变得异常强大，能用少量代码实现比较复杂的功能，现在总结下常用的一些使用技巧。

拷贝数组的技巧

技巧1 使用Array.concat()

var arr=[1,2,3];
var arr2=arr.concat();
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]

技巧2 使用Array.slice()

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

技巧3 使用Object.assign()

var arr=[1,2,3];
var arr2=Object.assign([],arr);
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]

技巧4 使用展开操作符

var arr=[1,2,3];
var arr2=[...arr];
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]

技巧5 使用数组结构

var arr=[1,2,3];
var [...arr2]=arr;
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]

技巧6 使用Array.filter()

var arr=[1,2,3];
var arr2=arr.filter((item)=>{
  return true;
});
arr2[0]=0;
console.log(arr2);
console.log(arr)

技巧7 使用Array.of()和展开操作符

var arr=[1,2,3];
var arr2=Array.of(...arr)
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]

技巧8 使用Array.map()

var arr=[1,2,3];
var arr2=arr.map(item=>item);
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]

技巧9 使用new Array()和展开操作符

var arr=[1,2,3];
var arr2=new Array(...arr);
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]

注意：上述方法拷贝数组都是浅拷贝，如果数组元素中存在对象，修改对象属性后依然会影响被拷贝的数组，原因是这里复制对象复制的是指针，指向的地址还是同一个。比如：

多个数组的交集

var arr1=[1,2,2,3,4];
var arr2=[2,5,6];
var result=arr1.filter((item)=>{ return arr2.includes(item); })
console.log(result);//[2,2]

数组去重

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

数组转为对象

var color = ['red','blue'];
var colorObj = {...color};//{0:'red',1:"blue"}

数组求和

var arr=[1,2,3,4,5];
var sum=arr.reduce((accumulator,current)=>{
  return accumulator+current;
})
console.log(sum);//15

从数组中删除虚值

var mixedArr = [0,'blue','',NaN,9,true,undefined,'white',false];
var result=mixedArr.filter(Boolean)
console.log(result);//["blue", 9, true, "white"]

数组合并

var arr1=[1,2];
var arr2=[3,4];
var new_arr=arr1.concat(arr2);
console.log(new_arr);//[1, 2, 3, 4]

var arr1=[1,2];
var arr2=[3,4];
var new_arr=[...arr1,...arr2];
console.log(new_arr);//[1, 2, 3, 4]

求数组最大值

var arr=[1,2,4,5];
var max=Math.max.apply(null,arr);
var min=Math.min.apply(null,arr);
console.log(max,min);//5,1

求数组中第一个唯一值

var arr=[2,2,2,3,3,4,5];
function findFirst(arr){
  for(var i=0;i<arr.length;i++){
    if(arr.indexOf(arr[i])===arr.lastIndexOf(arr[i])){
      return arr[i]
    }
 }
}
console.log(findFirst(arr));//4