JS 创建数组的三种方式：字面量、构造函数与静态方法对比

作者：纸飞机时间：2026-10-30 19:12:22浏览：639

深入对比JavaScript中创建数组的三种核心途径：数组字面量、Array构造函数与ES6静态方法（Array.of / Array.from）。从底层解析机制、空槽陷阱、类数组转换到最佳场景选型，全面解析其原理与实践。

ECMASCRIPT 标准与运行时实践

涵盖对象创建语法、内存布局特性、空槽（Hole）机制解析与开发场景选型决策

在 JavaScript 开发中，创建数组主要有三种途径：数组字面量 []、Array 构造函数，以及现代 ECMAScript 引入的静态工厂方法（Array.of() 和 Array.from()）。字面量以语法极简和引擎最高执行效率成为日常业务首选；构造函数由于单一数字参数重载存在空槽二义性，需谨慎使用；而静态方法则分别针对“消除传参歧义”和“统一类数组/迭代器转换”提供了严谨可控的现代化方案。本文将逐项拆解它们的运行机制、边界陷阱与实际选用依据。

一、数组字面量：最推荐的日常初始方式

数组字面量（Array Literal）是通过一对中括号 [] 直接包裹逗号分隔的元素列表来声明数组。这是绝大多数前端规范（如 Airbnb、Google Style Guide）中明确推崇的标准写法。

1. 基本语法与直接求值

字面量语法支持在初始化时一次性声明任意类型的初始成员，支持末尾保留逗号，也可以直接声明空数组：

// 1. 空数组声明
const emptyList = [];

// 2. 包含不同基础类型与引用的密集数组
const users = ["Alice", "Bob", { id: 101, role: "admin" }];

// 3. 展开语法（Spread）配合字面量实现合并与浅拷贝
const extra = [4, 5];
const merged = [1, 2, 3, ...extra]; // 示例输出: [1, 2, 3, 4, 5]

2. 引擎内部优势：快速通道与密集内存分配

从 V8 等现代 JavaScript 引擎的底层视角来看，当解析器遇到 [...] 词法标记时，会直接生成 CreateArrayLiteral 原生字节码指令，而不必像调用函数那样去当前词法作用域及全局对象上查找 Array 标识符。这不仅彻底规避了全局 window.Array 被意外重写或篡改的安全隐患，也省去了调用栈帧创建的额外开销。

更重要的是，字面量在编译期便明确了初始元素的数量与具体类型，引擎能够立刻为其分配一段紧凑连续的内存区域（在 V8 中对应 PACKED_ELEMENTS 模式）。这种密集存储结构具备极高的 CPU 缓存局部性，后续进行索引寻址时直接通过基地址偏移量运算即可完成，性能达到最优状态。

3. 字面量的空槽隐患：多余逗号与稀疏数组

字面量在语法上允许使用连续的逗号跳过某些索引位，例如 [10, , 30]。但这种写法会制造出空槽（Empty Slot / Hole），生成所谓的稀疏数组（Sparse Array）。

const sparse = [10, , 30];
console.log(sparse.length); // 示例输出: 3
console.log(sparse[1]);      // 示例输出: undefined（访问空槽默认回退为 undefined）
console.log(1 in sparse);       // 示例输出: false（核心差异：下标 1 根本不存在于对象自身属性中！）

注意事项：空槽与显式赋予的 undefined 存在本质区别。显式 [10, undefined, 30] 拥有键名 "1"，其值为 undefined；而 [10, , 30] 在下标 1 处没有属性，会导致大多数迭代方法跳过它，并使引擎退化到哈希字典模式。日常编码应开启 ESLint 的 no-sparse-arrays 规则予以阻断。

二、Array 构造函数：经典语法与单一参数陷阱

Array() 构造函数是早期 JavaScript 便具备的语言特性，使用 new Array(...) 与不带 new 的 Array(...) 效果完全相同。然而，它的函数签名重载设计常常给初学者和生产代码带来不可预期的意外表现。

1. 参数数量引起的不一致性（重载歧义）

Array 构造函数的行为严格取决于传入参数的个数与数据类型：

多个参数（或单一非数值参数）：将所有参数按顺序作为数组元素创建，行为符合直觉。例如 new Array("apple", "banana") 产出 ["apple", "banana"]。
单一数字参数：构造函数不会创建只含该数字的单元素数组，而是将该数值视为数组的目标长度（length），并在内存中预留相应数量的空槽（empty slots）！

// 场景 A：传入多个数字，表现为填充元素
const a = new Array(3, 4);
console.log(a); // 示例输出: [3, 4]，length 为 2

// 场景 B：传入单个数字，表现为指定长度与分配空槽
const b = new Array(3);
console.log(b); // 示例输出: [ <3 empty items> ]，length 为 3
console.log(b[0]); // 示例输出: undefined

// 场景 C：传入不合法数值直接抛错
try {{
  new Array(-1);   // RangeError: Invalid array length
}} catch (err) {{
  console.log(err.message); // 示例输出: Invalid array length
}}

2. 空槽在遍历中的“跳过（Skip）”陷阱

通过 new Array(n) 创建的数组由于没有真正的自身索引属性，在使用 Array.prototype 上的高阶遍历方法时，会被静默忽略：

const slots = new Array(3);

// 1. map 回调函数完全不会执行！
const mapped = slots.map((_, i) => i * 2);
console.log(mapped); // 示例输出: [ <3 empty items> ]（依然是 3 个空槽）

