摘要：刪除數(shù)組元素的開(kāi)始索引需要?jiǎng)h除元素的個(gè)數(shù)，插入數(shù)組的元素語(yǔ)法因?yàn)閰?shù)變化多樣，我們主要從三個(gè)方面來(lái)展示的用法。

今天是我們介紹數(shù)組系列文章的第五篇，也是我們數(shù)組系列的最后一篇文章，只是數(shù)據(jù)系列的結(jié)束，所以大家不用擔(dān)心，我們會(huì)持續(xù)的更新干貨文章。

生命不息，更新不止！

今天我們就不那么多廢話了，直接干貨開(kāi)始。

我們?cè)凇禞avascript數(shù)組系列一之棧與隊(duì)列》中描述我們是如何利用 push、pop、shift、unshift方法進(jìn)行數(shù)組單個(gè)元素的添加與刪除。

但是光有單個(gè)元素的刪除恐怕難以滿足我們的應(yīng)用場(chǎng)景，那么那么如何進(jìn)行數(shù)組元素的批量操作？let"s go！

該方法會(huì)復(fù)制數(shù)組的一部分從我們選擇到開(kāi)始到結(jié)束位置，返回一個(gè)新數(shù)組。

slice 方法接受兩個(gè)可選到參數(shù)：一個(gè)復(fù)制數(shù)組到開(kāi)始索引，一個(gè)是復(fù)制數(shù)組到結(jié)束索引。

//語(yǔ)法
array.slice(begin, end);

//案例
const friends = ["大B哥", "二B哥", "三B哥", "我"];
const friends1 = friends.slice();
const friends2 = friends.slice(1);
const friends3 = friends.slice(1, 3);
const friends4 = friends.slice(-1);
const friends5 = friends.slice(-3, -1);
console.log(friends1); //["大B哥", "二B哥", "三B哥", "我"]
console.log(friends2); //["二B哥", "三B哥", "我"]
console.log(friends3); //["二B哥", "三B哥"]
console.log(friends4); //["我"]
console.log(friends5); //["二B哥", "三B哥"]

slice 方法主要就是復(fù)制數(shù)組到一部分，然后返回新的數(shù)組，所以用法也相對(duì)簡(jiǎn)單一些。但是還是有一些我們值得注意到地方。

數(shù)組始終都是從左到右到復(fù)制順序，即使參數(shù)是負(fù)數(shù)也是如此

沒(méi)有接受任何參數(shù)的時(shí)候，會(huì)復(fù)制整個(gè)數(shù)組

一個(gè)參數(shù)的時(shí)候，是從當(dāng)前參數(shù)的索引位置到數(shù)組到結(jié)束

兩個(gè)參與時(shí)，采用左閉右開(kāi)到原則，即包含開(kāi)始，但不包含結(jié)束

當(dāng)參數(shù)為負(fù)數(shù)時(shí)，會(huì)從數(shù)組的末尾開(kāi)始計(jì)算

以上就是 slice 方法值得我們注意的地方，如果大家掌握了這些知識(shí)，那么將會(huì)很好的使用它。

最后，我們來(lái)看一看它的兼容問(wèn)題

splice 方法一個(gè)數(shù)組中最強(qiáng)大的方法，不僅可以對(duì)數(shù)組進(jìn)行元素對(duì)添加，對(duì)數(shù)組元素對(duì)刪除，對(duì)數(shù)組元素的替換，可以說(shuō)它集百家與一身，它會(huì)直接修改原數(shù)組，返回刪除的元素。

那么我們就來(lái)好好的看看它是如何進(jìn)行數(shù)組的添加、刪除與替換工作。

splice 方法的參數(shù)傳入數(shù)量不的不同形成的效果也會(huì)不同。

首先它接受三個(gè)參數(shù)或甚至更多，除了開(kāi)始位置索引 start 參數(shù)以外，其余全是可選參數(shù)。

start：刪除數(shù)組元素的開(kāi)始索引

count：需要?jiǎng)h除元素的個(gè)數(shù)

item1，item2...：插入數(shù)組的元素

//語(yǔ)法
array.splice(start, count, item1, item2, ...)

因?yàn)?splice 參數(shù)變化多樣，我們主要從三個(gè)方面來(lái)展示 splice 的用法。

1. 如何刪除數(shù)組元素

傳遞一個(gè)參數(shù)的時(shí)候，數(shù)組會(huì)刪除從給定的索引到數(shù)組結(jié)束的所有元素，原數(shù)組會(huì)被修改，返回刪除的數(shù)組

