JavaScript数组splice()详解：删除、插入、替换元素（附实用示例）

1 3. splice() 的实用用法（附代码示例）
2 4. splice() 的高级用例：实战场景
3 5. splice() vs slice(): Key Differences and When to Use Each (With a Comparison Table)
4 6. splice() vs split(): Avoid Confusing Array Editing with String Splitting
5 7. Important Notes When Using splice()

3. splice() 的实用用法（附代码示例）

在本节中，我们将通过实际示例演示 JavaScript 的 splice() 方法的使用。我们会覆盖三种常见模式——删除、插入和替换，并为每种模式提供关键注意事项。

3.1 如何删除元素

使用 splice()，可以轻松地从数组中移除指定元素。

示例 1：删除单个元素

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 1); // Deletes "banana"
console.log(fruits); // ["apple", "cherry", "date"]

解释：

从索引 1 开始删除 1 个元素（“banana”）。

示例 2：删除多个元素

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2); // Deletes "banana" and "cherry"
console.log(fruits); // ["apple", "date"]

解释：

从索引 1 开始删除 2 个元素（“banana”和“cherry”）。

注意：
因为被删除的元素会从数组中移除，原数组会被修改（这是一种 破坏性 方法）。

3.2 如何插入元素

使用 splice()，可以在指定位置插入新元素。

示例 1：插入一个元素

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

解释：

将第二个参数设为 0，即可在不删除任何元素的情况下进行插入。

示例 2：插入多个元素

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

注意：
插入位置和插入元素的数量没有严格限制——可以根据需要插入任意数量的元素。

3.3 如何替换元素

同样可以使用 splice() 来替换已有元素。

示例 1：替换单个元素

let numbers = [1, 2, 3, 4];
numbers.splice(1, 1, 5); // Replaces "2" at index 1 with "5"
console.log(numbers); // [1, 5, 3, 4]

解释：

从索引 1 开始删除 1 个元素，然后在同一位置插入 5。

示例 2：替换多个元素

let numbers = [1, 2, 3, 4];
numbers.splice(1, 2, 5, 6); // Replaces "2" and "3" with "5" and "6"
console.log(numbers); // [1, 5, 6, 4]

解释：

从索引 1 开始删除 2 个元素，然后插入 5 和 6。

4. splice() 的高级用例：实战场景

以下是 splice() 在实际项目中尤为有用的场景——例如表单数据管理、编辑表格行以及预处理数据集。

4.1 示例：操作表单数据

管理动态表单字段

在构建允许用户添加或删除字段的动态表单时，splice() 非常便利。

示例：添加和删除字段

let formData = ["Name", "Email", "Phone"];

// Insert a field
formData.splice(2, 0, "Address");
console.log(formData); // ["Name", "Email", "Address", "Phone"]

// Remove a field
formData.splice(1, 1);
console.log(formData); // ["Name", "Address", "Phone"]

解释：

对于插入，我们在索引 2 处添加 “Address”。
对于删除，我们在索引 1 处移除 “Email”，其余元素会自动向前移动。

当需要根据用户操作动态修改字段时，这种方式非常实用。

4.2 添加和删除动态表格行

在 Web 应用中，表格式数据管理很常见。下面示例演示了插入和删除表格行的操作。

示例：添加和删除行

let tableData = [
  ["ID", "Name", "Age"],
  [1, "Tanaka", 25],
  [2, "Sato", 30]
];

// Insert a new row
tableData.splice(2, 0, [3, "Takahashi", 28]);
console.log(tableData);
// [["ID", "Name", "Age"], [1, "Tanaka", 25], [3, "Takahashi", 28], [2, "Sato", 30]]

// Delete a row
tableData.splice(1, 1);
console.log(tableData);
// [["ID", "Name", "Age"], [3, "Takahashi", 28], [2, "Sato", 30]]

Explanation:

For inserting , we add a new data row at index 2.
For deleting , we remove the row at index 1 (Tanaka).

