JavaScriptArray.of方法详解

还在用 `new Array()` 创建数组吗？小心踩坑！本文为你详细解读 JavaScript 中更安全、更可靠的数组创建方法：`Array.of()`。`Array.of()` 解决了 `new Array()` 在处理单个数字参数时可能出现的歧义，始终将所有参数视为数组元素，避免了创建指定长度空数组的意外情况。它不仅语义清晰，提升代码可读性，而且行为一致，无论传入多少参数，都会直接创建包含这些元素的数组，尤其适用于动态参数场景。本文将深入探讨 `Array.of()` 的优势、适用场景、使用细节以及与 `Array.from()` 的区别，助你掌握现代 JavaScript 数组创建的最佳实践，写出更健壮、更易维护的代码。快来了解一下吧！

Array.of() 比 new Array() 更适合创建新数组，因为它始终将所有参数视为数组元素，避免了构造函数在单个数字参数时创建空数组的歧义。1. Array.of() 无论传入多少参数，都会直接创建包含这些元素的数组；2. 而 new Array() 在仅一个数字参数时会创建相应长度的空数组，容易导致误解；3. Array.of() 对 null、undefined 或复杂对象也保持一致行为，适用于动态参数场景；4. 它语义清晰，提升代码可读性和可靠性，是现代 JS 推荐的数组创建方式。

在JavaScript里，如果你想根据一系列参数，不管它们是什么类型或有多少个，直接创建一个新的数组实例，Array.of() 就是那个非常直接且可靠的方法。它会把所有你传给它的参数，一个不落地，按顺序变成新数组的元素。这和我们以前习惯的 new Array() 在处理单个数字参数时那种“创建指定长度空数组”的特性完全不同，Array.of() 的行为是始终如一的，就是字面意义上的“把这些东西变成一个数组”。

解决方案

使用 Array.of() 创建数组非常直接，你只需将希望作为数组元素的任何值作为参数传递给它。它会返回一个包含这些元素的新数组，不会有任何歧义。

举个例子，如果你想创建一个包含数字 1、2 和字符串 'hello' 的数组，你可以这样写：

const myArray = Array.of(1, 2, 'hello');
console.log(myArray); // 输出: [1, 2, 'hello']

即使你只传递一个参数，Array.of() 也只会把它当作一个元素放进数组：

const singleElementArray = Array.of(7);
console.log(singleElementArray); // 输出: [7]

这和 new Array(7) 得到一个包含7个空位的数组完全不同，Array.of() 的行为就是这么直观。它也不会因为你传入 null、undefined 或是其他复杂对象而感到困惑，它们都会被视为普通的元素。

const mixedArray = Array.of(null, undefined, { a: 1 }, [10, 20]);
console.log(mixedArray); // 输出: [null, undefined, { a: 1 }, [10, 20]]

可以说，Array.of() 提供了一种更安全、更可预测的方式来从一组给定值中构建数组，尤其是在你对输入参数的类型和数量不是那么确定的时候。

为什么 Array.of() 比 new Array() 更适合创建新数组？

这其实是很多新手甚至一些有经验的开发者都会遇到的一个“坑”。Array.of() 诞生的一个主要原因就是为了解决 new Array() 在处理单一数字参数时的歧义。当你想创建一个数组，里面只有一个数字元素时，比如 [7]，你可能会直觉地写 new Array(7)。但结果往往出乎意料，你得到的并不是 [7]，而是一个长度为7、里面全是空槽的数组。

// 使用 new Array()
const arr1 = new Array(1, 2, 3); // 得到 [1, 2, 3] - 没问题
const arr2 = new Array('apple', 'banana'); // 得到 ['apple', 'banana'] - 也没问题

const arr3 = new Array(7); // 得到一个长度为7的空数组，如 [empty × 7] - 这就是问题所在！
console.log(arr3.length); // 7
console.log(arr3[0]); // undefined

而 Array.of() 的设计理念就是消除这种不确定性。无论你传入多少个参数，或者这些参数是什么类型，Array.of() 都会把它们当作独立的元素来处理，一个萝卜一个坑地放入新数组。

// 使用 Array.of()
const arrOf1 = Array.of(1, 2, 3); // 得到 [1, 2, 3]
const arrOf2 = Array.of('apple', 'banana'); // 得到 ['apple', 'banana']

const arrOf3 = Array.of(7); // 得到 [7] - 这才是我们想要的！
console.log(arrOf3.length); // 1
console.log(arrOf3[0]); // 7

这种行为的一致性，让 Array.of() 在需要根据动态或不确定数量的参数创建数组时显得尤为可靠。它避免了因为参数数量而导致的意外结果，让代码更易读、更可预测。在我看来，除非你确实需要创建一个预设长度的空数组（这种场景其实不多），否则 Array.of() 几乎总是比 new Array() 更优的选择，因为它避免了潜在的混淆。