//刪除元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2);
console.log(numbers); //[1, 2]
console.log(removes); //[3, 4, 5]

如何刪除指定個(gè)數(shù)的數(shù)組？如我們只想刪除第6個(gè)元素等等...
我們添加第二個(gè)參數(shù) count 即可，元素的索引是從0開(kāi)始，也就是說(shuō) start 參數(shù)是從 0 開(kāi)始的。

//刪除第6個(gè)元素
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位兩個(gè)元素
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]

已然明白，splice 方法是從 start 索引位置開(kāi)始，刪除 count 個(gè)元素。如何不刪除元素呢？有些聰明的同學(xué)肯定已經(jīng)知道那就是我們的 count 為 0 時(shí)，它就不會(huì)刪除任何元素，這個(gè)也為我們后面如何添加與替換元素提供了前提條件。

2. 如何添加數(shù)組元素

如何添加一個(gè)元素，這會(huì)就要用到我們的第三個(gè)參數(shù)或者第四個(gè)，第五個(gè)等等，依次添加即可。

//指定在某個(gè)位置添加一個(gè)元素
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); //[]

//指定在某個(gè)位置添加多個(gè)元素
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); //[]

因?yàn)椴粚?duì)數(shù)組進(jìn)行任何的刪除項(xiàng)，然后又在數(shù)組中插入一些元素，實(shí)現(xiàn)的數(shù)組的添加

3. 如何替換數(shù)組元素

替換的思路與刪除僅僅多了一步把要插入掉位置元素給刪除掉。

//替換第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]

來(lái)看看 splice 方法的兼容性如何

到目前位置連續(xù)五篇文章，我們已經(jīng)介紹了很多數(shù)組的一些方法，你會(huì)發(fā)現(xiàn)這些方法都是基于單個(gè)數(shù)組的增刪改甚至是合并，沒(méi)有數(shù)組與數(shù)組之間的一些方法，不過(guò) Javascript 還是為我們提供了一個(gè)方法就是可以實(shí)現(xiàn)數(shù)組與數(shù)組之間的合并操作。

用法非常簡(jiǎn)單，就是用于兩個(gè)數(shù)組的合并，原有數(shù)組不發(fā)生改變，返回一個(gè)新的數(shù)組。

它接受的參數(shù)為數(shù)組或者是值類型，參數(shù)的個(gè)數(shù)為一個(gè)或者多個(gè)。

//語(yǔ)法
var newArray = array.concat(array1, array2...)

//連接兩個(gè)數(shù)組
const numbers1 = ["1", "2", "3"];
const numbers2 = ["4", "5", "6"];
const newNumbers = numbers1.concat(numbers2);
console.log(numbers1); //["1", "2", "3"]
console.log(numbers2); //["4", "5", "6"]
console.log(newNumbers);//["1", "2", "3", "4", "5", "6"]

//連接值類型
const numbers1 = ["1", "2", "3"];
const newNumbers = numbers1.concat("4");
console.log(newNumbers); //["1", "2", "3", "4"]

//連接多個(gè)數(shù)組
const numbers1 = ["1", "2", "3"];
const numbers2 = ["4", "5", "6"];
const number3 ＝ ["7"];
const newNumbers = numbers1.concat(numbers2, number3);
console.log(newNumbers);//["1", "2", "3", "4", "5", "6", "7"]

那么 concat 方法的兼容性如何呢？

到目前位置數(shù)組的系列文章以及介紹完畢，我們系統(tǒng)以及完整的介紹了數(shù)組的一系列方法，通過(guò)一些例子介紹了每個(gè)用法，甚至我們把每個(gè)方法的很多用法都有提到，不說(shuō)能夠應(yīng)對(duì)所有應(yīng)用場(chǎng)景把，至少在日常的開(kāi)發(fā)過(guò)程中足夠使用了。

數(shù)組雖然說(shuō)完了，但是我們的故事還沒(méi)有說(shuō)玩，歡迎持續(xù)關(guān)注。

關(guān)注微信公眾號(hào)：六小登登。領(lǐng)取全套學(xué)習(xí)資源

系列文章列表：

《Javascript數(shù)組系列一之棧與隊(duì)列》

《Javascript數(shù)組系列二之迭代方法1》

《Javascript數(shù)組系列三之迭代方法2》

《Javascript數(shù)組系列四之?dāng)?shù)組的轉(zhuǎn)換與排序sort》

《Javascript數(shù)組系列五之增刪改和強(qiáng)大的 splice()》