This demonstrates flexible manipulation of table-like data structures.

4.3 Dataset Preprocessing and Editing

When handling large datasets, you may need to edit or replace specific records. Here’s an example of replacing part of a dataset.

Example: Updating a dataset

let users = [
  { id: 1, name: "Tanaka", age: 25 },
  { id: 2, name: "Sato", age: 30 },
  { id: 3, name: "Takahashi", age: 28 }
];

// Update an entry
users.splice(1, 1, { id: 2, name: "Yamada", age: 32 });
console.log(users);
// [{ id: 1, name: "Tanaka", age: 25 }, { id: 2, name: "Yamada", age: 32 }, { id: 3, name: "Takahashi", age: 28 }]

Explanation:

Deletes the record at index 1 and replaces it with a new object.
Even object-based data can be edited smoothly with splice() .

5. splice() vs slice(): Key Differences and When to Use Each (With a Comparison Table)

In JavaScript, splice and slice are commonly used methods for working with arrays. Because their names look similar, it’s easy to confuse them—but their behavior and use cases are very different. In this section, we’ll compare splice() and slice() and explain how to choose the right one.

5.1 The Core Difference Between splice() and slice()

Method	What it does	Mutates the original array?	Common use cases
splice	Insert / delete / replace elements	Yes	Edit part of an array or insert new elements
slice	Extract a portion of an array	No	Copy a range of elements into a new array

5.2 splice() Examples and Characteristics

Characteristics:

It mutates the original array (a destructive method).
You can insert, delete, and replace elements.

Example 1: Editing elements with splice()

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2, "orange", "grape"); // Removes "banana" and "cherry", then inserts new elements
console.log(fruits); // ["apple", "orange", "grape", "date"]

Explanation:

Deletes 2 elements starting at index 1, then inserts “orange” and “grape”.
The key point is that the original array is modified directly.

5.3 slice() Examples and Characteristics

Characteristics:

The original array does not change (a non-destructive method).
Used to extract elements into a new array.

Example 1: Extracting a portion with slice()

let fruits = ["apple", "banana", "cherry", "date"];
let result = fruits.slice(1, 3); // Extracts elements from index 1 up to (but not including) 3
console.log(result); // ["banana", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry", "date"]

Explanation:

Elements in the range [1, 3) are returned as a new array.
The original array remains unchanged.

5.4 How to Choose Between splice() and slice()

1. Use splice() when you want to modify the array

Example: Removing an unnecessary item from a list

let tasks = ["task1", "task2", "task3"];
tasks.splice(1, 1); // Removes the item at index 1
console.log(tasks); // ["task1", "task3"]

2. Use slice() when you want a subset without changing the original array

Example: Saving only part of an array separately

let data = [10, 20, 30, 40, 50];
let subset = data.slice(1, 4); // Extracts elements from index 1 up to 4 (exclusive)
console.log(subset); // [20, 30, 40]
console.log(data); // [10, 20, 30, 40, 50] (unchanged)

5.5 Practical Code Example: splice() vs slice()

The following code helps you see the difference between splice and slice more clearly.

let items = ["A", "B", "C", "D", "E"];

// splice: destructive (mutates the original array)
let removed = items.splice(1, 2); // Removes "B" and "C"
console.log(items); // ["A", "D", "E"]
console.log(removed); // ["B", "C"]

// slice: non-destructive (does not mutate the original array)
let extracted = items.slice(0, 2); // Extracts elements from index 0 up to 2 (exclusive)
console.log(items); // ["A", "D", "E"] (unchanged)
console.log(extracted); // ["A", "D"]

Key points:

splice directly edits the original array, and returns the removed elements.
slice keeps the original array intact and returns a new array.

6. splice() vs split(): Avoid Confusing Array Editing with String Splitting

JavaScript provides many methods for working with arrays and strings. Among them, split() looks similar to splice(), so they’re often confused—but they do completely different things. In this section, we’ll clarify the differences between split() and splice() to help you avoid common mistakes.

