JS `Array.of()`：创建包含指定元素的新数组

各位观众老爷，大家好！今天咱们来聊聊JavaScript里一个挺实用的小家伙——Array.of()。别看它名字平平无奇，用起来可真香！它能让你轻松创建数组，而且用起来比new Array()安全多了。今天就带大家彻底搞懂它，让它成为你工具箱里的一把利剑！

一、Array.of() 是个啥？

简单来说，Array.of()就是一个用来创建新数组的静态方法。它会接收任意数量的参数，然后把这些参数依次放入新数组中，最后返回这个数组。听起来是不是很简单？

二、Array.of() 和 new Array() 的爱恨情仇

如果只是创建数组，你可能会想：直接用new Array()不就好了吗？干嘛还要多此一举搞个Array.of()出来？这里面可大有文章！

new Array() 在处理单个数值参数时，会表现出非常“个性”的行为。如果你只给它传递一个数字，它不会把这个数字放到数组里，而是会创建一个长度为这个数字的空数组！这就像你跟它说：“我要一个装着数字5的盒子！”，它却给你一个能装5个东西的空盒子。

let arr1 = new Array(5); // 创建一个长度为5的空数组
console.log(arr1); // 输出: [ <5 empty items> ]

let arr2 = new Array(1, 2, 3); // 创建一个包含1, 2, 3的数组
console.log(arr2); // 输出: [ 1, 2, 3 ]

看到了吗？new Array(5)并没有创建一个包含数字5的数组，而是创建了一个长度为5的空数组。这很容易让人困惑，尤其是在处理用户输入或者动态数据时，一不小心就会踩坑。

而 Array.of() 就不会有这种烦恼。它总是会把传入的参数原封不动地放到数组里，无论参数是什么类型，有多少个。它就像一个老实巴交的工人，让你放啥就放啥，绝不跟你耍花样。

let arr3 = Array.of(5); // 创建一个包含数字5的数组
console.log(arr3); // 输出: [ 5 ]

let arr4 = Array.of(1, 2, 3); // 创建一个包含1, 2, 3的数组
console.log(arr4); // 输出: [ 1, 2, 3 ]

let arr5 = Array.of("hello", true, 123, {name: "Bob"}); // 创建一个包含各种类型数据的数组
console.log(arr5); // 输出: [ 'hello', true, 123, { name: 'Bob' } ]

看到了吧？Array.of(5) 完美地创建了一个包含数字5的数组，不管你传什么参数，它都能老老实实地帮你放进数组里。

三、Array.of() 的用法详解

Array.of() 的用法非常简单，只需要把你想放入数组的元素作为参数传递给它就可以了。

// 创建一个空数组
let emptyArray = Array.of();
console.log(emptyArray); // 输出: []

// 创建一个包含字符串的数组
let stringArray = Array.of("apple", "banana", "cherry");
console.log(stringArray); // 输出: [ 'apple', 'banana', 'cherry' ]

// 创建一个包含数字的数组
let numberArray = Array.of(10, 20, 30);
console.log(numberArray); // 输出: [ 10, 20, 30 ]

// 创建一个包含布尔值的数组
let booleanArray = Array.of(true, false, true);
console.log(booleanArray); // 输出: [ true, false, true ]

// 创建一个包含对象的数组
let objectArray = Array.of({name: "Alice"}, {name: "Bob"});
console.log(objectArray); // 输出: [ { name: 'Alice' }, { name: 'Bob' } ]

// 创建一个包含null和undefined的数组
let nullUndefinedArray = Array.of(null, undefined);
console.log(nullUndefinedArray); // 输出: [ null, undefined ]

四、Array.of() 的实际应用场景

Array.of() 在实际开发中有很多用处，尤其是在需要动态创建数组，并且数组内容不确定的时候，它就能派上大用场。

• 处理用户输入： 当你需要根据用户输入来创建数组时，Array.of() 可以确保无论用户输入什么，都能正确地创建数组。

  function createArrayFromInput(input1, input2, input3) {
    return Array.of(input1, input2, input3);
  }
  
  let userInputArray = createArrayFromInput(10, "hello", true);
  console.log(userInputArray); // 输出: [ 10, 'hello', true ]

