JavaScript怎么新建数组：字面量与构造函数对比

一、两种基础新建方式的语法与直接表现

在日常编码中，定义一个数组最基础的操作就是分配空间并放入初始元素。我们首先观察两种方式的基本写法与输出结果。

1. 数组字面量语法（Array Literal）

数组字面量使用方括号 [] 包裹逗号分隔的元素列表。这是 ECMAScript 规范中推荐的声明式语法：

// 1. 创建空数组
const emptyArr = [];

// 2. 创建包含初始元素的数组
const fruits = ['apple', 'banana', 'orange'];
const numbers = [1, 2, 3];

console.log(fruits.length); // 3
console.log(fruits[0]);      // 'apple'

字面量语法的特点是“所见即所得”，方括号内写了什么、写了几个元素，数组中就包含对应的元素，语义具有完全的确定性。

2. Array 构造函数（Array Constructor）

使用内置全局对象 Array 也可以实例化一个新数组。在语法上，带不带 new 关键字其行为在规范中完全等价：

// 1. 创建空数组
const arr1 = new Array();
const arr2 = Array(); // 不带 new，与带 new 等价

// 2. 传递多个参数创建数组
const colors = new Array('red', 'green', 'blue');
console.log(colors);        // ['red', 'green', 'blue']
console.log(colors.length); // 3

当传入两个及以上参数，或者传入单个非数字类型的参数（例如字符串、对象）时，构造函数的行为与字面量一致。然而，一旦遇到单个数值参数，两者的行为就会产生巨大分歧。

二、执行流程与引擎解析步骤对比

为了理解为什么两者在后续运行和性能上存在差异，我们需要跟随 JavaScript 引擎（如 V8）的执行流水线，观察两者的解析与内存分配步骤。

通过上述流水线可以清晰地看到四个关键环节的区别：

1. 词法与语法分析阶段：字面量 [] 作为核心原生语法，直接被解析为 ArrayLiteral 节点；而 new Array() 则被解析为常规的函数调用（Call/Construct AST 节点）。
2. 原型与作用域查找：字面量直接在编译期绑定到数组原生分配模板，无需进行标识符解析；构造函数则需要在当前作用域链中查找 Array 标识符，即使极少被篡改，依然存在环境检查。
3. 分支重载判断：字面量直接根据入参数量进行线性布局，而 Array 构造函数必须在运行时统计 arguments.length 并判断参数的数据类型，走入不同的逻辑分支。
4. 内存形态（ElementsKind）：字面量直接产出紧凑连续的密集数组（Packed Elements）；单参数构造函数则产出稀疏数组（Holey Elements）。

三、核心陷阱：单数值参数的重载歧义与稀疏空槽

这是使用构造函数最容易引发生产事故的经典问题。请观察以下两行极其相似的代码：

const a = [3];
const b = new Array(3);

很多初学者会误以为 b 是一个包含元素 3 的数组，但控制台实际打印结果如下：

console.log(a); // [3] -> 长度为 1，包含数字 3
console.log(b); // [empty × 3] -> 长度为 3，但里面没有任何具体值！

1. 空槽（Empty Slot）绝非 undefined

开发者最常产生的误解是：“空槽是不是就等于 undefined？” 答案是绝对不等于。在 JavaScript 规范中，空槽代表该索引处根本没有定义物理属性（无实体键），而 undefined 是一个合法赋存的 JavaScript 原始值：

const holey = new Array(3);
const defined = [undefined, undefined, undefined];

// 属性存在性检测
console.log(0 in holey);              // false （根本没有 0 这个键）
console.log(0 in defined);            // true  （存在 0 这个键，值为 undefined）

console.log(holey.hasOwnProperty(0));   // false
console.log(defined.hasOwnProperty(0)); // true

2. 高阶迭代方法的“静默跳过”隐患

ECMAScript 规范明确规定：Array.prototype.forEach、map、filter、reduce 等迭代方法在遍历时会自动跳过不存在的空槽。这会导致链式调用时无任何报错，却产生完全错误的逻辑结果：

// 尝试将长度为 3 的数组全部填充数字 1
const result = new Array(3).map(() => 1);

// 实际结果依然是 3 个空槽！回调函数被执行了 0 次！
console.log(result); // [empty × 3]

new Array(-1);   // Uncaught RangeError: Invalid array length
new Array(3.14); // Uncaught RangeError: Invalid array length

// 而字面量语法完全不存在此类异常：
const okArr = [-1, 3.14]; // 正常创建包含两个数字的数组

四、现代 JavaScript 中的选型与正确实践

面对不同业务诉求，如何选择最高效、最安全的数组初始化方案？下方的决策导图给出了规范路径：

场景 1：已知初始元素或常规空数组

最佳方案：始终使用字面量 []。

const users = [];
const statusList = ['pending', 'active', 'disabled'];

场景 2：需要预先分配固定长度并填充基本类型初始值

最佳方案：结合使用 new Array(len).fill(val)。.fill() 方法会遍历所有空槽并赋值，使其转变为密集的连续数组，恢复正常的迭代能力：

// 创建包含 5 个 0 的密集数组
const zeros = new Array(5).fill(0);
console.log(zeros); // [0, 0, 0, 0, 0]
console.log(zeros.map(x => x + 1)); // [1, 1, 1, 1, 1] 正常迭代！

const matrix = new Array(3).fill({ count: 0 });
matrix[0].count = 99;
console.log(matrix[1].count); // 99！全部被污染！

场景 3：根据索引动态生成序列或独立对象

最佳方案：使用 ES6 的 Array.from() 搭配映射函数。它不仅可以预设长度，还能保证每个元素都是独立创建的：

// 1. 动态生成连续数字序列 [1, 2, 3, 4, 5]
const sequence = Array.from({ length: 5 }, (_, index) => index + 1);

// 2. 安全创建包含独立对象的数组
const cleanMatrix = Array.from({ length: 3 }, () => ({ count: 0 }));
cleanMatrix[0].count = 99;
console.log(cleanMatrix[1].count); // 0 （互不影响，引用隔离）

场景 4：动态参数包裹（避免参数单数变为长度）

最佳方案：使用 Array.of()。这是 ES6 专门为了修复 Array 构造函数单参数重载缺陷而引入的方法：

console.log(Array.of(3));       // [3] -> 长度 1，内容为数字 3
console.log(Array.of(1, 2, 3)); // [1, 2, 3] -> 长度 3

五、全维度对比总结与代码规范建议

综合以上分析，我们将两种数组创建方式的技术指标、底层行为及工程建议汇总如下：

工程实践准则（ESLint 规范）

在主流开发规范（如 Airbnb JavaScript Style Guide、Google JS Style Guide）中，均通过 ESLint 规则 no-array-constructor 或 prefer-array-literal 明确要求：

• 原则 1：永远禁止使用 new Array() 或 Array() 声明已知元素的数组，统一使用 []。
• 原则 2：仅在确实需要预先分配大数组长度并立即配合 .fill() 时，才允许使用 new Array(length).fill(...)。
• 原则 3：编写通用工具函数时，如果入参个数不固定且包含数字，应优先选择 Array.of(...args) 或展开运算符 [...args]，避免直接使用 new Array(...args) 导致逻辑坍塌。