在 JavaScript 的开发世界里，数据结构是构建任何应用的基石。你可能经常遇到这样的情况：需要在一个变量中存储一系列的值，比如用户的评分列表、购物车中的商品，或者是一组复杂的坐标数据。这就是数组大显身手的时候。数组允许我们在单个变量中存储多个值，而且这些值可以是任何类型——数字、字符串、布尔值，甚至是其他对象或数组。
虽然数组的概念很直观，但在 JavaScript 中声明数组的方式却多种多样。最常见、最直观的莫过于数组字面量（方括号 []），但你是否知道还有利用构造函数或者特定方法来动态创建数组的技巧呢？在这篇文章中，我们将深入探讨在 JavaScript 中声明数数的各种方法，不仅教你“怎么做”，还会深入解释“为什么这么做”，以及每种方法的最佳实践场景。让我们开始这段探索之旅吧。
目录
为什么要关注数组的声明方式？
在深入代码之前，让我们先聊聊为什么这个话题值得你花时间。你可能习惯于总是使用 [] 来创建数组，这当然没问题。但在某些特定场景下，比如你需要从一个类数组对象（比如 DOM 节点列表）生成数组，或者你需要初始化一个特定长度的稀疏数组时，了解其他声明方式将极大地提升你的编码效率。
我们将重点介绍以下四种主要方式：
- 数组字面量：最直观、最常用的方式。
-
Array()构造函数：灵活但需要小心的传统方式。 -
Array.of()方法：处理单个数字参数时的救星。 -
Array.from()方法：强大的转换工具。
使用数组字面量表示法
这是 JavaScript 中最简单、最常用，也是最受推荐的声明数组的方法。字面量表示法使用一对方括号 [] 来定义数组。你可以在括号中直接填入用逗号分隔的元素列表，也可以留空来创建一个空数组。
基础示例与实践
让我们通过一个实际的例子来看看如何声明包含不同类型数据的数组。代码的可读性非常重要，所以我们在注释中解释每一行的作用。
// 声明一个包含四个字符串元素的数组
// 这是一个典型的全栈技术栈列表
const techStack = ["HTML", "CSS", "JavaScript", "React"];
console.log("技术栈数组:", techStack);
// 声明一个包含数字的数组
// 这里我们存储了一组斐波那契数列的前几项
const fibNumbers = [1, 1, 2, 3, 5, 8];
console.log("斐波那契数组:", fibNumbers);
// 声明一个多维数组（数组中的数组）
// 这可以用来表示矩阵或二维坐标
const matrix = [
[1, 2],
[3, 4],
[5, 6]
];
console.log("多维数组矩阵:", matrix);
// 混合类型数组：虽然不常见，但 JavaScript 是允许的
const mixedData = [100, "字符串", true, { id: 1 }];
console.log("混合数据类型:", mixedData);
输出结果：
技术栈数组: [ ‘HTML‘, ‘CSS‘, ‘JavaScript‘, ‘React‘ ]
斐波那契数组: [ 1, 1, 2, 3, 5, 8 ]
多维数组矩阵: [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]
混合数据类型: [ 100, ‘字符串‘, true, { id: 1 } ]
尾随逗号与最佳实践
你可能见过代码中数组最后一个元素后面有一个逗号，这被称为“尾随逗号”。
const colors = [
"Red",
"Green",
"Blue", // 注意这里的逗号
];
为什么要这样写？这不仅仅是一个风格问题。使用尾随逗号可以大大简化版本控制差异。当你添加一个新元素（例如 "Yellow"）时，代码只会显示新增了一行，而不会显示修改了上一行（在上一行添加逗号）。这可以减少 Git 提交时的噪音。
使用 Array() 构造函数
在 JavaScript 早期，或者在其他编程语言（如 Java 或 C++）的背景下，你可能习惯了使用 INLINECODE364a498f 关键字来创建对象。数组也可以通过 INLINECODE0d424fa8 构造函数来创建。这给了我们一种动态创建数组的可能性。
动态创建与“陷阱”警告
使用 new Array() 有一个非常有名的“陷阱”。当你传递一个单一的数字参数给构造函数时，JavaScript 不会创建一个包含该数字的数组，而是会创建一个长度等于该数字的空数组。
让我们看看具体的表现：
// 场景 1：传递多个参数
// 如果传入多个参数，它们会成为数组的元素
const fruits = new Array("Apple", "Banana", "Orange");
console.log("多个参数结果:", fruits); // 输出: [‘Apple‘, ‘Banana‘, ‘Orange‘]
// 场景 2：传递单个非数字参数
const emptyArr = new Array("Hello");
console.log("单个非数字参数结果:", emptyArr); // 输出: [‘Hello‘]
// 场景 3：传递单个数字参数（陷阱！）
// 这会创建一个长度为 5 的空数组，而不是一个包含 [5] 的数组
const sparseArr = new Array(5);
console.log("单个数字参数结果:", sparseArr); // 输出: [ ]
console.log("数组长度:", sparseArr.length); // 输出: 5
// 我们可以给这个稀疏数组赋值
sparseArr[0] = "First";
console.log("赋值后的稀疏数组:", sparseArr);
输出结果：
多个参数结果: [ ‘Apple‘, ‘Banana‘, ‘Orange‘ ]
单个非数字参数结果: [ ‘Hello‘ ]
单个数字参数结果: [ ]
数组长度: 5
赋值后的稀疏数组: [ ‘First‘, ]
由于这个模棱两可的行为（有时是长度，有时是元素），现代开发中通常不推荐使用 new Array()，除非你确实需要初始化一个特定长度的数组。那么，有没有更好的方法呢？当然有。
使用 Array.of() 方法
为了解决 INLINECODE7ad38860 单个数字参数的歧义问题，ES6 引入了 INLINECODEe693cf0d 方法。这个方法的设计理念非常清晰：无论你传多少个参数，也无论参数是什么类型，它都会创建一个包含所有这些参数的新数组。
安全的数组创建
如果你希望在代码中明确表达意图，或者你正在编写一个库，需要处理动态参数生成数组，Array.of() 是最安全的选择。
// 即使只传入一个数字，它也会作为数组元素存在
const numArr = Array.of(10, 20, 30);
console.log("多个数字:", numArr);
// 解决了 new Array() 的陷阱：创建只包含一个数字 5 的数组
const singleNum = Array.of(5);
console.log("单个数字的数组:", singleNum); // 输出: [5]，而不是 [ ]
// 处理混合类型
const mixed = Array.of("Type", 100, true);
console.log("混合类型:", mixed);
// 创建多维数组
const multi = Array.of(Array.of(1, 2), Array.of(3, 4));
console.log("多维数组:", multi);
输出结果：
多个数字: [ 10, 20, 30 ]
单个数字的数组: [ 5 ]
混合类型: [ ‘Type‘, 100, true ]
多维数组: [ [ 1, 2 ], [ 3, 4 ] ]
通过使用 Array.of()，你的代码会变得更具可预测性，减少了因参数类型不同而产生的 Bug。
使用 Array.from() 方法
这是最强大、最灵活的数组创建方法之一。Array.from() 允许你从任何“类数组”或“可迭代”对象创建一个新的数组实例。它的威力不仅仅在于转换，更在于它能够接受一个映射函数，在创建数组时对每个元素进行处理。
深入解析：从类数组对象到真数组
在 JavaScript 中，有一些对象长得像数组（有 INLINECODE9252576c 属性，有索引），但它们并不是真正的数组，无法使用 INLINECODE459163d3、INLINECODE69c5c914 等方法。最典型的例子就是 DOM 操作中的 INLINECODEc9012668 返回的 NodeList。
让我们看看如何使用 Array.from() 来解决实际问题。
// 示例 1：将字符串转换为字符数组
// 虽然可以用 .split(‘‘)，但 Array.from() 能够正确处理 Unicode 字符（如 Emoji）
const str = "Hello JS";
const charArr = Array.from(str);
console.log("字符数组:", charArr);
// 示例 2：带映射函数的转换
// 假设我们有一个数字列表，想创建一个新的数组，其中每个数字都是原来的两倍
const range = [1, 2, 3, 4];
const doubled = Array.from(range, num => num * 2);
console.log("翻倍后的数组:", doubled);
// 示例 3：利用长度属性创建序列
// 这是一个常见的技巧：创建一个从 0 到 N 的数组
const length = 5;
// 注意：第二个参数是一个映射函数，类似 map，index 是索引
const sequence = Array.from({ length }, (_, index) => index + 1);
console.log("1 到 5 的序列:", sequence);
输出结果：
字符数组: [ ‘H‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘, ‘ ‘, ‘J‘, ‘S‘ ]
翻倍后的数组: [ 2, 4, 6, 8 ]
1 到 5 的序列: [ 1, 2, 3, 4, 5 ]
实战应用：操作 DOM 节点
你可能会遇到这样的情况：页面上有一组按钮，你想给它们都添加点击事件。如果我们直接用 INLINECODE6747c709，得到的是 NodeList，没有 INLINECODEf3b4acfd 方法（在旧浏览器中）或者没有数组的高阶方法。我们可以用 Array.from() 来转换它。
// 假设 HTML 中有多个 .item 元素
// const items = document.querySelectorAll(‘.item‘);
// 模拟一个 NodeList 类数组对象
const mockNodeList = {
0: { textContent: "Item 1" },
1: { textContent: "Item 2" },
2: { textContent: "Item 3" },
length: 3
};
// 将其转换为真正的数组，这样我们就可以使用 .map() 等方法了
const itemsArray = Array.from(mockNodeList);
const contents = itemsArray.map(item => item.textContent);
console.log("DOM 内容提取:", contents);
输出结果：
DOM 内容提取: [ ‘Item 1‘, ‘Item 2‘, ‘Item 3‘ ]
性能优化与常见错误
我们在掌握了各种语法之后，还需要关注代码的性能和健壮性。
性能建议
在大多数现代 JavaScript 引擎（如 V8，用于 Chrome 和 Node.js）中，数组字面量 INLINECODE0988ac92 的性能通常优于 INLINECODE72ceb318 或 Array.of()。这是因为字面量可以被引擎直接优化和内联。除非你有非常特殊的动态创建需求，否则坚持使用字面量是最好的。
常见错误：省略逗号
在声明数组时，一个常见的错误是粗心地漏写了逗号。这可能导致意外的“合并”元素或语法错误。
// 错误示例：缺少逗号
const wrongArr = [
"First"
"Second" // 这会导致语法错误或意外的结果
];
请始终检查你的逗号，或者在代码格式化工具（如 Prettier）中启用尾随逗号功能来自动辅助你。
总结
回顾一下，我们在 JavaScript 中有多种声明数组的方式，每种方式都有其独特的用途：
- 数组字面量
[]：你的首选。简洁、快速、易读。适用于 99% 的日常编码场景。 -
new Array()：除非你需要创建特定长度的稀疏数组，否则尽量避免使用，因为它容易产生歧义。 -
Array.of()：当你需要通过构造函数安全地创建数组，特别是处理单个数字参数时，它是最佳选择。 -
Array.from()：处理类数组对象（如 NodeList、Arguments）或生成序列的瑞士军刀，强大且灵活。
我们建议你在日常开发中优先使用数组字面量，但在处理 DOM 操作或复杂数据转换时，别忘了 Array.from() 带来的便利。希望这篇文章能帮助你更深入地理解 JavaScript 数组的声明机制！
下一步建议： 既然你已经掌握了如何声明数组，接下来不妨深入学习一下数组的高阶方法（如 INLINECODE1365223b, INLINECODE64c5643e, flatMap），它们将彻底改变你处理数据的方式。