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

来源:https://www.cnblogs.com/beevesnoodles/archive/2018/09/18/9667303.html
-Advertisement-
Play Games

今天是我們介紹數組系列文章的第五篇，也是我們數組系列的最後一篇文章，只是數據系列的結束，所以大家不用擔心，我們會持續的更新乾貨文章。 生命不息，更新不止！ 今天我們就不那麼多廢話了，直接乾貨開始。 我們在《Javascript數組系列一之棧與隊列》中描述我們是如何利用 push、pop、shift、 ...


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

生命不息，更新不止！

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

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

總結

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

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

本文原創文章發佈於微信公眾號：Modeng。關註並回覆 「前端書籍」百本經典技術書籍免費領取，你懂的！

系列文章列表：

  1. 《Javascript數組系列一之棧與隊列》
  2. 《Javascript數組系列二之迭代方法1》
  3. 《Javascript數組系列三之迭代方法2》
  4. 《Javascript數組系列四之數組的轉換與排序sort》
  5. 《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 方法值得我們註意的地方，如果大家掌握了這些知識，那麼將會很好的使用它。
最後，我們來看一看它的相容問題
![](http://pd9zyk72v.bkt.clouddn.com/tostring-polyfill.png)
#### 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 方法的相容性如何
![](http://pd9zyk72v.bkt.clouddn.com/tostring-polyfill.png)

到目前位置連續五篇文章，我們已經介紹了很多數組的一些方法，你會發現這些方法都是基於單個數組的增刪改甚至是合併，沒有數組與數組之間的一些方法，不過 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 方法的相容性如何呢？
![](http://pd9zyk72v.bkt.clouddn.com/tostring-polyfill.png)

### 總結
到目前位置數組的系列文章以及介紹完畢，我們系統以及完整的介紹了數組的一系列方法，通過一些例子介紹了每個用法，甚至我們把每個方法的很多用法都有提到，不說能夠應對所有應用場景把，至少在日常的開發過程中足夠使用了。
數組雖然說完了，但是我們的故事還沒有說玩，歡迎持續關註。
**本文原創文章發佈於微信公眾號：Modeng。關註並回覆 「前端書籍」百本經典技術書籍免費領取，你懂的！**
系列文章列表：
1. [《Javascript數組系列一之棧與隊列》](https://www.modenng.com/2018/09/06/array-push-pop-tutorial/)2. [《Javascript數組系列二之迭代方法1》](https://www.modenng.com/2018/09/10/array-foreach-map-filter-tutorial/)3. [《Javascript數組系列三之迭代方法2》](https://www.modenng.com/2018/09/12/array-reduce-find-indexof-tutorial/)4. [《Javascript數組系列四之數組的轉換與排序sort》](https://www.modenng.com/2018/09/15/array-sort-join-tostring-tutorial/)5. [《Javascript數組系列五之增刪改和強大的 splice()》](https://www.modenng.com/2018/09/17/array-slice-splice-concat-tutorial/)



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • axios
    最近通過 Vuejs 重構旅游頁面項目使用到 axios 獲取數據。對照官方文檔，簡要記錄一些 axios 的使用方法和特性，方便日後參考和查閱。 axios 基於 promise 用於瀏覽器和 node.js 的 http 客戶端 安裝 npm 安裝 通過 cdn 引入 用法 執行 GET 請求 ...
  • html 之 position用法
    在此，先做聲明，本篇僅是摘錄自互聯網，個人認為這篇文章講的很不錯，附於此地與大家共同欣賞。 position的四個屬性值：1.relative2.absolute3.fixed4.static下麵分別講述這四個屬性。<div id="parent"> <div id="sub1">sub1</div ...
  • javascript （六）DOM
    學習後的總結： DOM：document object model 關於DOM的簡介：http://www.w3school.com.cn/htmldom/dom_intro.asp 本文說的是HTML DOM 的一些操作： DOM樹：DOM樹將HTML文檔體現為樹狀，DOM樹中有很多節點； DOM ...
  • Session過期，跳出iframe框架頁顯示會話過期頁面
    web開發中經常會有這種情況，在一個主頁面中包含側邊導航菜單和iframe，點擊菜單項，對應頁面會在iframe中顯示，整個頁面不會刷新。但是如果設置了會話Session,在會話過期後再操作會自動redirect重定向到登錄頁面，經常會出現在session過期後，再點擊菜單項，登錄頁面顯示在ifra ...
  • H5混合開發進階之inspect調試
    h5界面嵌套在原生app內部的時候，需要調用原生的方法，傳遞數據。中間難以調試代碼，。 用google的 inspect調試。查看數據的傳輸方式。 1、adb連接正常，打開手機USB調試 2、第一次使用的時候一定要保證翻牆！翻牆！翻牆 （不懂的可以問我） 3、谷歌瀏覽器中打開chrome://ins ...
  • javascript函數定義以及常見用法
    我們知道，js函數有多種寫法，函數聲明 ，函數表達式，Function式構造函數，自執行函數，包括Es6的箭頭函數，Class類寫法,高階函數，函數節流/函數防抖，下麵我就開始講關於上面幾種類型的最基本用法。 函數聲明式寫法 這種寫法是最基本的寫法 ，使用關鍵字 function 定義函數，函數聲明 ...
  • spa 小程式的研發隨筆 (1) --- 前言
    半年前跳槽, 新公司主要研發傾向於小程式的開發。由於之前並沒有接觸小程式，所以經過半年的實際開發，才敢來做一點筆記。 小程式提供很多組件給開發者使用，但是，實際使用中還是會有很多的問題。 老生常談的不能使用npm開發??? (雖然，已知的很多小程式框架可以實現。例如：mpvue等。但是讓我們先討論討 ...
  • JavaScript中Array的正確使用方式
    在 JavaScript 中正確使用地使用 Array 的方法如下： 用 Array.includes 代替 Array.indexOf “如果你要在數組中查找元素，請使用 Array.indexOf”。 MDN 文檔寫道，Array.indexOf 將“返回第一次出現給定元素的索引”。因此，如果我 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類