6.1 What Is split()?

split() is a string method that splits a string using a delimiter and returns an array.

Basic Syntax

string.split(separator, limit);

Parameter Details

separator (Required):

A delimiter string or a regular expression used to split the string.

limit (Optional):

The maximum number of elements to include in the returned array.

6.2 split() Examples

Example 1: Split a comma-separated string

let text = "apple,banana,cherry,date";
let result = text.split(","); // delimiter is ","
console.log(result); // ["apple", "banana", "cherry", "date"]

Example 2: Split a string by spaces

let sentence = "Hello World JavaScript";
let words = sentence.split(" "); // delimiter is a space
console.log(words); // ["Hello", "World", "JavaScript"]

Example 3: Split using a regular expression

let data = "2024/12/31";
let parts = data.split(/[-/]/); // split by "-" or "/"
console.log(parts); // ["2024", "12", "31"]

6.3 Key Differences Between splice() and split()

Here’s a table comparing splice and split side by side.

Method	Target	What it does	Result type	Mutates the original data?
splice	Array	Insert / delete / replace elements	Mutates the original array	Yes
split	String	Splits a string into an array by delimiter	Returns a new array	No

6.4 When to Use splice() vs split()

1. Use splice() when you want to edit an array

Example: Remove an unnecessary item from an array

let colors = ["red", "blue", "green"];
colors.splice(1, 1); // Removes the element at index 1
console.log(colors); // ["red", "green"]

2. Use split() when you want to convert a string into an array

Example: Split a sentence into words

let sentence = "I love JavaScript";
let words = sentence.split(" ");
console.log(words); // ["I", "love", "JavaScript"]

6.5 Combining split() and splice(): A Practical Example

Here’s a useful pattern: split a string into an array, then edit the array with splice().

Example: Split string data and then edit it

let data = "apple,banana,cherry,date";

// 1. Use split() to convert the string into an array
let fruits = data.split(","); // ["apple", "banana", "cherry", "date"]

// 2. Use splice() to edit the array
fruits.splice(2, 1, "grape"); // Replaces "cherry" with "grape"
console.log(fruits); // ["apple", "banana", "grape", "date"]

Key points:

split converts a string into an array so it’s easier to work with.
splice performs the needed edits (insert / delete / replace) on the array.

7. Important Notes When Using splice()

JavaScript’s splice() method is powerful, but depending on how you use it, it can cause unexpected behavior, errors, or performance issues. In this section, we’ll cover key cautions and best practices to help you use splice() safely and effectively.

7.1 Be Careful: splice() Mutates the Original Array

Problem: Risk of data loss due to destructive behavior

splice() modifies the original array directly. If you want to preserve the original data, you may accidentally lose it.

Example: The original array gets changed