在哪些实际场景中，Array.of() 能发挥其优势？

Array.of() 的优势在于其行为的确定性和直观性，这使得它在几种特定场景下特别有用：

1. 从任意参数创建数组，无需担心参数数量： 这是最核心的用途。想象一个函数，它可能接收一个、两个或多个参数，你希望把这些参数都收集到一个数组里进行后续处理。如果用 new Array()，你得先判断参数数量，再决定是直接用构造函数还是先用一个临时数组包裹。而 Array.of() 就能优雅地解决这个问题。

   function processItems(...items) {
       // 无论 items 有一个还是多个，Array.of 都能正确地把它们转换成数组
       const itemArray = Array.of(...items);
       console.log(`处理的元素: ${itemArray}`);
       // ... 对 itemArray 进行操作
   }
   
   processItems(10); // 处理的元素: 10
   processItems('a', 'b', 'c'); // 处理的元素: a,b,c

2. 避免 new Array() 的陷阱： 当你从外部获取一个可能是单个数字的值，并想把它作为数组的唯一元素时，Array.of() 是最安全的。

   const userInputValue = 5; // 假设这是用户输入的一个数字
   const dataToSend = Array.of(userInputValue); // 得到 [5]，而不是一个长度为5的空数组
   console.log(dataToSend);

3. 构建包含 undefined 或 null 等特殊值的数组： Array.of() 能够将这些特殊值视为普通元素。

   const configDefaults = Array.of(undefined, null, 'default_string');
   console.log(configDefaults); // [undefined, null, 'default_string']
   // 如果用 new Array(undefined, null, 'default_string') 也能得到相同结果，
   // 但 Array.of 的语义更清晰：就是“把这些东西组成数组”。

4. 在函数式编程风格中保持纯粹： 在追求不可变性和纯函数的场景下，Array.of() 提供了一个干净、可预测的方式来创建新的数组，而不依赖于可能产生副作用或不确定行为的旧方法。它只做一件事：从给定参数创建数组。

在我看来，只要是想“字面量地”将一系列值封装进一个数组，Array.of() 都是首选。它让代码的意图更加明确，减少了因为 new Array() 的特殊行为而导致的调试时间。

使用 Array.of() 时需要注意哪些细节？

尽管 Array.of() 带来了很多便利和清晰性，但使用时还是有一些细节值得我们留意，这能帮助我们更好地理解和应用它：

1. 它是一个静态方法： 这一点很重要。你不能在一个数组实例上调用 Array.of()，比如 myArray.of(1, 2) 是会报错的。它必须直接在 Array 构造函数上调用，即 Array.of(arguments)。这和 Array.isArray() 或者 Array.from() 的用法是一致的。

2. 始终返回一个新数组： Array.of() 不会修改任何现有数组，它总是创建一个全新的 Array 实例。这意味着它非常适合在需要保持数据不可变性的场景中使用。每次调用都会产生一个新的数组对象，即使你传入的参数是相同的。

   const a = 1;
   const b = 2;
   const arr1 = Array.of(a, b);
   const arr2 = Array.of(a, b);
   console.log(arr1 === arr2); // false，因为它们是两个不同的数组实例

3. 对参数类型不设限： 无论是基本数据类型（数字、字符串、布尔值、null、undefined、Symbol、BigInt）还是对象（包括函数、数组、日期等），Array.of() 都会把它们当作普通元素来处理。它不会尝试对参数进行任何类型转换或特殊处理，只是简单地将它们收集起来。

4. ES6 特性，兼容性考虑： Array.of() 是 ECMAScript 2015 (ES6) 引入的新特性。这意味着在一些非常老旧的 JavaScript 运行环境中可能不被支持。如果你的项目需要兼容这些环境（比如 IE11 或更早版本），你可能需要引入 Polyfill 来确保其可用性。不过，现代浏览器和 Node.js 环境都已全面支持。

5. 与 Array.from() 的区别： 它们都是 ES6 引入的创建数组的方法，但用途不同。Array.of() 是从一系列值创建数组，而 Array.from() 则是从一个类数组对象或可迭代对象（如 NodeList、Set、Map、字符串、arguments 对象等）创建新数组。虽然有时它们可以达到类似的效果（例如将 arguments 转换为数组），但它们的设计目标和适用场景是不同的。

理解这些细节，能够帮助我们更准确、更高效地运用 Array.of()，避免一些不必要的误解或错误。它确实是现代 JavaScript 中一个非常实用的数组创建工具。

好了，本文到此结束，带大家了解了《JavaScriptArray.of方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！