开发中常用的ES6数组操作方法

继上一篇针对JS中是否改变原数组的操作方法总结，再归纳一些开发中需要用到的ES6数组操作方法，已验证，可直接使用。（毕竟有时处理数据时，忽然想不到方法是很捉急的！）

一、ES6中常用数组的方法

1. [...arr]解构:
   （1）数组复制。拷贝一份，而不是直接指向原数组的内存地址（赋值会这样）。 只能深拷贝一层，第一层（基本类型）拷贝不改变原数组；深层是对象或数组时仍会改变原数组。arr_copy=[…arr]
   （2） 连接、合并数组。上一篇文章提到用 arr1.concat(arr2) 连接，也可以用解构的方法连接：newArr=[...arr1,...arr2]
2. Array.from(): 将类数组（长得像数组）、Set、Map转化为数组。
3. Array.of(): 将一组值转化为数组,得到效果同new Array()。Array.of(1,2,3)
   以下这个例子结果都是[1,2,3]，但不相等，可能是地址不同

   Array.of(1,2,3)==new Array(1,2,3)      // false
   

4. includes()：判断数组中是否含有某个元素，返回true/false。是indexOf()!==-1的优化补充。
5. find(item,index,arr): 找到第一个满足条件的成员，返回改成员。三个参数依次是：当前值，索引，原数组
6. findIndex() :参数同上，不同点是找位置，返回索引。

二、开发中常用的操作

1. push.apply()连接两个数组: arr1.push(...arr2) ，返回值是arr1的长度，arr1原数组发生改变,arr2不变。此方法相当于es5中的 Array.prototype.push.apply(arr1,arr2)。
2. 解构法——除去数组中的某个元素：

const [first,...rest]=[1,2,3,4,5];
// first:1       rest:[2,3,4,5]

注意：解构变量只能放在最后。
对于开发中要处理的对象数组，想要出去一个或多个对象时，也可以使用上面的方法。用键名即可。

3. some(): 不改变原数组，只要有一个满足条件就返回true。

arr.some((item,index,arr)=>{
	return item.name='张三';
})

4. map():遍历数组中的每一项，有返回值。常用于操作数组并返回一组新的结果。
   下面是React中很常用的下拉列表操作。场景是下拉选项异步获取，由接口提供。

let optionList=arr.map((item,index)=>{
// ...一系列操作语句
return <Option value={item.value}>{item.value}</Option>
})

render(){
<Select>{optionList}</Select>~·

5. 数组去重:

• 普通数组　Array.from(new Set(arr))

console.log(Array.from(new Set([1, 2, 3, 3, 4, 4]))) //[1,2,3,4]
console.log([...new Set([1, 2, 3, 3, 4, 4])]) //[1,2,3,4]

• 数组对象

const arr = [
 { name: 'name1', id: 1 },
 { name: 'name2', id: 2 }, 
 { name: 'name3', id: 3 }, 
 { name: 'name1', id: 1 }, 
 { name: 'name4', id: 4 }, 
 { name: 'name5', id: 5 }
 ];
 const result = [];
 arr.forEach(item=>{
 // 思想：JSON.stringify()把类型转为string方便比较，如果result中没有，则push
    !result.some(v => JSON.stringify(v) === JSON.stringify(item)) && result.push(item);
 })
 console.log(result) //[{ name: 'name1', id: 1 },{ name: 'name2', id: 2 },{ name: 'name3', id: 3 },{ name: 'name4', id: 4 },{ name: 'name5', id: 5 }]

8. forEach(item,index,arr):也可以操作数组，作用和for循环类似，但更便捷。与map()相比，没有返回值。
9. reduce(callback,initValue): 函数累加器。

第一个参数callback是操作函数，有四个参数，分别是：初始值（或上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组自身。

callback (pre,current,index,arr)

    1、pre （第一次是提供的初始值，往后是上一次调用回调返回的值）
    2、current（数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、arr （调用 reduce 的数组）

第二个参数是初始值。

initialValue （作为第一次调用 callback 的第一个参数。）

let arr=[1,2,3,4,5];
let sum= arr.reduce((pre,current,index,arr)=>{
	console.log(pre,current);
	return pre+current;
},0)
console.log(sum) // sum:15

7. filter():筛选出符合条目的项。
   常用于删除 场景，一组数据，已知要操作的索引或者id，那么可以过滤出!= id的剩余项

典型的删除条目案例

• 传入索引 i：

delFunc=(i)=>{
	newArr = arr.filter((item,index)=>{ 
	// 返回符合条件的项
	index !=i; // 已知索引时
})}

• 传入id ：

delFunc=(id)=>{
	newArr = arr.filter((item,index)=>{ 
	// 返回符合条件的项
	item.id !=id; 
})}

• 用常规 for 循环也可以做（将剩余项push进新数组），思想：：

delFunc=(i)=>{
	let newArr=[];
	for(let index in arr){
		if(index !== i){
			newArr.push(arr[index]);
		}
		// 或传入的是id
		if(arr[index].id !== id){
			newArr.push(arr[index])
		}
	}
	return newArr;
}

本文为个人总结，参考文献：阮一峰老师的《ES6标准入门》。（可以找我要电子书）