JavaScript Array.of() 方法

Array.of() 语法

Array.of() 是 JavaScript 数组的一个静态方法，它用于创建一个数组，类似于构造函数 new Array()。

语法：

Array.of(e1, e2, ..., eN)

说明：

Array.of() 方法可以接收 0 个或 n 个参数，这些参数最终会作为数组的元素。

Array.of() 摘要

Array.of() 示例

接下来，我们通过一个简单的例子来讲解一下 JavaScript Array.of() 方法是如何使用的。

示例 1：Array.of() 基本用法

const arr1 = Array.of();
const arr2 = Array.of(2);
const arr3 = Array.of("red", "green", "blue");
console.log(arr1);
console.log(arr2);
console.log(arr3);

运行结果如下。

[]
[ 2 ]
['red', 'green', 'blue']

Array.of() 与 new Array()

Array.of() 和 new Array() 都可以用于创建一个数组，它们之间的区别在于参数的处理。

• 当 Array.of() 的参数是一个数字时，表示创建以该数字为元素的数组。比如 Array.of(3) 等价于 [3]。
• 当 new Array() 的参数是一个数字时，表示创建一个长度等于该数字的数组。比如 new Array(3) 等价于 [<3 empty items>]。

在 ES6 之前，创建数组有 2 种方式：① 使用构造函数（即 new Array()）；② 使用数组字面量（即 “[]”）。但这两种方式可能会产生一些奇奇怪怪的行为，我们来看几个例子。

示例 2：new Array() 创建数组

const arr1 = new Array();
const arr2 = new Array(0);
const arr3 = new Array(1);
const arr4 = new Array(1, 2);

console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);

运行结果如下。

[]
[]
[ <1 empty item> ]
[1, 2]

分析：

当 new Array() 的参数为空时，此时表示定义一个空数组，这句代码是没什么问题的。

当 new Array() 的参数为 0 时，我们预期的效果是：“定义一个数组，该数组只有1个元素，而元素的值为0。” 但这里比较奇怪，new Array(0) 的运行结果却是一个空数组。

当 new Array() 的参数为 1 时，我们预期的效果是：“定义一个数组，该数组只有1个元素，而元素的值为1。” 此时结果也非常奇怪，new Array(1) 的运行结果是 [empty]。其中，[empty] 并不是一个空数组，而是包含一个元素的数组（只不过该元素没有值而已），小伙伴执行 console.log(arr3.length) 会发现 arr3 的长度为 1。

当 new Array() 的参数为 “1,2” 时，此时表示定义一个包含 2 个元素的数组，这一句代码是没什么问题的。

示例 3： “[]” 创建数组

const arr1 = [];
const arr2 = [0];
const arr3 = [1];
const arr4 = [1, 2];

console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);

运行结果如下。

[]
[0]
[1]
[1, 2]

分析：

使用数组字面量的方式来创建数组，就没有构造函数方式那么多怪异的行为。同样地，使用 ES6 提供的 Array.of() 也不会有 new Array() 的怪异行为。

示例 4：Array.of() 创建数组

const arr1 = Array.of();
const arr2 = Array.of(0);
const arr3 = Array.of(1);
const arr4 = Array.of(1, 2)

console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);

运行结果如下。

[]
[0]
[1]
[1, 2]

分析：

Array.of() 这种方式，主要也是为了解决 new Array() 方式的怪异行为。虽然引入了 Array.of()，并不代表 “[]” 这种方式就被抛弃了。在实际开发中，我们还是比较推荐使用 “[]” 来创建数组，主要是这种方式更加简单直观。而 Array.of() 这种方式还是要了解一下，因为不少地方可能也会用到。

最后小伙伴就会问了：“为什么 ES5 这些语法这么奇怪呢？” 实际上，这些都是历史遗留的问题，因为 JavaScript 的创造者并不是一开始就能把 JavaScript 这门语言设计得十全十美的，而是经过无数次的迭代升级才慢慢完善的。