ES6之数组的扩展-白红宇

ES6在数组方面增加了一些方法和原型属性，有些还是蛮有用的。

扩展运算符：把数组或者类数组转成用逗号隔开的参数：把类数组转成数组，有限制（类数组就是有长度的变量）：

var str = 'wade';console.log([...str]);//["w", "a", "d", "e"]把数组转成用逗号隔开的参数序列：var arr = [1, 2, 3];console.log(...arr); //1 2 3console.log(1, 2, 3); //1 2 3复制代码

扩展运算符使用场景很多：替代apply传参：

Math.max.apply(null, [1, 2, 3])Math.max(...[1, 2, 3])复制代码

Push函数：

var arr = [1, 2, 3];arr.push(5, 6, 7);arr.push(...[5, 6, 7]);复制代码

大部分都是数组的使用，合并数组、复制数组、与结构结合、函数传参等等。

Array.from：将类数组转换成数组，无限制

console.log(Array.from('wade')); //["w", "a", "d", "e"]console.log(Array.from( {
   '0': 'a', '1': 'b', '2': 'c', length: 3})); //["a", "b", "c"]console.log(Array.from([1, 2, 3])); //[1, 2, 3]console.log(Array.from({ length: 3 })); //[undefined, undefined, undefined]复制代码

Array.from还接受第二个函数参数，对每个元素进行处理返回：

console.log(Array.from('5678', (x) => {    return x*2})) //[10, 12, 14, 16]复制代码

Array.from第三个参数是this，用以this的指向。

Array.of：将值转成数组这个函数其实就是解决了Array的行为差异：

console.log(Array (3)) //[ , , ,}console.log(Array.of (3)) //[3]复制代码

copyWithin方法：改变原数组，接收三个参数，在当前数组内部，将指定位置的成员复制到其他位置（数组函数参数的下标都是包前不包后）

arr.copyWithin（target， start， end）target（必需）：从该位置开始替换数据。如果为负值，表示倒数。start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。var arr = [1, 2, 3, 4, 5];arr.copyWithin(0, 3)console.log(arr);// [4, 5, 3, 4, 5]复制代码

find() 和 findIndex()：不改变原数组，接收一个函数参数和一个this对象 Find返回第一个符合条件的元素，否则undefined，findIndex返回第一个元素的下标，否则-1

var arr = [1, 0, 9, -5, 12]var resFind = arr.find((value, index, arr) => {    return value > 9;}, this);var resFindIndex = arr.findIndex((value, index, arr) => {    return value > 9;}, this);console.log(resFind); //12console.log(resFindIndex); //4复制代码

Fill：填充数组，改变原数组，接收三个参数，第一个是替换元素，第二个是起始位置，第三个是结束位置。

var arr = [1, 0, 9, -5, 12]arr.fill('a', 1, 3);console.log(arr); //[1, "a", "a", -5, 12]复制代码

entries()，keys() 和 values()：返回遍历器对象Interator，配合for of循环，keys是对键名的遍历、values是对键值的遍历、entries是对键名和键值的遍历

var arr = [1, 2, 3]for(var val of arr.keys()){    console.log(val);}//0 1 2for(var val of arr.values()){    console.log(val);}// 1 2 3for(var val of arr.entries()){    console.log(val);}//[0, 1] [1, 2] [2, 3]复制代码

includes()：返回一个布尔值，表示是否包含某个元素，接收两个个参数，第一个是要查找的元素，第二个是起始位置 var arr = [1, 2, 3, 4, 5] console.log(arr.includes(4, 2)); //true

flat()，flatMap()：返回新数组，不改变原数组。拉平数组，就是把二维、三维数组变成一维数组 flat接收一个参数，拉平几维数组，会跳过空位：

console.log([1, 2, [3, [4, 5]]].flat())// [1, 2, 3, [4, 5]]console.log([1, 2, [3, [4, 5]]].flat(2));// [1, 2, 3, 4, 5]flatMap跟map函数一样，需要returnconsole.log([1, 2, 3].flatMap((val, index, arr) => {    return val * 2;}));// [2, 4, 6]复制代码

数组空位：数组的空位指，数组的某一个位置没有任何值，比如[,,,]空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值。 ES5 对空位的处理很不一致，大多数情况下会忽略空位。ES6则不跳过空位，转为undefined

console.log(Array.from([1, , 2]));//[1, undefined, 2]复制代码

forEach(),filter(),reduce(),every()和some()都会跳过空位。 map()会跳过空位，但会保留这个值 join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

Array.from()、扩展运算符...、entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。 For of也会循环遍历空位，CopyWithin()会连空位一起拷贝，fill也会把空位视为正常位置

数组的组合使用其实很好用，只是平时很少去考虑使用这些提供的方法，要是能把数组的使用都记清楚，对平时开发有很大的便利。

Coding 个人笔记