.“` let numbers = [1, 2, 3, 4]; let removed = numbers.splice(1, 2); // Removes 2 elements starting at index 1 console.log(numbers); // [1, 4] (original array is changed) console.log(removed); // [2, 3] (removed elements)

#### 解决方案：在编辑前复制数组

let numbers = [1, 2, 3, 4]; let copy = […numbers]; // Copy the array copy.splice(1, 2); // Edit the copy console.log(numbers); // [1, 2, 3, 4] (original array is unchanged) console.log(copy); // [1, 4]

### 7.2 警惕性能问题



#### 问题：编辑大型数组时成本高



**splice()** 在插入或删除元素时会触发元素移动和重新索引。对于大数组，这可能变得很慢。



**示例：编辑大型数组**

let bigArray = Array(1000000).fill(0); console.time(“splice”); bigArray.splice(500000, 1); // Removes one element in the middle console.timeEnd(“splice”); // Measure execution time

#### 解决方案：使用批处理或替代方法



* 将数组拆分为更小的块进行处理。  
* 在适当情况下考虑使用非破坏性方法，如 **slice()** 或 **concat()**。



### 7.3 防止因错误索引值导致的错误



#### 问题：超出范围的索引会导致意外行为



使用 **splice()** 时，指定超出范围的索引不会抛出错误。这会使 bug 更难被发现。



**示例：超出范围的索引**

let items = [“A”, “B”, “C”]; items.splice(5, 1); // Out-of-range index console.log(items); // [“A”, “B”, “C”] (no error occurs)

#### 解决方案：在调用 splice() 前验证索引

let items = [“A”, “B”, “C”]; let index = 5;

if (index < items.length) { items.splice(index, 1); } else { console.log(“The specified index is out of range.”); }

### 7.4 利用返回值（被删除的元素）



#### 关键点：被删除的元素会作为数组返回



**splice()** 将被删除的元素作为数组返回。通过使用该返回值，你可以构建更灵活的逻辑。



**示例：将被删除的元素存入另一个数组**

let tasks = [“task1”, “task2”, “task3”]; let removed = tasks.splice(1, 1); // Removes the element at index 1 console.log(removed); // [“task2”]

#### 实际用法：保存删除历史

let history = []; let tasks = [“task1”, “task2”, “task3”];

let removed = tasks.splice(1, 1); history.push(…removed);

console.log(history); // [“task2”]

### 7.5 避免将 splice() 与其他方法混用导致的错误



* **使用 map():** 如果想对每个元素进行转换，请使用 **map()** 而不是 splice()。  
* **使用 filter():** 如果想根据条件提取元素，请使用 **filter()** 而不是 splice()。



**示例：仅提取符合条件的元素**

let numbers = [10, 20, 30, 40, 50]; let filtered = numbers.filter(num => num > 20); console.log(filtered); // [30, 40, 50]

## 8. 总结：掌握 splice() 的关键要点



到目前为止，我们已经从基础到高级用例以及重要注意事项，全面介绍了 JavaScript 的 **splice()** 方法。在本节中，我们将回顾所学内容，并整理出可在实际项目中应用的关键要点。



### 8.1 splice() 基础快速回顾



* **目的：** 一个可以删除、插入和替换数组中元素的方法。  
* **语法：**

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

* **主要特性：**


1. 删除元素 → 移除不需要的数据。  
2. 插入元素 → 在特定位置添加新数据。  
3. 替换元素 → 将已有数据更改为不同的值。



**示例：核心操作（删除 / 插入 / 替换）**

let data = [“A”, “B”, “C”, “D”];

// Delete data.splice(1, 2); // [“A”, “D”]

// Insert data.splice(1, 0, “X”, “Y”); // [“A”, “X”, “Y”, “D”]

// Replace data.splice(2, 1, “Z”); // [“A”, “X”, “Z”, “D”]

正因为如此，**splice()** 如此强大——它让你能够以简洁、可读的方式编写数组编辑代码。

.### 8.2 与其他方法的差异回顾



1. **splice() 与 slice()**


* **splice():** 改变原数组（破坏性）→ 最适合编辑。
* **slice():** 不改变原数组（非破坏性）→ 最适合提取。


1. **splice() 与 split()**


* **splice():** 用于编辑数组的方法。
* **split():** 用于将字符串拆分为数组的方法。



### 8.3 实际使用案例概述



* **表单数据管理：** 添加或删除字段以构建动态表单。
* **表格数据编辑：** 插入或删除行以实现灵活的表格更新。
* **数据处理：** 高效编辑 JSON 或基于对象的数据集。



### 8.4 最佳实践与关键注意事项



* **注意破坏性编辑：** 由于 splice() 会修改原数组，必要时请先创建副本。
* **性能意识：** 对于大数据集，考虑使用更小的操作或替代方法。
* **防止错误：** 验证索引范围，并在必要时添加检查。
* **使用返回值：** 记录被删除的元素以用于日志或历史记录。
* **考虑其他方法：** 当 filter() 或 map() 更适合目标时使用它们。



### 8.5 如何持续提升 splice() 技能



#### 1. 通过编写真实代码学习



* 尝试在日常场景中使用 splice()，通过实践建立信心。



#### 2. 一起学习相关的数组方法



* **filter：** 提取符合条件的元素。
* **map：** 转换数组中的每个元素。
* **reduce：** 将值聚合为单一结果。



#### 3. 使用官方文档和可信资源



* 查看 [MDN Web Docs](https://developer.mozilla.org/) 获取最新更新。
* 探索更多示例以及与其他数组方法的比较。



### 总结与后续步骤



在本文中，我们解释了以下关于 JavaScript **splice()** 方法的主题：



1. **基本语法及参数工作方式**
2. **删除、插入和替换元素的具体示例**
3. **与其他方法（slice、split）的差异以及如何选择**
4. **重要注意事项、错误预防和性能技巧**



**splice()** 是 JavaScript 中用于数组操作的极其强大的工具。正确使用后，代码将变得更高效、更灵活。



接下来，请在自己的环境中运行本文的代码示例。练习得越多，对数组编辑的熟练度就越高，这将直接提升你的 JavaScript 技能。







## 9. 常见问题解答 (FAQ)：关于 splice() 的常见问题



以下是关于 JavaScript **splice()** 方法的一些常见问题及答案。这些 FAQ 帮助初学者和中级开发者消除困惑，深化理解。



### Q1. splice() 会修改原数组吗？



**答：是的。splice() 会直接修改原数组。**  
**splice()** 方法被视为破坏性方法，因为它在操作后会改变数组的内容。



**示例：**

let colors = [“red”, “blue”, “green”]; colors.splice(1, 1); // Removes the element at index 1 console.log(colors); // [“red”, “green”]

### Q2. splice() 与 slice() 有何区别？



**答：splice() 会改变原数组，而 slice() 不会。**


Method Effect on the original array Main use cases
splice Mutates the original array Delete, insert, replace elements
slice Does not mutate the original array Extract elements / create a sub-array




**示例：slice() 是非破坏性的**

Method	Effect on the original array	Main use cases
splice	Mutates the original array	Delete, insert, replace elements
slice	Does not mutate the original array	Extract elements / create a sub-array

let colors = [“red”, “blue”, “green”]; let newColors = colors.slice(1, 2); console.log(colors); // [“red”, “blue”, “green”] console.log(newColors); // [“blue”]

### Q3. 如何使用 splice() 添加元素？



**答：将第二个参数（deleteCount）设为 0 即可插入元素。**



**示例：插入元素**

let fruits = [“apple”, “banana”]; fruits.splice(1, 0, “grape”, “orange”); console.log(fruits); // [“apple”, “grape”, “orange”, “banana”]

### Q4. 如何使用 splice() 删除最后一个元素？

**A. 使用 -1 作为起始索引，或者使用数组长度计算最后一个索引。**



**示例：**

let numbers = [1, 2, 3, 4]; numbers.splice(-1, 1); console.log(numbers); // [1, 2, 3]

### Q5. 我可以使用 splice() 搜索元素并移除它吗？



**A. 是的。先找到索引，然后使用 splice() 移除它。**



**示例：按值搜索并移除**

let fruits = [“apple”, “banana”, “cherry”]; let index = fruits.indexOf(“banana”); if (index !== -1) { fruits.splice(index, 1); } console.log(fruits); // [“apple”, “cherry”]

### Q6. 使用 splice() 处理大型数据集时需要注意什么？



**A. 注意性能成本，并考虑分块处理。**



**示例：测量性能**

let bigArray = Array(100000).fill(0); console.time(“splice”); bigArray.splice(50000, 1000); console.timeEnd(“splice”);

### Q7. 如何使用 splice() 替换多个元素？



**A. 从第三个参数开始传递多个新项。**



**示例：替换多个元素**

let numbers = [1, 2, 3, 4]; numbers.splice(1, 2, 5, 6, 7); console.log(numbers); // [1, 5, 6, 7, 4]

### 总结



本 FAQ 部分涵盖了关于 **splice()** 的基本和高级问题。



**主要要点：**



* **splice()** 会修改原始数组，因此要小心使用。
* 理解 **slice()** 和 **split()** 之间的区别有助于防止混淆。
* 考虑性能和错误预防，以编写更安全的代码。



在使用这些 FAQ 作为参考的同时，测试代码示例并加深对 **splice()** 的理解。



## 10. 最终总结：关键要点和下一步学习



在本文中，我们提供了 JavaScript **splice()** 方法的完整解释。我们涵盖了从基础到实际用例和常见问题的一切，以便读者全面理解 **splice()** 的工作原理。本最终部分回顾了整篇文章并建议下一步学习内容。



### 10.1 splice() 的关键点



* **splice()** 是一种用于在数组中删除、插入和替换元素的方法。
* **语法** ：

array.splice(start, deleteCount, item1, item2, …); “`

