JavaScript 数组 toSpliced() 方法

JavaScript toSpliced() 语法

toSpliced() 是 JavaScript 数组的一个方法，它用于修改数组（包括添加、删除或替换元素）。

语法：

arr.toSpliced(start, n, item1, item2, ..., itemN)

说明：

toSpliced() 方法主要接收 3 种参数。

• start（必选）：表示修改的开始下标（从 0 开始）。start 的值可以是负数，表示从结尾倒数的索引。
  • 如果 start 大于数组的长度，则实际开始下标会被设置为数组的长度（即从数组末尾开始添加）。
  • 如果 start 是负数，则从数组末尾开始计算下标。例如，-1 表示倒数第一个元素，-2 表示倒数第二个元素，以此类推。如果计算后的下标小于 0，则实际开始下标会被设置为 0。
• n（可选）：表示删除 n 个元素。如果 n 省略，则表示删除下标为 start 的元素以及它后面的所有元素。
  • 如果 n 为 0，则不删除任何元素。
  • 如果 n 是负数，则视为 0。
• item1、item2、...、itemN（可选）：表示往数组添加的新元素。

JavaScript toSpliced() 摘要

JavaScript toSpliced() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript toSpliced() 方法是如何使用的。

示例 1：toSpliced() 只有 1 个参数

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
const result = arr.toSpliced(2);

console.log(arr);
console.log(result);

运行结果如下。

[ '红', '橙', '黄', '绿', '青', '蓝','紫' ]
[ '红', '橙' ]

分析：

toSpliced(2) 表示删除第 3 个元素以及后面所有的元素。此外可以看到，toSpliced() 不会修改原数组，并且返回修改后的新数组。

示例 2：toSpliced() 只有 2 个参数

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
const result = arr.toSpliced(2, 1);
console.log(result);

运行结果如下。

 ['红', '橙', '绿', '青', '蓝', '紫']

分析：

toSpliced(2, 1) 表示只删除第 3 个元素这一个元素。如果想要删除第 3、4、5 个元素，可以这样写：toSpliced(2, 3)。

示例 3：toSpliced() 有 3 个参数

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
const result = arr.toSpliced(2, 1, "yellow");
console.log(result);

运行结果如下。

['红', '橙', 'yellow', '绿', '青', '蓝', '紫']

分析：

toSpliced(2, 1, "yellow") 表示删除第 3 个元素，然后紧接着加上 "yellow" 作为新元素插入。

示例 4：toSpliced() 有 n 个参数（n≥3）

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
const result = arr.toSpliced(2, 2, "yellow", "green");
console.log(result);

运行结果如下。

['红', '橙', 'yellow', 'green', '青', '蓝', '紫']

分析：

toSpliced(2, 2, "yellow", "green") 表示删除第 3 和第 4 个元素，然后紧接着加上 "yellow" 和 "green" 这两个作为新元素插入。

示例 5：toSpliced() 开始下标为负数

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
const result = arr.toSpliced(-1, 1, "purple");
console.log(result);

运行结果如下。

 ['红', '橙', '黄', '绿', '青', '蓝', 'purple']

分析：

toSpliced(-1, 1, "purple") 表示删除最后一个元素，然后在其位置添加 "purple" 作为新元素。

示例 6：toSpliced() 结合负数下标添加多个元素

const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
const result = arr.toSpliced(-1, 2, "blue", "purple");
console.log(result);

运行结果如下。

['红', '橙', '黄', '绿', '青', '蓝', 'blue', 'purple']

分析：

虽然这里的 start 是负数，但是添加的新元素顺序是从左到右的。

“破坏性” 方法 vs “非破坏性” 方法

在 JavaScript 中，数组的 “破坏性” 方法以及它们对应的 “非破坏性” 方法，总结如下表所示。