​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"​​ 所替换。