JavaScript 数组方法 splice() 的 3 个示例

splice() 方法可以从数组中排除旧值，然后将新值插入数组。使用 splice() 后，将获得两个数组，第一个是排除的数组，第二个是编辑过的新数组。 需要注意的是，此方法会改变原数组。

语法

splice(start[, deleteCount[, item1[, item2[, ...]]]]) 方法的参数是从数组 start 索引开始，删除 deleteCount 个元素，返回删除元素组成的数组。

start

start 是一个从 0 开始的索引，用于指定修改的开始索引位置。如果未定义，start 的默认值为 0。如果 start 大于数组的索引范围，则从数组末尾开始添加内容。

此外，start 还可以使用负索引，则表示从数组末位开始的第几位（从 -1 计数，这意味着 -n 就是倒数第 n 个元素，其实就是等价于 array.length-n ）

deleteCount

deleteCount 参数是可选的，整数，表示要移除的数组元素的个数。

如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

如果 deleteCount 被省略了，或者它的值大于等于 array.length - start （也就是说，如果它大于或者等于 start 之后的所有元素的数）)，那么 start 之后数组的所有元素都会被删除。

如果 deleteCount 是 0 或者负数，则不移除元素，这种情况下，至少应添加一个新元素。

const arrNumbers = [1,3,5,6,7];
console.log(arrNumbers.splice(0, 3)); // [ 1, 3, 5 ]
console.log(arrNumbers); // [ 6, 7 ]

item1, item2, ... 可选

要添加进数组的元素，从 start 位置开始。如果不指定，splice() 则将只删除数组元素。添加进去的元素的位置位于开始删除索引后，结束于结束索引前。

const arrNumbers = [1, 3, 5, 6, 7];
console.log(arrNumbers.splice(0, 3, 8, 9)); // [ 1, 3, 5 ]
console.log(arrNumbers); // [ 8, 9, 6, 7 ]

1. 删除元素

对于删除元素，需要指定 start  参数，以及要删除的元素数量 deleteCount ，这里所说的删除是对于原数组，需要注意的是返回的是被删除元素组成的数组：

const arrNumbers = [1, 3, 5, 6, 7];
console.log(arrNumbers.splice(0)); // [ 1, 3, 5, 6, 7 ]
console.log(arrNumbers); // []

2. 在数组中插入元素

可以通过使用第三个参数即 item1, item2, ...  插入或添加元素，可以添加任意数量的元素，通过改变 start 和 deleteCount 值可以改变元素插入位置。

const ColorNames = (start, deleteCount, arr) => {
    arr.splice(start, deleteCount, "Pink", "Black", "Green");
    return arr;
};
// 数组后
console.log(ColorNames(2, 0, ["Golden", "Brown"])); // [ 'Golden', 'Brown', 'Pink', 'Black', 'Green' ]
// 数组前
console.log(ColorNames(0, 0, ["Golden", "Brown"])); // [ 'Pink', 'Black', 'Green', 'Golden', 'Brown' ]

3. 替换数组元素

经常需要替换数组中的一个或多个元素。 JavaScript 中没有明确命名的方法 replace ，但可以通过 splice 方法实现此方法。splice  方法不仅可以替换一个或多个元素，实际上，删除和添加数组中某个位置的元素就达到“替换”的效果。

const ColorNames = (arr) => {
    arr.splice(1, 3, "Pink", "Black", "Green");
    return arr;
};
console.log(ColorNames(["Golden", "Brown", "Yellow", "Blue", "Red"])); // [ 'Golden', 'Pink', 'Black', 'Green', 'Red' ]

上面的代码中 "Brown", "Yellow", "Blue" 被  "Pink", "Black", "Green" 所替换。