主要用例 ：
删除元素
插入元素
替换元素

10.2 splice() 的常见使用场景

管理表单数据：非常适合添加或移除字段。
动态表格操作：用于插入或删除行。
数据预处理：有助于编辑 JSON 数据集和基于对象的记录。

10.3 splice() 与其他数组方法的比较

splice() 与 slice()： splice() 会修改原始数组，但 slice() 不会。
splice() 与 split()： split() 用于字符串，通过拆分文本创建数组。
splice() 与 map() / filter()： 使用 map() 和 filter() 进行转换和过滤，使用 splice() 进行直接数组编辑。

10.4 下一步学习步骤

编写实际代码： 尝试本文中的示例，并养成定期编码的习惯。
学习其他数组方法： 学习 map()、filter()、reduce()，并练习将它们与 splice() 结合使用。
在实际项目中应用 splice()： 在自己的应用中使用它进行更高级的数组操作。
跟进更新： 关注 MDN 和其他官方资源以学习新功能和改进。

10.5 结束语

splice() 是 JavaScript 中最强大和最常用的数组方法之一。通过将本文中学到的知识应用到实际项目中，您将加强技能，并在 JavaScript 中更有效地处理数据。

掌握灵活的数组操作将显著提高您在 JavaScript 开发中的生产力和信心。

