前端面试题 | 你真的搞明白如何创建数组吗?

创建数组？

这谁不会啊！ let arr = [1,2,3] 这不创建成功吗？

哈，上面只是开个玩笑～

先来条题目提提神 ——

题目：

下列能创建出 arr = [1] 的方法有：

答案在评论区。

解析：

在 A 选项中，Array 构造函数的参数只有一个且为数字时，生成的是数组长度为该数字的空数组；

选项 B 的 Array.of 在两个及以上的参数时候表现和 Array 构造函数一致。不同的是，当只有一个参数时，它也是创建出包含该参数的数组；

Array.from 是将伪数组对象或可迭代对象转换成数组，数字类型并不属于这两种，最后生成的是空数组；

Array.prototype.fill 将参数 1 填充到长度为 1 的空数组中，所以能创建出目标数组。

创建数组还能玩出这么多花样

在上面选项中出现的 Array.of、Array.from、Array.prototype.fill 都是在 ES6 中新增的一些特性。

归纳一下，常规的创建数组方法有以下几种：

1. 普通的构造函数与字面量

常见的构建数组方法有形如 let arr = [1,2] 的字面量方法和 let arr = new Array(1,2) 的构造函数方法。

2. Array.of

Array 构造函数根据传入参数的类型或个数不同，从而产生不同的构造行为，使用 Array.of 能避免这种情况。即使 Array.of 接收单个数字，也能符合直觉地构建出包含该数字的数组。

3. Array.from

Array.from 则是从已有的对象中构建出数组，这种对象要求是伪数组对象或可迭代对象。

有些朋友可能对可迭代对象概念不深，但是伪数组对象肯定比较了解。最常见的一个伪数组对象就是 arguments 对象。面试中也会出现：请问函数的 arguments 是数组吗？

那如果想将 arguments 这个伪数组转换成真正的数组。现在可以使用 Array.from，方便且符合语意。

4. Array.prototype.fill

对于 Array.prototype.fill 这个填充数组的方法，有一点值得注意的是：当接收的参数是对象时，填充数组的是这个对象的引用。

var arr = Array(3).fill({})
// [{}, {}];

arr[0].hi = "hi"; 
// [{ hi: "hi" }, { hi: "hi" }]

点击「了解更多」可以测试一下你是否真的搞明白如何创建一个数组。