• 函数参数处理： 当你想把函数的参数转换为数组时，Array.of() 非常方便。

  function convertArgumentsToArray() {
    return Array.of(...arguments); // 使用剩余参数语法 ...arguments
  }
  
  let argsArray = convertArgumentsToArray(1, 2, "three", {name: "David"});
  console.log(argsArray); // 输出: [ 1, 2, 'three', { name: 'David' } ]

• 创建常量数组： 当你需要创建一个包含特定值的常量数组时，Array.of() 可以简洁地实现。

  const DEFAULT_COLORS = Array.of("red", "green", "blue");
  console.log(DEFAULT_COLORS); // 输出: [ 'red', 'green', 'blue' ]

• 替代 new Array() 的场景： 只要你想创建一个包含特定元素的数组，都可以使用 Array.of() 来替代 new Array()，避免潜在的陷阱。

五、Array.of() 的兼容性

Array.of() 是 ES6 (ECMAScript 2015) 引入的特性。这意味着，现代浏览器（Chrome, Firefox, Safari, Edge）都原生支持 Array.of()。

对于一些老旧的浏览器，可能需要使用 polyfill 来提供 Array.of() 的支持。你可以使用以下代码来实现一个简单的 polyfill：

if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}

这段代码会检查当前环境是否支持 Array.of()，如果不支持，就定义一个 Array.of() 函数，它的实现原理是利用 arguments 对象和 Array.prototype.slice.call() 方法来创建一个新的数组。

六、Array.of() 的一些注意事项

• Array.of() 是一个静态方法，这意味着它只能通过 Array.of() 来调用，而不能通过数组实例来调用（比如 [].of() 是错误的）。
• Array.of() 不会改变原有的数组（因为它创建的是一个新的数组）。
• Array.of() 可以接收任意数量的参数，包括 0 个参数（创建一个空数组）。

七、Array.of() 和其他数组创建方式的比较

为了更清晰地了解 Array.of() 的优势，我们把它和其他常见的数组创建方式做一个对比：

方法	描述	示例	优点	缺点
[] (数组字面量)	最常用的创建数组的方式，简单直接。	let arr = [1, 2, 3];	简洁易懂，性能好。	无法动态设置数组长度，需要手动添加元素。
new Array()	可以根据传入的参数创建数组。但当传入一个数值参数时，会创建指定长度的空数组，容易出错。	let arr1 = new Array(5); // [ <5 empty items> ] let arr2 = new Array(1, 2, 3); // [1, 2, 3]	可以指定数组长度。	当传入一个数值参数时，行为不一致，容易出错。
Array.from()	从类数组对象或可迭代对象创建一个新的数组实例。	let arr = Array.from("hello"); // ['h', 'e', 'l', 'l', 'o']	可以从各种类型的数据源创建数组，例如字符串、Set、Map 等。	相对复杂，需要理解类数组对象和可迭代对象的概念。
Array.of()	创建一个包含指定元素的新数组。总是会把传入的参数原封不动地放到数组里，无论参数是什么类型，有多少个。	let arr = Array.of(5); // [5] let arr = Array.of(1, 2, 3); // [1, 2, 3]	行为一致，不会因为参数类型而产生歧义，更安全可靠。	相对而言，不如数组字面量简洁。

八、总结

今天我们详细了解了 Array.of() 这个小而美的 JavaScript 方法。它能让你更安全、更可靠地创建数组，尤其是在处理用户输入、函数参数等动态数据时，能避免很多潜在的陷阱。 虽然它不如数组字面量那么简洁，但它更不容易出错。在选择数组创建方式时，要根据实际情况进行权衡，选择最适合你的方案。

记住：

• Array.of() 总是会把传入的参数原封不动地放到数组里。
• new Array() 在处理单个数值参数时会创建指定长度的空数组，容易出错。
• Array.of() 是 ES6 引入的特性，对于老旧浏览器可能需要使用 polyfill。

希望今天的讲解能帮助你更好地理解和使用 Array.of()，让你的 JavaScript 代码更加健壮和可靠！下次再遇到需要创建数组的场景，不妨试试 Array.of()，相信它会给你带来惊喜！

好了，今天的讲座就到这里，感谢大家的收听！下次再见！