当前位置：首页 > 源码资料 > 正文内容

js创建数组的几种方式，JavaScript中构建数组的多种方法概览

wzgly2天前源码资料3

JavaScript中创建数组有几种常见的方法：可以使用数组的构造函数new Array()；直接使用中括号[]声明一个空数组或包含初始值的数组；利用展开运算符...将其他数组或元素合并到一个新数组中；还可以使用Array.of()和Array.from()方法创建具有特定长度或从类数组对象转换而来的数组，这些方法各有适用场景，根据需求选择合适的方式可以提升代码的可读性和效率。

用户提问：嗨，我想了解一下在JavaScript中创建数组有哪些方法？我是新手，希望你能简单明了地解释一下。

解答：当然可以！在JavaScript中创建数组非常简单，有多种方法可以实现，下面我会详细介绍一下几种常见的方式。

一：使用数组字面量

点一：最简单的方法是直接使用数组字面量，这种方法通过在大括号中列出元素来创建数组。

let fruits = ['Apple', 'Banana', 'Cherry'];

点二：数组字面量可以包含任何类型的值，包括其他数组。

let mixedArray = [1, 'two', [3, 4], true];

点三：你还可以在创建数组的同时初始化值。

let numbers = new Array(5).fill(0); // 创建一个包含5个0的数组

二：使用 `Array()` 构造函数

点一：Array() 构造函数也是创建数组的一种方式，它接受任意数量的参数，每个参数将成为数组的一个元素。

let colors = new Array('Red', 'Green', 'Blue');

点二：如果只传递一个参数，它会被解释为数组的长度。

let lengthArray = new Array(10); // 创建一个长度为10的空数组

点三：Array() 构造函数还可以用于创建包含特定值的数组。

let zeros = new Array(5).fill(0); // 创建一个包含5个0的数组

三：使用 `Array.of()` 方法

点一：Array.of() 方法是ES6中引入的，用于创建一个包含可变数量参数的新数组实例。

let arrayFromOf = Array.of(1, 2, 3); // 创建一个包含1, 2, 3的数组

点二：与 Array() 不同，Array.of() 总是返回一个数组，即使参数只有一个。

let singleElement = Array.of(1); // 创建一个包含1的数组，而不是一个单元素对象

点三：Array.of() 也可以用于复制一个现有数组。

let copyArray = Array.of(...[1, 2, 3]); // 创建一个包含1, 2, 3的数组

四：使用扩展运算符（Spread Operator）

点一：扩展运算符（）可以用来将一个数组展开为多个参数。

let array = [...[1, 2, 3]]; // 创建一个包含1, 2, 3的数组

点二：扩展运算符可以用来合并数组。

let combinedArray = [...[1, 2, 3], ...[4, 5, 6]]; // 创建一个包含1, 2, 3, 4, 5, 6的数组

点三：扩展运算符也可以用来创建一个新数组，其中包含除了某些元素之外的所有元素。

let filteredArray = [...[1, 2, 3, 4, 5], ...[6, 7, 8].filter(x => x > 5)]; // 创建一个包含2, 3, 4, 6, 7的数组

五：使用 `concat()` 方法

点一：concat() 方法可以用来连接两个或多个数组。

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combinedArray = array1.concat(array2); // 创建一个包含1, 2, 3, 4, 5, 6的数组

点二：concat() 方法也可以用来连接一个数组和一个或多个值。

let array1 = [1, 2, 3];
let combinedArray = array1.concat(4, 5); // 创建一个包含1, 2, 3, 4, 5的数组

点三：concat() 方法不会改变原始数组，而是返回一个新数组。

let array1 = [1, 2, 3];
let array2 = array1.concat([4, 5, 6]); // array1仍然包含1, 2, 3

通过以上几种方法,你可以在JavaScript中轻松地创建数组，每种方法都有其独特的用途，选择最适合你需求的方法可以使你的代码更加高效和易于理解。

其他相关扩展阅读资料参考文献：

数组字面量

直接声明：使用方括号[]是最直接的方式，例如let arr = [1, 2, 3];，这种方式语法简洁，适合快速初始化数组。
初始化空数组：通过let arr = [];创建一个空数组，适用于后续动态添加元素的场景。
初始化带初始值的数组：可以同时指定元素和长度，如let arr = [1, 2, 3, 4];，元素数量由实际值决定，而非数字参数。

Array构造函数

使用new Array()：通过new Array(1, 2, 3);创建数组，元素按顺序填充，与数组字面量效果相同。
传递多个参数：构造函数支持直接传入多个值作为数组元素，例如new Array('a', 'b', 'c')，会生成['a', 'b', 'c']。
传递一个数字参数：若仅传入一个数字，如new Array(3)，会创建一个长度为3的空数组，而非包含数字3的数组。注意：这种写法容易引起误解，建议优先使用数组字面量或Array.of。

Array.of方法

创建包含多个元素的数组：Array.of(1, 2, 3)会直接生成[1, 2, 3]，与构造函数类似，但更明确。
创建单个元素的数组：若仅传入一个参数，如Array.of('a')，会生成['a']，避免了构造函数可能的歧义。
创建数字元素的数组：Array.of(3, 4, 5)会生成[3, 4, 5]，而new Array(3)则生成长度为3的空数组。区别：Array.of始终将参数视为元素，而new Array可能根据参数数量或类型产生不同结果。

new Array()与Array.from的差异

new Array()的局限性：当传入一个数字参数时，会创建指定长度的空数组，例如new Array(5)生成[<empty>, <empty>, <empty>, <empty>, <empty>]。
Array.from的灵活性：Array.from([1, 2, 3])会复制传入的数组，而Array.from({length: 3}, (x, i) => i)可生成[0, 1, 2]，支持通过回调函数自定义元素值。
处理类数组对象：Array.from能将类数组对象（如arguments、NodeList）转换为数组，例如Array.from(document.querySelectorAll('div'))。

数组方法生成数组

split分割字符串：'a,b,c'.split(',')会生成['a', 'b', 'c']，适用于字符串拆分场景。
map转换元素：[1, 2, 3].map(x => x * 2)生成[2, 4, 6]，但需注意map返回的是新数组，原数组不变。
filter筛选元素：[1, 2, 3].filter(x => x % 2 === 0)生成[2]，适合过滤特定条件的元素。扩展：类似方法如reduce、sort也可间接生成数组，但需结合具体逻辑使用。

其他高级技巧

展开运算符...：let arr = [...[1, 2, 3]]可复制数组，或合并多个数组，如[...arr1, ...arr2]。
Array构造函数与Array.of的对比：Array.of更推荐用于创建数组，因其避免了new Array()的歧义问题。
动态生成数组：通过循环或函数返回数组，如function createArray(n) { return Array.from({length: n}, (_, i) => i); }，生成从0到n-1的数组。

JavaScript创建数组的方式多样，需根据场景选择最合适的。数组字面量适合简单初始化，Array构造函数和Array.of在处理参数时需注意区别，Array.from和展开运算符则提供了更灵活的动态生成能力。掌握这些方法能提升代码效率和可读性，避免因语法差异导致的错误。new Array(3)与Array.of(3)的返回值完全不同，前者是空数组，后者是包含单个元素的数组。在开发中，优先使用Array.of或数组字面量，以减少潜在误解。数组方法如split、map、filter虽非直接创建数组，但能通过函数调用生成新数组，适用于数据处理场景。合理选择创建方式，是高效编写JavaScript代码的关键。