跳到主要内容

JavaScript 数组创建

数组是JavaScript中最常用的数据结构之一，它允许你在单个变量中存储多个元素。无论你是要存储用户列表、产品清单，还是任何需要有序集合的数据，数组都是你的好帮手。

在本教程中，我们将探索在JavaScript中创建数组的各种方法，从基本方法到更高级的技术，并讨论每种方法的优缺点和适用场景。

什么是JavaScript数组？​

在深入了解如何创建数组之前，让我们先简单了解一下JavaScript数组是什么：

  • 数组是一种特殊类型的对象
  • 它用于按顺序存储多个值
  • 可以存储任何类型的数据（字符串、数字、对象、其他数组等）
  • 数组中的每个项目都有一个从0开始的索引

创建数组的方法​

1. 使用数组字面量（推荐）​

最简单、最常用的创建数组方法是使用数组字面量（方括号 []）：

javascript
// 空数组
const emptyArray = [];

// 包含数字的数组
const numbers = [1, 2, 3, 4, 5];

// 包含不同数据类型的数组
const mixed = [1, "Hello", true, null, {name: "John"}, [10, 20]];

console.log(numbers); // [1, 2, 3, 4, 5]
console.log(mixed);   // [1, "Hello", true, null, {name: "John"}, [10, 20]]
提示

数组字面量是创建数组最简洁、最优雅的方式，也是大多数JavaScript开发者首选的方法。

2. 使用Array构造函数​

另一种创建数组的方式是使用Array构造函数：

javascript
// 创建空数组
const emptyArray = new Array();

// 创建指定长度的数组（所有元素都是undefined）
const arrayWithLength = new Array(5);

// 创建带有初始值的数组
const numbers = new Array(1, 2, 3, 4, 5);

console.log(emptyArray);       // []
console.log(arrayWithLength);  // [empty × 5]
console.log(numbers);          // [1, 2, 3, 4, 5]
注意

使用Array构造函数时要小心。如果只传递一个数字参数，它会创建一个长度为该数字的空数组，而不是包含该数字的数组！

javascript
const a = new Array(3);     // 创建一个长度为3的空数组
const b = new Array(1, 2, 3); // 创建一个包含1, 2, 3的数组

3. 使用Array.of()方法​

ES6引入了Array.of()方法，它创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型：

javascript
const numbers = Array.of(1, 2, 3, 4, 5);
const singleNumber = Array.of(5);

console.log(numbers);      // [1, 2, 3, 4, 5]
console.log(singleNumber); // [5]

Array.of()解决了Array()构造函数的问题，始终创建包含传入参数的数组，即使只有一个数字参数。

4. 使用Array.from()方法​

Array.from()方法可以从类数组对象（如字符串、Set、Map或函数参数对象）或可迭代对象创建一个新的数组实例：

javascript
// 从字符串创建数组
const arrayFromString = Array.from('hello');

// 从Set创建数组
const arrayFromSet = Array.from(new Set([1, 2, 3, 3, 4]));

// 使用映射函数
const doubledNumbers = Array.from([1, 2, 3], x => x * 2);

console.log(arrayFromString);  // ["h", "e", "l", "l", "o"]
console.log(arrayFromSet);     // [1, 2, 3, 4]
console.log(doubledNumbers);   // [2, 4, 6]

Array.from()非常强大，特别是当你需要将类数组对象转换为真正的数组时。

5. 使用展开运算符（Spread Operator）​

ES6引入的展开运算符（...）也可以用于创建数组：

javascript
// 从其他可迭代对象创建数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

// 从字符串创建数组
const chars = [...'hello'];

console.log(arr2);  // [1, 2, 3, 4, 5, 6]
console.log(chars); // ["h", "e", "l", "l", "o"]

填充数组的方法​

有时我们需要创建一个预填充值的数组。以下是几种方法：

1. 使用Array.fill()方法​

javascript
// 创建长度为5，值全为0的数组
const zeroArray = new Array(5).fill(0);

// 填充数组的一部分
const partiallyFilledArray = [1, 2, 3, 4, 5];
partiallyFilledArray.fill(0, 2, 4); // 从索引2到索引4（不包含）填充0

