JavaScript：如何向数组添加元素（push、unshift、splice、concat、spread）——从入门到进阶指南

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 引言

JavaScript 是 Web 开发中必不可少的编程语言之一。在其核心功能中，数组 在高效管理和操作数据方面发挥着关键作用。

在本文中，我们将详细解释如何在 JavaScript 中 向数组添加元素，涵盖具体方法及其使用方式。从基本方法到更高级的技术，本指南将对初学者到中级学习者都非常有用。

2. 数组的基本概念

什么是数组？——数据管理的基础

JavaScript 中的 数组 (Array) 是一种数据结构，允许您将多个值存储和管理在一起。它可以作为元素持有各种数据类型，例如字符串、数字和对象。

示例：

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ["apple", "banana", "orange"]

您可以使用索引访问数组元素。由于索引从 0 开始，因此第一个元素可以使用 fruits[0] 检索。

console.log(fruits[0]); // "apple"

数组初始化和基本操作

您可以通过以下方式初始化数组。

1. 创建一个空数组：

   let arr = [];
   

2. 创建带有初始值的数组：

   let numbers = [1, 2, 3, 4];
   

3. 在多行中编写数组：

   let colors = [
     "red",
     "blue",
     "green"
   ];
   

作为数组的基本操作，您可以使用 length 属性 获取元素数量。

console.log(colors.length); // 3

3. 向数组添加元素的基本方法

3.1 添加到末尾：push()

什么是 push()？

push() 方法是最基本的方式，用于 向数组末尾添加元素。它会修改（变异）原始数组并返回新长度。

语法

array.push(element1, element2, ..., elementN);

示例

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

示例：添加多个元素

fruits.push("grape", "melon");
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]

3.2 添加到开头：unshift()

什么是 unshift()？

unshift() 方法 向数组开头添加元素。与 push() 类似，它会修改原始数组并返回新长度。

语法

array.unshift(element1, element2, ..., elementN);

示例

let animals = ["dog", "cat"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "dog", "cat"]

3.3 在任意位置添加：splice()

什么是 splice()？

splice() 方法是一种灵活的选择，允许您 在数组的任意位置添加或移除元素。

语法

array.splice(start, deleteCount, item1, item2, ..., itemN);

示例

仅添加元素：

let colors = ["red", "blue", "green"];
colors.splice(1, 0, "yellow");
console.log(colors); // ["red", "yellow", "blue", "green"]

同时添加和移除：

colors.splice(2, 1, "purple");
console.log(colors); // ["red", "yellow", "purple", "green"]

总结

4. 高级技术：合并数组和添加元素

4.1 合并数组：concat()

什么是 concat()？

concat() 方法是一种非变异（非破坏性）方法，用于 将多个数组合并成一个新数组。原始数组不会被更改，并返回一个新数组。

语法

array1.concat(array2, array3, ...);

示例

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

4.2 使用展开语法 (...) 合并数组

什么是展开语法？

Spread 语法（...）是现代 JavaScript 的特性，可展开数组或对象中的元素。它允许你以简洁、可读的代码合并数组或添加新元素。

语法

[...array1, ...array2, ...elements];

示例

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

4.3 比较数组合并的选项

小结

在本节中，我们介绍了合并数组的高级技术。

• concat() 方法：一种不改变原数组的非变异合并方式。
• 展开语法：一种现代、简洁的灵活数组操作方法。

5. 高效数组处理的最佳实践

5.1 变异方法 vs. 非变异方法

什么是变异方法？

这些方法直接修改原始数组。

什么是非变异方法？

这些方法不改变原始数组，而是返回一个新数组。

5.2 编写注重性能的代码

优化循环

高效循环：

let length = arr.length;
for (let i = 0; i < length; i++) {
  console.log(arr[i]);
}

使用方法链

let numbers = [1, 2, 3, 4, 5];
let result = numbers
  .filter(num => num > 2)
  .map(num => num * 2);

console.log(result); // [6, 8, 10]

5.3 提高代码可读性

使用清晰的变量名

let userIds = [1, 2, 3];

适当添加注释

let evenIds = userIds.filter(id => id % 2 === 0);

使用模板字面量

let name = "Yamada";
let age = 25;
console.log(`${name} is ${age} years old.`);

小结

在本节中，我们介绍了高效数组操作的最佳实践。

• 在变异和非变异方法之间进行选择
• 使用注重性能的循环和方法链
• 通过命名和注释提升可读性

6. 实用示例与使用场景