// 2. forEach 同样一次都不执行
let count = 0;
slots.forEach(() => count++);
console.log(count); // 示例输出: 0

// 3. 但 for...of 和展开运算符则会访问这些索引并产出 undefined
for (const item of slots) {{
  console.log(item); // 示例输出: 连续打印 3 次 undefined
}}

3. 合理使用场景：预设长度配合 .fill()

在算法实现或特定性能优化场景中，如果明确需要预先分配固定容量以避免频繁扩容重排，可以搭配 .fill() 立即将空槽覆写为实体值：

// 初始化一个长度为 5、初始值全为 0 的密集数组
const counters = new Array(5).fill(0);
console.log(counters); // 示例输出: [0, 0, 0, 0, 0]

// 警告：如果填充对象引用，会导致所有槽位共享同一对象引用
const matrixWrong = new Array(2).fill([]);
matrixWrong[0].push(1);
console.log(matrixWrong[1]); // 示例输出: [1]（两个槽位指向同一数组实例！）

三、现代静态方法：语义精确的 Array.of 与 Array.from

为解决 Array 构造函数的历史缺陷并满足复杂场景的创建需求，ES6 正式引入了 Array.of() 和 Array.from() 两个静态工具方法。

1. Array.of()：统一参数语义

Array.of() 的设计初衷非常纯粹：无论传入几个参数、是什么类型，一律将其作为新数组的元素。它彻底消除了单一数字被误当成 length 的二义性：

// 无论单参数还是多参数，规则完全统一
console.log(Array.of(3));         // 示例输出: [3]（长度为 1 的密集数组）
console.log(Array.of(1, 2, 3));   // 示例输出: [1, 2, 3]
console.log(Array.of(undefined)); // 示例输出: [undefined]

在封装通用的高阶函数或工厂函数时，若输入参数的个数在运行时是动态可变的，使用 Array.of(...args) 可以确保逻辑的一致性，防止因意外传入单一数字而演变为分配空槽。

2. Array.from()：类数组与迭代器转换利器

Array.from() 是一个极为强大的工厂方法，能够从两类对象生成真正的 JavaScript 数组实例：

类数组对象（Array-like Object）：拥有 length 属性及按非负整数索引的对象，例如函数的 arguments 对象、DOM 操作返回的 NodeList / HTMLCollection，以及纯自定义对象 {{ length: 3 }}。
可迭代对象（Iterable Object）：实现了 [Symbol.iterator] 协议的数据结构，包括 Set、Map、字符串等。

// 示例 1：DOM 节点列表转换为真数组以调用 filter/map
// const elements = document.querySelectorAll(".item");
// const activeElements = Array.from(elements).filter(el => el.classList.contains("active"));

// 示例 2：从 Set 快速去重并输出真数组
const tagSet = new Set(["js", "css", "js"]);
const uniqueTags = Array.from(tagSet);
console.log(uniqueTags); // 示例输出: ["js", "css"]

3. Array.from() 的就地映射参数（mapFn）

Array.from(source, mapFn, thisArg) 允许传入第二个参数作为映射函数。其效果等同于 Array.from(source).map(mapFn)，但它在单次迭代构建过程中就地完成转换，无须生成中间过渡数组，对内存和垃圾回收（GC）极为友好。

// 优雅实现：快速生成 1 到 5 的数字序列
const sequence = Array.from({{ length: 5 }}, (_, index) => index + 1);
console.log(sequence); // 示例输出: [1, 2, 3, 4, 5]

// 生成包含独立对象副本的二维矩阵
const grid = Array.from({{ length: 3 }}, () => ({ status: "pending" }));
grid[0].status = "done";
console.log(grid[1].status); // 示例输出: "pending"（互不干扰，各自拥有独立实例）

四、三种方式全维度对比与技术选型

为帮助读者在实际技术决策中迅速锁定最适配的实现方案，我们将三种创建方式的核心特性进行横向汇总对比：

对比维度	数组字面量 `[]`	构造函数 `Array()`	静态方法 `Array.of() / from()`
语法复杂度	极简，符号级原生语法	一般，函数调用风格	稍长，明确的方法语义调用
单数字参数表现	`[5]` 包含单元素 5	`new Array(5)` 创建5个空槽	`Array.of(5)` 包含单元素 5
空槽（Hole）风险	仅在多写逗号时发生	单数字入参时必定产生	完全避免，自动规约填充
类数组转换能力	不支持直接转换（需配合解构）	不支持直接转换	原生支持（`Array.from` 专职能力）
就地映射能力	需后续链式调用 `.map()`	需先 `fill` 再链式调用	原生支持（`from` 的 `mapFn`）
执行效率与优化	最高（指令直达，编译期推断）	较低（动态函数查找与重载解析）	高（C++原生内置实现，内存开销低）

选型决策指南

常规业务开发（90% 场景）：无脑选择数组字面量 []。代码最简短、阅读直观，且享有 JavaScript 引擎最极致的优化策略。
动态入参包装函数：当封装通用逻辑且参数可能为单一数值时，使用 Array.of(...args)，彻底隔离构造函数的二义性缺陷。
DOM 操作与类数组提取：遇到 NodeList、Set 转换或需要生成等差数列（如分页器）时，优先选用 Array.from(source, mapFn)，一步到位完成转换与映射。
极少数定长大容量预分配：在对执行速度要求极高的循环写入场景中，使用 new Array(size).fill(initValue) 提前申请连续内存，避免数组动态扩容引发的数据重新搬迁。