大家好,我是前端西瓜哥。
我曾在简历上写过自己熟悉 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 构造函数的歧义问题
我是前端西瓜哥,最近在写前端面试题,欢迎关注我。