JavaScript中创建数组的七种核心方法(含代码示例)

在JavaScript编程中，数组（Array）是最基础且最常用的数据结构之一。它允许开发者将多个值有序地存储在一个变量中，并提供了丰富的内置方法来进行增删改查操作。随着ECMAScript标准的不断演进，JavaScript创建数组的方式也从最初的单一模式，发展出了如今多种灵活、高效的手段。掌握这些创建方法，不仅能让代码更加简洁优雅，还能在处理复杂数据结构时游刃有余。本文将系统梳理JavaScript中创建数组的七种核心方法，并结合代码示例进行深入解析。

一、数组字面量（Array Literal）

这是日常开发中最常见、最推荐的创建数组的方式。它语法简洁直观，直接在方括号[]内列出元素，元素之间用逗号分隔。

1. 基本用法：可以直接创建包含数字、字符串甚至混合类型的数组。例如：const fruits = ['苹果', '香蕉', '橙子']; 或 const mixed = [1, true, 'hello'];。

2. 尾随逗号：数组字面量允许在最后一个元素后添加逗号（如 [1, 2, 3,]），这在版本控制（Git）中能有效减少不必要的代码变更。

3. 稀疏数组：如果在字面量中使用连续的逗号且中间没有值（如 [1,,3]），会创建一个稀疏数组，中间缺失的元素会被视为undefined。

二、Array构造函数（Array Constructor）

使用new Array()可以创建数组，但其行为具有歧义性，需要根据传入参数的类型和数量来区分。

1. 传入多个参数：当传入两个或以上的参数时，这些参数会直接作为数组的元素。例如：const arr = new Array(1, 2, 3); 会创建 [1, 2, 3]。

2. 传入单个数字参数：这是最容易踩坑的地方。如果只传入一个数字，它不会创建包含该数字的数组，而是创建一个指定长度的“空数组”（稀疏数组）。例如：const empty = new Array(5); 会创建一个长度为5，但内部没有任何实际元素的数组。

3. 无参调用：new Array()等价于[]，创建一个空数组。由于上述的歧义性，现代开发中通常建议尽量避免直接使用new Array()。

三、Array.of()方法

为了解决new Array()在传入单个数字时的歧义问题，ES6引入了Array.of()方法。

1. 核心特性：无论传入的参数数量或类型是什么，它都会将参数原封不动地作为数组的元素。

2. 代码示例：Array.of(5) 会返回 [5]，而不是长度为5的空数组；Array.of(1, 2, 3) 返回 [1, 2, 3]。它是安全创建包含数字元素的数组的最佳选择。

四、Array.from()方法

Array.from()是ES6引入的一个极其强大的静态方法，专门用于从“类数组对象”或“可迭代对象”创建一个新的真实数组。

1. 转换类数组：例如，将DOM查询返回的NodeList或函数内部的arguments对象转换为数组，以便使用map、filter等方法：const divs = Array.from(document.querySelectorAll('div'));。

2. 转换字符串：可以将字符串按字符拆分为数组：Array.from('hello') 返回 ['h', 'e', 'l', 'l', 'o']。

3. 结合映射函数：Array.from()接受第二个参数作为映射函数，可以在转换的同时对元素进行处理。例如，生成一个0到4的序列：Array.from({ length: 5 }, (_, i) => i)，返回 [0, 1, 2, 3, 4]。

五、展开运算符（Spread Syntax）

展开运算符...是ES6引入的语法糖，它可以将一个可迭代对象（如数组、字符串）“展开”为独立的元素。

1. 复制数组：创建现有数组的浅拷贝：const copy = [...originalArray];。

2. 合并数组：将多个数组合并为一个新数组：const merged = [...arr1, ...arr2];。

3. 插入元素：在特定位置插入新元素：const newArr = [0, ...arr1, 99];。

六、Array.fill()与填充数组

虽然fill()本身是一个修改现有数组的方法，但它常与new Array()结合，用于快速初始化一个固定长度的数组。

1. 填充固定值：new Array(5).fill(0) 可以创建一个包含5个0的数组 [0, 0, 0, 0, 0]。

2. 注意事项：如果填充的是引用类型（如对象），所有元素将指向同一个内存地址，修改其中一个会影响所有元素。

七、使用循环或高阶方法动态生成

在实际业务中，数组往往不是静态写死的，而是根据数据动态生成的。

1. 传统循环：使用for循环配合push()方法，将计算结果或请求到的数据逐个推入数组。

2. 高阶方法：使用map()方法是最优雅的动态生成方式。例如，将一个数字数组翻倍：const doubled = [1, 2, 3].map(x => x * 2);。map不仅遍历了原数组，还返回了一个全新的数组。

JavaScript提供了从简单到复杂的多种数组创建方式。在日常开发中，数组字面量应作为首选；处理数字元素时，使用Array.of()避免歧义；转换DOM集合或生成序列时，Array.from()是最佳利器；而涉及数组合并或拷贝时，展开运算符则最为便捷。开发者应根据具体的业务场景、性能需求以及代码可读性，灵活选择最合适的方法来构建数据结构。

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com