console.log(zeroArray);            // [0, 0, 0, 0, 0]
console.log(partiallyFilledArray); // [1, 2, 0, 0, 5]

2. 使用Array.from()和映射函数​

javascript
// 创建包含1到5的数组
const numbers = Array.from({length: 5}, (_, index) => index + 1);

// 创建一个包含随机数的数组
const randomNumbers = Array.from({length: 5}, () => Math.floor(Math.random() * 100));

console.log(numbers);       // [1, 2, 3, 4, 5]
console.log(randomNumbers); // [随机数, 随机数, 随机数, 随机数, 随机数]

实际应用案例​

案例1：用户列表​

假设你正在构建一个用户管理系统，需要创建和操作用户列表：

javascript
// 创建用户数组
const users = [
  { id: 1, name: "Alice", email: "alice@example.com" },
  { id: 2, name: "Bob", email: "bob@example.com" },
  { id: 3, name: "Charlie", email: "charlie@example.com" }
];

// 添加新用户
users.push({ id: 4, name: "Dave", email: "dave@example.com" });

// 查找指定用户
const foundUser = users.find(user => user.id === 2);

console.log(users.length); // 4
console.log(foundUser);    // { id: 2, name: "Bob", email: "bob@example.com" }

案例2：创建一个数值表格​

假设你需要生成一个数值表格，例如乘法表：

javascript
// 创建一个10x10的乘法表
const multiplicationTable = Array.from({length: 10}, (_, i) => {
  return Array.from({length: 10}, (_, j) => (i + 1) * (j + 1));
});

console.log(multiplicationTable[0]); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(multiplicationTable[4]); // [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]

案例3：处理API响应​

从API获取的数据通常需要转换为数组格式：

javascript
// 假设这是从API获取的JSON数据
const apiResponse = `{"results": [
  {"name": "Product 1", "price": 19.99},
  {"name": "Product 2", "price": 29.99},
  {"name": "Product 3", "price": 39.99}
]}`;

// 解析JSON并提取结果数组
const products = JSON.parse(apiResponse).results;

// 使用map创建新数组
const productNames = products.map(product => product.name);
const totalPrice = products.reduce((sum, product) => sum + product.price, 0);

console.log(productNames); // ["Product 1", "Product 2", "Product 3"]
console.log(totalPrice);   // 89.97

数组创建方法比较​

下面是一个比较不同数组创建方法的表格：

最佳实践​

  1. 使用数组字面量：在大多数情况下，使用数组字面量（[]）是最简洁、最易读的方式。

  2. 避免使用new Array()：除非有特定需要（如创建特定长度的数组），否则避免使用构造函数语法，因为它可能导致混淆。

  3. 用Array.of()代替构造函数：如果需要创建包含单个数值的数组，使用Array.of()而不是new Array()。

  4. 使用Array.from()处理类数组对象：当需要将类数组对象（如NodeList或arguments）转换为真正的数组时，Array.from()是最佳选择。

  5. 使用展开运算符进行数组复制：使用[...arr]是复制数组的简洁方式。

总结​

JavaScript提供了多种创建数组的方法，每种方法都有其适用场景：

  • 数组字面量 []：最常用、最简洁的方法
  • Array构造函数：在需要预定义长度时有用
  • Array.of()：创建包含特定值的数组，解决了Array()构造函数的单参数问题
  • Array.from()：将类数组对象或可迭代对象转换为数组
  • 展开运算符：用于创建数组副本或合并数组

掌握这些方法将使你能够更有效地处理JavaScript中的数组操作，选择适合特定场景的最佳方法。

练习​

为了巩固所学知识，尝试完成以下练习：

  1. 创建一个包含1到100的数组
  2. 使用五种不同的方法创建包含三个元素[1, 2, 3]的数组
  3. 创建一个二维数组，表示3×3的网格
  4. 将字符串"JavaScript"转换为字符数组
  5. 创建一个长度为10的数组，内容是每个索引的平方

进一步学习资源​

通过这些方法和实践，你将能够在任何JavaScript项目中有效地创建和管理数组。