Prev

2026-01-19
JavaScript 数组 join() 方法：语法、示例、陷阱与实用案例
Next
記事がありません

JavaScript数组splice()详解：删除、插入、替换元素（附实用示例）

3. splice() 的实用用法（附代码示例）

3.1 如何删除元素

3.2 如何插入元素

3.3 如何替换元素

4. splice() 的高级用例：实战场景

4.1 示例：操作表单数据

管理动态表单字段

4.2 添加和删除动态表格行

4.3 Dataset Preprocessing and Editing

5. splice() vs slice(): Key Differences and When to Use Each (With a Comparison Table)

5.1 The Core Difference Between splice() and slice()

5.2 splice() Examples and Characteristics

5.3 slice() Examples and Characteristics

5.4 How to Choose Between splice() and slice()

1. Use splice() when you want to modify the array

2. Use slice() when you want a subset without changing the original array

5.5 Practical Code Example: splice() vs slice()

6. splice() vs split(): Avoid Confusing Array Editing with String Splitting

6.1 What Is split()?

6.2 split() Examples

Example 1: Split a comma-separated string

Example 2: Split a string by spaces

Example 3: Split using a regular expression

6.3 Key Differences Between splice() and split()

6.4 When to Use splice() vs split()

1. Use splice() when you want to edit an array

2. Use split() when you want to convert a string into an array

6.5 Combining split() and splice(): A Practical Example

7. Important Notes When Using splice()

7.1 Be Careful: splice() Mutates the Original Array

Problem: Risk of data loss due to destructive behavior

10.2 splice() 的常见使用场景

10.3 splice() 与其他数组方法的比较

10.4 下一步学习步骤

10.5 结束语

JavaScript 数组 join() 方法：语法、示例、陷阱与实用案例