6.1 管理表单输入数据

场景：将表单输入值存储在数组中

let userList = [];

function addUser(name) {
  userList.push(name);
  console.log(userList);
}

addUser("Sato");
addUser("Suzuki");
addUser("Tanaka");

输出：

["Sato"]  
["Sato", "Suzuki"]  
["Sato", "Suzuki", "Tanaka"]

从数组中移除特定元素

function removeUser(name) {
  userList = userList.filter(user => user !== name);
  console.log(userList);
}

removeUser("Suzuki");

输出：

["Sato", "Tanaka"]

6.2 在任务管理应用中添加动态数据

场景：添加任务并跟踪完成情况

let tasks = [];

function addTask(name) {
  tasks.push({ name: name, completed: false });
  console.log(tasks);
}

function completeTask(index) {
  tasks[index].completed = true;
  console.log(tasks);
}

addTask("Cleaning");
addTask("Laundry");
completeTask(0);

输出：

[{ name: "Cleaning", completed: true }, { name: "Laundry", completed: false }]

6.3 处理复杂数据结构

场景：处理嵌套数组和对象

let users = [
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer"] },
];

function addRole(userId, role) {
  let user = users.find(user => user.id === userId);
  if (user && !user.roles.includes(role)) {
    user.roles.push(role);
  }
  console.log(users);
}

addRole(2, "editor");

输出：

[
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer", "editor"] }
]

小结

在本节中，我们通过真实案例解释了数组操作的实际应用。

1. 管理表单输入数据 – 添加和删除项目的基本操作。
2. 构建任务管理应用 – 动态数组处理和状态更新。
3. 处理复杂数据结构 – 在嵌套数组和对象中添加和更新元素。

7. 常见问题 (问答)

Q1. 清空数组的最简方法是什么？

答案：将 length 属性设为 0

let arr = [1, 2, 3, 4];
arr.length = 0;
console.log(arr); // []

Q2. 如何只添加唯一元素（无重复）？

答案：使用 includes() 或 Set

示例 1：使用 includes() 检查重复

let arr = [1, 2, 3];
let value = 3;

if (!arr.includes(value)) {
  arr.push(value);
}
console.log(arr); // [1, 2, 3]

示例 2：使用 Set 去除重复

let arr = [1, 2, 3];
let values = [3, 4, 5];

arr = [...new Set([...arr, ...values])];
console.log(arr); // [1, 2, 3, 4, 5]

Q3. 如何向嵌套数组添加元素？

答案：使用 push() 或展开语法

示例 1：添加一个新的嵌套数组

let nestedArray = [[1, 2], [3, 4]];
nestedArray.push([5, 6]);
console.log(nestedArray); // [[1, 2], [3, 4], [5, 6]]

示例 2：在特定的嵌套数组中添加元素

nestedArray[1].push(7);
console.log(nestedArray); // [[1, 2], [3, 4, 7], [5, 6]]

小结

8. 最终总结与对比表

8.1 整体概述

基本数组操作

• 数组是什么？ 一种管理多个值的结构，您可以通过索引访问元素。
• 初始化和基本操作 使用 [] 可以轻松创建数组，并且可以通过 length 检查元素数量。

添加/删除元素的方法

• 在末尾添加：push() 简单且使用广泛，但会修改原数组。
• 在开头添加：unshift() 当顺序重要时很有用，但需注意性能。
• 在任意位置添加/删除：splice() 非常灵活，但语法可能有点复杂。

合并和扩展数组

• concat() 一种非变异的安全方式来合并多个数组。
• 展开语法（...） 简单、可读，适用于现代 JavaScript 环境。

效率技巧

• 变异 vs. 非变异方法 当需要保留原始数据时，选择非变异方法。
• 注重性能的循环 在适当情况下优化速度和内存效率。

示例与使用场景

• 表单输入管理 将值存储在数组中，轻松实现添加/删除。
• 任务管理系统 动态添加和删除任务，并跟踪完成状态。
• 嵌套数据操作 灵活处理包含嵌套数组和对象的复杂结构。

8.2 数组方法对比表

小结

在本文中，我们提供了对 JavaScript 数组操作 的结构化解释，涵盖了从基础到高级的技术。

• 核心数组操作及添加/删除元素的方法。
• 如数组合并和扩展等高级技术。
• 实际使用案例以及高效数组管理的技巧。
• 常见问题及其解决方案。

下一步

继续学习 JavaScript，并通过在实际项目中应用这些数组技术来提升您的技能！