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

chavesgu 發(fā)布于2019-08-23 12:01 / 1695人閱讀

摘要：刪除數組元素的開始索引需要刪除元素的個數，插入數組的元素語法因為參數變化多樣，我們主要從三個方面來展示的用法。

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

生命不息，更新不止！

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

我們在《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 方法的兼容性如何

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

concat

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

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

//語法
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 方法的兼容性如何呢？

總結

到目前位置數組的系列文章以及介紹完畢，我們系統以及完整的介紹了數組的一系列方法，通過一些例子介紹了每個用法，甚至我們把每個方法的很多用法都有提到，不說能夠應對所有應用場景把，至少在日常的開發(fā)過程中足夠使用了。

數組雖然說完了，但是我們的故事還沒有說玩，歡迎持續(xù)關注。

關注微信公眾號：六小登登。領取全套學習資源

系列文章列表：

《Javascript數組系列一之棧與隊列》

《Javascript數組系列二之迭代方法1》

《Javascript數組系列三之迭代方法2》

《Javascript數組系列四之數組的轉換與排序sort》

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

GPU云服務器云服務器 slice和splice的區(qū)別 js數組splice用法數組增刪改查c語言 javascript專題系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/97862.html

node express mongoose簡單實現全棧之增刪改查

摘要：作為一個有志向的前端，怎么能不搞搞全棧呢。。。地址歡迎大家多多交流前端技術啊，如果大家喜歡的話，請給我一個小小的哦作為一個有志向的前端，怎么能不搞搞全(zhuang)棧(bi)呢。。。說搞咱就搞啊，后端就用node，數據庫就用mongodb，前端呢，呃，再搞個node的web框架express，思路搞定，開始搭建我們的環(huán)境，搭建之前還是先看看我們的目標和成果項目的目標和成果 sh...

AndroidTraveler 2019-08-22 17:16 評論0 收藏0
吐槽Javascript系列二：數組中的splice和slice方法

摘要：原來，它的替換功能實際上是通過刪除和添加來完成的。在只有一個參數的情況下，方法返回從該參數指定位置開始到當前數組末尾的所有項。它并不改變原數組。吐槽我曾經一直困惑數組中的刪除方法，當知道刪除這項偉大的任務竟然交給了，我心里是失望的。戰(zhàn)斗英雄你當，漂亮媳婦兒你娶，怎么啥好事都被你給占了——《激情燃燒的歲月》談起這兩個方法，新手不蒙，我是不信！正如吐槽Javascript系列一：sli...

lookSomeone 2019-08-23 15:14 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經是相關最多的開源項目了，體現出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經是相關最多的開源項目了，體現出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0
吐槽Javascript系列三：數組的陷阱

摘要：雖然本系列是吐槽，但并不是為了黑，而是揭露它的一些特性怪癖，只有更好的了解它，才能更好的使用它。本篇主要介紹數組中常見的隱患點。雖然本系列是吐槽，但并不是為了黑Javascript，而是揭露它的一些特性（怪癖），只有更好的了解它，才能更好的使用它。本篇主要介紹數組中常見的隱患點。龜速的map 在數組中，map是一個功能很強大的方法，先來見識一下： let arr = [5, 2, ...

U2FsdGVkX1x 2019-08-23 15:24 評論0 收藏0