Javascript數組系列五之增刪改和強大的 splice()

今天是咱們介紹數組系列文章的第五篇，也是咱們數組系列的最後一篇文章，只是數據系列的結束，因此你們不用擔憂，咱們會持續的更新干貨文章。

生命不息，更新不止！

今天咱們就不那麼多廢話了，直接乾貨開始。

咱們在《Javascript數組系列一之棧與隊列》中描述咱們是如何利用 push、pop、shift、unshift方法進行數組單個元素的添加與刪除。

可是光有單個元素的刪除恐怕難以知足咱們的應用場景，那麼那麼如何進行數組元素的批量操做？let's go！

數組的增刪改

slice

該方法會複製數組的一部分從咱們選擇到開始到結束位置，返回一個新數組。

slice 方法接受兩個可選到參數：一個複製數組到開始索引，一個是複製數組到結束索引。

//語法
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 方法主要就是複製數組到一部分，而後返回新的數組，因此用法也相對簡單一些。可是仍是有一些咱們值得注意到地方。

• 數組始終都是從左到右到複製順序，即便參數是負數也是如此
• 沒有接受任何參數的時候，會複製整個數組
• 一個參數的時候，是從當前參數的索引位置到數組到結束
• 兩個參與時，採用左閉右開到原則，即包含開始，但不包含結束
• 當參數爲負數時，會從數組的末尾開始計算

以上就是 slice 方法值得咱們注意的地方，若是你們掌握了這些知識，那麼將會很好的使用它。

最後，咱們來看一看它的兼容問題

splice

splice 方法一個數組中最強大的方法，不只能夠對數組進行元素對添加，對數組元素對刪除，對數組元素的替換，能夠說它集百家與一身，它會直接修改原數組，返回刪除的元素。

那麼咱們就來好好的看看它是如何進行數組的添加、刪除與替換工做。

splice 方法的參數傳入數量不的不一樣造成的效果也會不一樣。

首先它接受三個參數或甚至更多，除了開始位置索引 start 參數之外，其他全是可選參數。

start：刪除數組元素的開始索引

count：須要刪除元素的個數

item1，item2…：插入數組的元素

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

由於 splice 參數變化多樣，咱們主要從三個方面來展現 splice 的用法。

1. 如何刪除數組元素

傳遞一個參數的時候，數組會刪除從給定的索引到數組結束的全部元素，原數組會被修改，返回刪除的數組

//刪除元素
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]

已然明白，splice 方法是從 start 索引位置開始，刪除 count 個元素。如何不刪除元素呢？有些聰明的同窗確定已經知道那就是咱們的 count 爲 0 時，它就不會刪除任何元素，這個也爲咱們後面如何添加與替換元素提供了前提條件。

2. 如何添加數組元素

如何添加一個元素，這會就要用到咱們的第三個參數或者第四個，第五個等等，依次添加便可。

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

由於不對數組進行任何的刪除項，而後又在數組中插入一些元素，實現的數組的添加

3. 如何替換數組元素

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

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

來看看 splice 方法的兼容性如何

到目前位置連續五篇文章，咱們已經介紹了不少數組的一些方法，你會發現這些方法都是基於單個數組的增刪改甚至是合併，沒有數組與數組之間的一些方法，不過 Javascript 仍是爲咱們提供了一個方法就是能夠實現數組與數組之間的合併操做。

concat

用法很是簡單，就是用於兩個數組的合併，原有數組不發生改變，返回一個新的數組。

它接受的參數爲數組或者是值類型，參數的個數爲一個或者多個。

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

//鏈接兩個數組
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"]

//鏈接多個數組
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 方法的兼容性如何呢？

總結

到目前位置數組的系列文章以及介紹完畢，咱們系統以及完整的介紹了數組的一系列方法，經過一些例子介紹了每一個用法，甚至咱們把每一個方法的不少用法都有提到，不說可以應對全部應用場景把，至少在平常的開發過程當中足夠使用了。

數組雖說完了，可是咱們的故事尚未說玩，歡迎持續關注。

關注個人微信公衆號：六小登登，更多幹貨文章，歡迎一塊兒交流。
人人均可以成爲高手。我是一個會技術，又寫乾貨的碼農。歡迎勾搭。

系列文章列表：

1. 《Javascript數組系列一之棧與隊列》
2. 《Javascript數組系列二之迭代方法1》
3. 《Javascript數組系列三之迭代方法2》
4. 《Javascript數組系列四之數組的轉換與排序sort》
5. 《Javascript數組系列五之增刪改和強大的 splice()》