splice 方法一個數組中最強大的方法,不僅可以對數組進行元素對添加,對數組元素對刪除,對數組元素的替換,可以說它集百家與一身, 它會直接修改原數組,返回刪除的元素。
那么我們就來好好的看看它是如何進行數組的添加、刪除與替換工作。
splice 方法的參數傳入數量不的不同形成的效果也會不同。
首先它接受三個參數或甚至更多,除了開始位置索引 start 參數以外,其余全是可選參數。
//語法
array.splice(start, count, item1, item2, ...)
start:刪除數組元素的開始索引(必須)
count:需要刪除元素的個數
item1,item2…:插入數組的元素
一、刪除數組
傳遞一個參數的時候,數組會刪除從給定的索引到數組結束的所有元素,原數組會被修改,返回刪除的數組
//刪除元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2);
console.log(numbers); //[1, 2]
console.log(removes); //[3, 4, 5]
如何刪除指定個數的數組?如我們只想刪除第6個元素等等…
我們添加第二個參數 count 即可,元素的索引是從0開始,也就是說 start 參數是從 0 開始的。
//刪除第6個元素
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const removes = numbers.splice(5, 1);
console.log(numbers); //[1, 2, 3, 4, 5, 7, 8]
console.log(removes); //[6]
//刪除第6,7位兩個元素
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const removes = numbers.splice(5, 2);
console.log(numbers); //[1, 2, 3, 4, 5, 8]
console.log(removes); //[6, 7]
二、添加數組
如何添加一個元素,這會就要用到我們的第三個參數或者第四個,第五個等等,依次添加即可。
//指定在某個位置添加一個元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 0, 'F');
console.log(numbers); //[1, 2, "F", 3, 4, 5]
console.log(removes); //[]
//指定在某個位置添加多個元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 0, 'A', 'B', 'C');
console.log(numbers); //[1, 2, "A", "B", "C", 3, 4, 5]
console.log(removes); //[]
因為不對數組進行任何的刪除項,然后又在數組中插入一些元素,實現的數組的添加
三、替換數組元素
替換的思路與刪除僅僅多了一步把要插入掉位置元素給刪除掉。
//替換第2,3位的元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 2, 'A', 'B');
console.log(numbers); //[1, 2, "A", "B", 5]
console.log(removes); //[3, 4]