ES6新增数组的方法 ES6新增数组的方法

一.Array.from() Array.from 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

let arrayLike = { "0": "a", "1": "b", "2": "c", length: 3 }; // ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] // ES6的写法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] //任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。 //扩展运算符只能对部署 Iterator 接口的类数组转换为真正的数组 //console.log([...arrayLike]); // 报错 TypeError: Cannot spread non-iterable object//Array.from还可以接受第二个参数，作用类似于数组的map方法 var map = Array.from(arrayLike, x => x + x); console.log(map); //["aa", "bb", "cc"] 复制代码

二.Array.of() Array.of 方法用于将一组值，转换为数组。弥补数组构造函数 Array()的不足。因为参数个数的不同，会导致 Array()的行为有差异

//如下代码看出差异 Array.of(3); // [3] Array.of(3, 11, 8); // [3,11,8]new Array(3); // [, , ,] new Array(3, 11, 8); // [3, 11, 8]// Array.of方法可以用下面的代码模拟实现。function ArrayOf() { return [].slice.call(arguments); } 复制代码

三.数组实例的 find() 和 findIndex()

find()方法找到第一个符合条件的成员,没有符合的则返回 undefined
findIndex 方法的用法与 find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

// find() var item = [1, 4, -5, 10].find(n => n < 0); console.log(item); // -5 // find 也支持这种复杂的查找 var points = [ { x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 40 }, { x: 40, y: 50 }, { x: 50, y: 60 } ]; points.find(function matcher(point) { return point.x % 3 == 0 && point.y % 4 == 0; }); // { x: 30, y: 40 } 复制代码

findIndex()返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
indexOf(..) 会提供这些，但是无法控制匹配逻辑；它总是使用 === 严格相等。所以 ES6 的 findIndex(..) 才是解决方案

var points = [ { x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 40 }, { x: 40, y: 50 }, { x: 50, y: 60 } ]; points.findIndex(function matcher(point) { return point.x % 3 == 0 && point.y % 4 == 0; }); // 2 points.findIndex(function matcher(point) { return point.x % 6 == 0 && point.y % 7 == 0; }); //1 复制代码

四.数组实例的 fill()

fill()方法使用给定值，填充一个数组
fill 方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置

// fill方法使用给定值，填充一个数组。 var fillArray = new Array(6).fill(1); console.log(fillArray); //[1, 1, 1, 1, 1, 1] //fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。 ["a", "b", "c"].fill(7, 1, 2); // ['a', 7, 'c'] // 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。 let arr = new Array(3).fill({ name: "Mike" }); arr[0].name = "Ben"; console.log(arr); // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}] 复制代码

五.数组实例的 entries()，keys() 和 values() entries()，keys()和 values()——用于遍历数组,可以用 for...of 循环进行遍历，唯一的区别是 keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let index of ["a", "b"].keys()) { console.log(index); } // 0 1 for (let elem of ["a", "b"].values()) { console.log(elem); } // a b for (let [index, elem] of ["a", "b"].entries()) { console.log(index, elem); } // 0 "a" // 1 "b" var a = [1, 2, 3]; [...a.values()]; // [1,2,3] [...a.keys()]; // [0,1,2] [...a.entries()]; // [ [0,1], [1,2], [2,3] ] 复制代码

六.includes()方法返回一个布尔值

[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false [(1, 2, NaN)].includes(NaN); // true 复制代码

includes 方法弥补了 indexOf 方法不够语义化和误判 NaN 的缺点
七.数组实例的 flat()，flatMap()

flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。传参数代表拉平几层默认是一层
flatMap()只能展开一层数组。方法对原数组的每个成员执行一个函数（相当于执行 Array.prototype.map()），然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组

// flat() [1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5] //flatMap() [2, 3, 4].flatMap((x) => [x, x * 2]) //map执行完后是[[2, 4], [3, 6], [4, 8]] //然后在执行flat()方法得到下边的结果 // [2, 4, 3, 6, 4, 8] // flatMap()只能展开一层数组。 // 相当于 .flat() [1, 2, 3, 4].flatMap(x => [ [x * 2] ]) //map执行完后是[[[2]], [[4]], [[6]], [[8]]] //然后在执行flat()方法得到如下结果 // [[2], [4], [6], [8]] 复制代码

参考: 阮一峰 es6 你不知道的 Javascript(下卷)
【ES6新增数组的方法】转载来源：科比 ES6新增数组的方法