ES6 中 Array 新增的方法有哪些？

大家好，我是前端西瓜哥。

我曾在简历上写过自己熟悉 ES6，然后在面试中就有不小概率被问到 ES6 中 Array 新增的方法有哪些。

需要注意的是问的是数组 Array 的新方法，而不是问数组实例 Array.prototype。

Array.from()

Array.from() 方法接收一个可迭代对象或类数组对象，将其浅拷贝到一个普通数组里，并将这个数组返回。

类数组对象，指的是有 length 属性的对象，比如

const arrLike = {
  1: 'b',
  length: 3
};

类数组对象不要求属性 有 0 到 length - 1 范围内所有的整数。如果索引值不齐全，我们可以称其为 稀疏数组。

类数组对象转换为数组 的例子：

const arrLike = {
  1: 'b',
  length: 3
};

const arr = Array.from(arrLike);
// [undefined, 'b', undefined]

此外，还可以将可迭代对象转换为数组。

可迭代对象指的是含有 [Symbol.iterator] 属性的对象，且该属性值是一个函数，该函数会返回一个带有 next 函数属性的对象。

这样实现后，我们可以使用 for...of 去不停地迭代调用这个 next 方法，拿到一个个元素。

基本上，JS 内建方法返回的类数组对象，在 ES6 之后，同时也是可迭代对象。比如

• 普通函数下的 arguments

• Dom 集合

还有纯可迭代对象 Map 实例、Set 实例等。

可迭代对象转换为数组 的例子：

const set = new Set([5, 4, 1]);

const arr = Array.from(set);
// [5, 4, 1]

如果既是类数组对象，又是可迭代对象，Array.from() 方法会使用迭代器方法。

Array.from() 除了必填的第一个参数，还有可选的第二个参数 mapFn 和第三个参数 thisArg。它们效果等价于再使用一次 Array.prototype.map 方法。

Array.from(arrLike, mapFn, thisArg);

// 等价于
Array.from(arrLike).map(mapFn, thisArg);

个人感觉有点多余。

Array.of()

Array.of() 则是用来创建数组的，该方法接收可变数量的参数，将这些参数按顺序成为需要返回的新数组的数组元素。

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

看起来好像并不算什么新功能啊，Array 方法也可以啊。

其实 这个新方法的出现是为了解决 Array 构造函数的歧义问题：

Array(7);          // [empty × 7]：长度为 7 的数组元素为 empty 的数组
Array(1, 2, 3);    // [1, 2, 3]

如果 Array 方法的参数只有 1 个，这个参数设置会成为数组的长度，然后数组元素全部填充为空值。

如果 Array 方法的参数有多个，则这些参数会成为数组元素。

确实有点让人困惑。

结尾

ES6 中，Array 新增的方法有两个：

• Array.from()：将类数组对象或可迭代对象转换为普通数组

• Array.of()：参数作为数组元素，创建数组。解决原来 Array 构造函数的歧义问题

我是前端西瓜哥，最近在写前端面试题，欢迎关注我。