为什么不建议在JavaScript中使用new Array()创建数组

一、参数重载带来的语义不一致

在大多数面向对象编程语言中，类的构造函数通常具有相对明确且一致的入参规则。然而，JavaScript 的 Array 构造函数设计了一个历史遗留的重载机制：它会根据传入参数的数量以及类型，执行完全截然不同的初始化逻辑。

让我们观察以下两组最常见的代码对比：

// 场景 1：传入两个数字
const arr1 = new Array(3, 5); 
console.log(arr1); // 输出：[3, 5]，长度为 2

// 场景 2：传入单个数字
const arr2 = new Array(3); 
console.log(arr2); // 输出：[empty × 3]，长度为 3，但一个元素都没有！

当传入多个参数时，这些参数会被视作数组的初始元素；而一旦只传入一个数值型参数，它却突然被解释成了数组的预期长度 length。更危险的是，如果这个单一参数不是数字类型，语义又会切换回“初始元素”：

const strArr = new Array("3"); 
console.log(strArr); // 输出：["3"]，包含字符串元素 "3"，长度为 1

相比之下，数组字面量 [x] 具备绝对单一确定的语义：无论方括号里放的是单个数字、字符串还是变量，方括号包裹的内容永远都是数组的实际元素。[3] 永远是包含一个数字 3 的数组，['3'] 永远是包含一个字符串 '3' 的数组，完全消除了任何猜测与心智负担。

二、负数与浮点数长度引发的运行时 RangeError 异常

当使用 new Array(n) 且 n 为单个数字时，ECMAScript 规范要求 n 必须是合法的 32 位无符号整数（介于 0 到 2^32 - 1 之间）。一旦参数含有小数或者负数，代码不会自动向下取整或容错，而是会直接抛出致命的运行时异常：

// 试图使用负数作为单参数
new Array(-1); 
// 抛出异常：RangeError: Invalid array length

// 试图使用浮点数作为单参数
new Array(3.14); 
// 抛出异常：RangeError: Invalid array length

但在实际业务中，计算出的数量可能来源于数学运算或浮点除法（例如 total / pageSize），如果未经 Math.floor() 校验直接传递给 new Array()，程序将直接崩溃。

反观数组字面量，[-1] 和 [3.14] 是完全合法且鲁棒的操作，分别创建包含负数或浮点数的数组，绝不会引发任何异常。

三、稀疏数组（Sparse Array）与“空位”（Holes）陷阱

许多初学者以为 new Array(3) 会生成一个类似 [undefined, undefined, undefined] 的数组，从而打算接着调用 .map() 为每个位置生成数据。这恰恰是前端开发中最普遍的误区之一。

new Array(3) 创建出来的是稀疏数组（Sparse Array），其内部是纯粹的“空位”（在 V8 引擎中标记为 Hole），这些位置甚至没有对应的属性键：

const holes = new Array(3);

console.log(0 in holes); // 输出：false！索引 0 的键根本不存在
console.log(Object.keys(holes)); // 输出：[]！没有任何自有属性键

空位会导致传统迭代方法直接“静默跳过”

JavaScript 原型链上的高阶函数（如 forEach、map、filter、every、some）在设计之初就遵循规范：仅对真实存在的索引键执行回调，跳过未分配的空位。

const list = new Array(3);
let count = 0;

// 很多开发者以为会执行 3 次，但实际上一次都不执行！
const result = list.map(() => ++count);

console.log(result); // 依然输出：[empty × 3]
console.log(count);  // 输出：0！map 回调被彻底跳过

与此同时，ES6 之后引入的语法糖和 API（如 for...of、展开运算符 ...、Array.from()）又选择将空位当作 undefined 来读取。这就导致了同一对象在不同 API 之间存在严重的认知撕裂：

四、引擎优化、原型安全与可读性

除了语义与空位陷阱，在工程实践与引擎底层层面，字面量 [] 同样具备压倒性的优势：

• JavaScript 引擎的快速路径（Fast Path）： V8 等现代 JS 引擎在解析代码时，遇到数组字面量 [] 会直接在字节码层面生成高度优化的内联分配指令，直接创建具有具体元素形态（ElementsKind）的密集连续内存块。而 new Array() 需要经过作用域链解析全局构造函数、判断入参长度分支、分配稀疏字典模式（Dictionary Elements），运行时开销显著更高。
• 避免标识符遮蔽与篡改： Array 本质上是全局作用域或当前作用域下的一个变量名。虽然在现代模块系统中很少直接覆写全局变量，但在局部作用域内，局部变量完全可能意外遮蔽 Array：

  function processItems(Array) {
    // 此处的 Array 是传入的参数，调用 new Array() 将导致不可预知的错误
    return new Array(); 
  }

  字面量 [] 是语法级别的内建符号，永远不可能被任何作用域变量遮蔽或篡改。
• 代码紧凑与心智负担： 字面量 [] 相比 new Array() 节省了 9 个字符，且符合绝大多数主流语言统一的字面量直觉，降低了代码审查与维护时的认知负荷。

五、常见场景下的现代标准替代方案

当我们放弃 new Array() 后，在面对需要预设长度、批量填充数据或生成序列等真实业务需求时，应该如何规范编写？以下是推荐的标准操作步骤：

步骤 1：已知元素或初始为空

只要数组在初始化时已知元素，或者仅仅需要一个空容器后续追加，始终无条件使用字面量：

// 声明空数组
const list = [];

// 声明已有元素的数组
const roles = ['admin', 'editor', 'viewer'];

步骤 2：生成指定长度的自增序列

如果需要生成指定长度（如 1 到 5）的递增数字序列，最佳方式是使用 Array.from() 提供的内置映射能力：

// 生成包含 1 到 5 的数字序列
const numbers = Array.from({ length: 5 }, (_, index) => index + 1);
console.log(numbers); // [1, 2, 3, 4, 5]

Array.from() 会将类数组对象 { length: n } 展开为具有真实 undefined 值的密集项，并紧接着执行映射回调，一次性完成初始化，代码整洁且性能优良。

步骤 3：预先分配固定原始值

如果需要生成长度为 4 且默认值为 0 或布尔值的标量数组，可以使用 Array.from，或者配合 .fill()：

// 方案 A：语义最清晰
const zeros = Array.from({ length: 4 }, () => 0);

// 方案 B：使用 Array().fill() 填充标量
const flags = Array(4).fill(false);

// 致命错误写法：
const grid = Array(3).fill({ score: 0 });
grid[0].score = 100;
console.log(grid[1].score); // 结果也是 100！因为它们引用的是同一个对象

// 正确安全写法：使用 Array.from 每次生成全新独立对象
const safeGrid = Array.from({ length: 3 }, () => ({ score: 0 }));
safeGrid[0].score = 100;
console.log(safeGrid[1].score); // 依然是 0，彼此独立

六、场景选型与决策总结

为了帮助读者在日常编码中快速做出正确决策，下方的决策路径图梳理了所有主流场景下的最佳技术选型：

综上所述，new Array() 之所以被绝大多数现代前端团队、ESLint 官方规则集（如 no-array-constructor）以及各大厂开发规范明确弃用，根本原因在于其重载机制违反了最少意外原则（Principle of Least Astonishment）。在日常开发中，始终坚守“已知用字面量 []，动态用 Array.from()”的准则，即可写出健壮、清晰且高性能的 JavaScript 代码。