【JavaScript 基础】-- 多种创建数组的方式

在 JavaScript 数据结构中，数组几乎是“基石”一般的存在。所以要好好学呀！

1、传统方式

平时用的最多的创建方式想必就是直接方括号+元素内容这种形式：

const arr = [1, 2, 3, 4]   

2、构造函数方式

其实很多时候我们初始化一个数组时，并不知道它内部元素的情况。这种场景下，推荐使用构造函数创建数组的方法：

const arr = new Array() // 等价于 const arr = []

不过使用构造函数，不仅仅能创建空数组。它还能实现“指定长度的空数组”这样的需求。需要多长的数组，就给它传多大的参数：

const arr = new Array(6)

技巧：在一些场景中，有时候需要我们创建 “创建一个长度确定、同时每一个元素的值也都确定的数组”。这时我们可以调用 fill 方法，假设需求是每个坑里都填上2，只需给它 fill 一个2：

const arr = (new Array(6)).fill(2)

注意：不能 fill 一个引用类型，如果这个入参的类型是引用类型，那么 fill 在填充坑位时填充的其实就是入参的引用。这就会导致当你给某一坑位赋值时，你会发现一整列的元素都被设为了同一个。

3、Array.from()

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

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from('hello')  // ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

如果参数是一个真正的数组，会返回一个一模一样的新数组：

Array.from([1, 2, 3])  // [1, 2, 3]

注意：相比于扩展运算符（...）虽然它可以将某些数据结构转为数组。

// arguments对象
function foo() {
  var args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]

但是扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。Array.from方法则是还支持类似数组的对象（上文有提到）。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

Array.from({ length: 3 });

值得一提的就是，Array.from 还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

根据这个特性我们可以实现一些在创建数组时的高阶应用。

4、Array.of()

Array.of 方法可用于将一组值，转换为数组。Array.of基本上可以用来替代Array()或new Array()。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]