ES6数组的扩展

一、数组的扩展运算符

二、数组对象新增的方法

二、数组的实例新增的方法

1、数组的扩展运算符是三个点(…),它好比rest参数的逆运算，将一个数组转换为用逗号分隔的参数序列

console.log(...[1,2,3]);//1  2  3
console.log(1,...[2,3,4,5],6);//1  2  3  4  5  6

2、数组的扩展运算符主要用于函数调用

function add(x,y){
    return x + y
}
const numbers = [4,38]
console.log(add(...numbers));//42

let array = []
function push(array,...items){
    array.push(...items)
}
push(array,1,2,3,4,5)
console.log(array);//[ 1, 2, 3, 4, 5 ]

3、数组对象新增的方法
（1）Array.from() 将类数组对象和可遍历的对象转为真正的数组
将一个类似数组的对象转为数组

let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
}
let arr = Array.from(arrayLike)
console.log(arr);//[ 'a', 'b', 'c' ]

将一个可遍历的对象转为数组

let set1 = new Set([1,2,3,3])
console.log(set1);//Set(3) { 1, 2, 3 }
console.log(Array.from(set1));//[ 1, 2, 3 ]

（2）Array.of() 将一组值转为数组

console.log(Array.of('a','b','c'));//[ 'a', 'b', 'c' ]
console.log(Array.of());//[]
console.log(Array.of(1));//[ 1 ]
console.log(Array.of(null));//[ null ]

4、数组的实例新增的方法
（1）、find() 返回符合条件的第一个数组元素，如果没有符合条件的元素，则返回undefined,参数为一个回调函数

let arr = [1,2,3,3,2,1];
console.log(arr.find((n)=>{return n>1}));//2

find()方法的参数回调函数可以接受三个参数，以此为当前的值、当前的位置和原数组

let arr1 = [1,5,10,15];
console.log(arr1.find((value,index,arr1)=>value>9));//10

（2）、findIndex()返回符合条件的第一个数组元素的索引，如果没有找到返回-1，参数为一个回调函数

let arr2 = [10,3,23,-2,10,4];
console.log(arr2.findIndex((value)=>value>15));//2

（3）、fill()填充一个数组，有三个参数，第一个参数填充的对象，第二个参数和第三个参数指定了填充的起始位置和结束位置

console.log(['a','b','c'].fill(7));//[ 7, 7, 7 ]
console.log(new Array(3).fill('a'));//[ 'a', 'a', 'a' ]
console.log([1,2,3].fill('a',1,2));//[ 1, 'a', 3 ]
console.log([1,2,3].fill('a',0,2));//[ 'a', 'a', 3 ]

（4）、keys()对键名的遍历 values()对键值的遍历 entries()对键值对的遍历

let arr = ['a','b','c']
for(let index of arr.keys()){
    console.log(index);// 0  1  2
 }
for(let ele of arr.values()){
    console.log(ele);//'a'  'b'  'c'
}
for(let[index,ele] of arr.entries()){
    console.log(index,ele);//0--'a'  1--'b'  2--'c'
}

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历。

let arr = ['lisi','wanger','zhansan']
let a = arr.entries()
console.log(a);
console.log(a.next().value);//[ 0, 'lisi' ]
console.log(a.next().value);//[ 1, 'wanger' ]
console.log(a.next().value);//[ 2, 'zhansan' ]
console.log(a.next().value);//undefined

（ 5）、includes(),表示某个数组是否包含指定的值，返回一个布尔值

console.log([1,2,3].includes(2));//true
console.log([1,2,3].includes(4));//false
console.log([1,2,undefined].includes(undefined));//true

（6）、flat() 将嵌套的数组拉平变成一维数组，该方法返回一个新的数组，不改变原数组

console.log([1,[2,3],[4,5]].flat());//[1,2,3,4,5]

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

 console.log([1,2,[3,[4,5]],6].flat());//[ 1, 2, 3, [ 4, 5 ], 6 ]
console.log([1,2,[3,[4,5]],6].flat(2));//[ 1, 2, 3, 4, 5, 6 ]

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

console.log([1,[2,[3,[4,5],6],7],8].flat(Infinity));
//[1,2,3,4,5,6,7,8]

（7）、flatMap()对原数组的每个成员执行一个函数，然后对返回值组成的数组执行flat()方法，该方法返回一个新的数组，不改变原来的数组

console.log([2,3,4].flatMap((val)=>[val,val*2]));
//[ 2, 4, 3, 6, 4, 8 ]

flatMap()只能展开一层数组

console.log([1,2,3].flatMap(val=>[[val*2]]));
//[ [ 2 ], [ 4 ], [ 6 ] ]