JavaScript of() 方法（完整教程）

JavaScript of() 方法：从零开始掌握数组创建新姿势

你有没有遇到过这样的场景？需要快速创建一个数组，但又不想写一堆 new Array() 或 [ ] 的代码？或者在处理多个参数时，发现 Array() 构造函数的行为有点“奇怪”？别急，JavaScript 新增的 of() 方法正是为了解决这些问题而生。

of() 方法是 Array 构造函数的一个静态方法，它能更直观、更安全地创建数组。相比传统的数组创建方式，of() 方法在语义上更清晰，行为更一致，尤其适合初学者快速上手。

什么是 JavaScript of() 方法？

of() 方法是 ES2015（ES6）引入的 Array 构造函数的静态方法。它的主要作用是：根据传入的参数，创建一个包含这些参数的新数组。

你可能会问，这不是 [] 就能搞定的事吗？确实，但 of() 方法在处理某些边界情况时，表现更加“可靠”。

举个例子：

// 传统方式：使用 Array 构造函数
const arr1 = new Array(3);           // [ empty × 3 ]，创建长度为 3 的空数组
const arr2 = new Array(1, 2, 3);     // [1, 2, 3]，正常创建数组

// 使用 of() 方法
const arr3 = Array.of(3);            // [3]，创建一个包含数字 3 的数组
const arr4 = Array.of(1, 2, 3);      // [1, 2, 3]

注意看 arr1 和 arr3 的区别：当传入一个数字参数时，new Array(3) 会创建一个长度为 3 的空数组，而 Array.of(3) 会创建一个包含值为 3 的数组。这正是 of() 方法的核心优势：参数是值，不是长度。

创建数组与初始化

of() 方法最直观的应用就是创建数组。它让你可以像写函数调用一样，直接把想要的元素传进去。

// 创建包含多个元素的数组
const fruits = Array.of('苹果', '香蕉', '橙子');

// 创建包含数字的数组
const numbers = Array.of(1, 2, 3, 4, 5);

// 创建包含对象的数组
const users = Array.of(
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
);

// 创建包含布尔值的数组
const flags = Array.of(true, false, true);

📌 小贴士：Array.of() 的语法就像一个“数组工厂”，你把“零件”（元素）放进去，它就生产出一个完整的“产品”（数组）。

与 new Array() 相比，of() 方法不会把单个数字当作数组长度，避免了“空洞数组”这种意外情况。

与 new Array() 的行为对比

这是初学者最容易混淆的地方。我们来做一个详细的对比。

从上表可以看出，当参数是数字时，new Array() 的行为是“长度优先”，而 Array.of() 是“值优先”。

这在实际开发中非常重要。比如你有一个函数接收一个数字参数，想创建一个包含该数字的数组，用 of() 就不会出错。

// 错误示例：使用 new Array()
function createArray(num) {
  return new Array(num); // 如果 num 是 5，会创建长度为 5 的空数组
}

// 正确示例：使用 of()
function createArray(num) {
  return Array.of(num); // 无论 num 是多少，都会创建包含该值的数组
}

处理不同数据类型

of() 方法对所有数据类型都支持良好，包括 null、undefined、对象、函数、甚至 Symbol。

// 包含 null 和 undefined
const mixed = Array.of(null, undefined, 'hello', 0);

// 包含函数
const funcs = Array.of(function() { return 'hi'; }, () => console.log('test'));

// 包含 Symbol
const symbols = Array.of(Symbol('a'), Symbol('b'));

// 包含复杂对象
const data = Array.of(
  { id: 1, name: '张三' },
  { id: 2, name: '李四' }
);

✅ of() 方法不会对参数做类型转换，直接原样保留。这使得它在处理“原始值”或“引用类型”时，行为非常可预测。

实际应用案例：动态数组构建

在前端开发中，我们经常需要根据用户输入或 API 返回的数据动态构建数组。of() 方法非常适合这类场景。

案例 1：表单数据收集

假设你有一个表单，用户可以添加多个标签，每个标签是一个字符串。你可以用 of() 快速构建数组。

// 模拟用户输入的标签列表
const tags = ['JavaScript', '前端', '学习'];

// 使用 of() 构建数组
const tagArray = Array.of(...tags);

// 输出结果：['JavaScript', '前端', '学习']
console.log(tagArray);

虽然这里用 ... 展开语法也能实现，但 of() 更适合“直接传值”的场景。

案例 2：API 响应处理

从 API 获取多个用户信息，需要封装成数组。

// 模拟 API 返回的多个用户数据
const usersData = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 28 }
];

// 使用 of() 构建最终的用户数组
const users = Array.of(...usersData);

// 现在 users 是一个包含三个对象的数组
console.log(users);

虽然 Array.of(...data) 看起来和 [...data] 一样，但 of() 更强调“构造”行为，语义更清晰。

与 Array.from() 的区别

很多开发者会混淆 Array.of() 和 Array.from()，其实它们用途完全不同。

// of()：已知元素
const nums = Array.of(1, 2, 3); // [1, 2, 3]

// from()：从可迭代对象创建
const list = document.querySelectorAll('li');
const items = Array.from(list); // 将 NodeList 转为数组

简单说：of() 是“从零开始造数组”，from() 是“从已有数据转化数组”。

总结与建议

JavaScript of() 方法 是一个简洁、可靠、语义清晰的数组创建工具。它解决了 new Array() 在单参数场景下的歧义问题，特别适合初学者和团队协作项目。

• 当你明确知道要创建的数组内容时，优先使用 Array.of()
• 避免在单个数字参数时使用 new Array()，以防意外创建空数组
• 在需要类型安全和行为一致性时，of() 是更优选择

它不是“必须用”，但用起来会让你的代码更清晰、更少出错。尤其是在处理动态数据或函数参数时，of() 的优势尤为明显。

记住：好的代码不只是能跑通，更是让人一眼看懂。JavaScript of() 方法 就是这样一个让代码更“可读”的小工具。

下次你写 new Array(1, 2, 3) 的时候，不妨想想：是不是该用 Array.of(1, 2, 3) 更合适？