了解和使用 JavaScript 中的 Array.splice() 方法

Question

这 Array#splice()函数 允许您通过添加和删除元素来就地修改数组。 它最常用于从数组中删除元素，但也可用于将元素添加到数组的中间。

删除元素

这 splice() function 是 唯一 允许您从数组中间删除元素而不创建新数组的本机数组函数。 例如，假设您有一个数组 ['a', 'b', 'c', 'd']，以下是删除 c 的方法 splice():

const arr = ['a', 'b', 'c', 'd'];

// Remove 1 element starting at index 2
arr.splice(2, 1);

arr; // ['a', 'b', 'd']

前 2 个参数 splice() 被称为 start 和 deleteCount，这 start 参数告诉 splice() 从哪里开始修改数组。 这 deleteCount 参数告诉 splice() 要删除多少元素。

你可能会看到 JavaScript 项目使用 filter() 代替 splice() 从数组中删除元素。 这两种方法的主要区别在于 filter() 创建一个新数组。 这表示 filter() 对于依赖不变性的应用程序（例如 React 应用程序）来说是更好的选择。

const arr = ['a', 'b', 'c', 'd'];

// Remove 1 element starting at index 2
const arr2 = arr.filter((v, i) => i !== 2);

// `arr` still has 'c', because `filter()` doesn't modify the array
// in place. On the other hand, `splice()` modifies the array in place.
arr; // ['a', 'b', 'c', 'd']
arr2; // ['a', 'b', 'd']
arr2 === arr; // false

向中间添加元素

这 splice() 函数还允许您将元素添加到数组的中间。 JavaScript 数组有一个 push() 函数 允许您将元素添加到数组末尾的 unshift() 函数 允许您将元素添加到数组开头，这 splice() function 是唯一允许您将元素添加到数组中间的本机数组函数。

例如，假设您有一个数组 ['a', 'b', 'd'] 并且您想在“b”之后添加“c”。 每个 参数 splice() 之后 deleteCount 参数被视为要添加到数组中的元素 startIndex，所以要插入' c'，你调用 splice() 与 deleteCount 0 和 'c' 作为第三个参数。

const arr = ['a', 'b', 'd'];

let start = 2;
let deleteCount = 0;
arr.splice(start, deleteCount, 'c');

arr; // ['a', 'b', 'c', 'd'];