JavaScript之數組操作方法concat( )、slice( )、splice( )

learning 發布于2019-08-23 18:31 / 2140人閱讀

摘要：為什么炒冷飯了解這些方法就可以在很方業務場景使用，了解他們的用法也會帶來很大的遍歷這里我總結的是數組拼接法該方法基于當前數組創建一個新的數組副本，然后將參數添入該數組副本中的末尾，如果參數中包含一個或多個數組，該方法會將數組中的每一項都添加

為什么炒冷飯：

了解這些方法就可以在很方業務場景使用，了解他們的用法也會帶來很大的遍歷

concat( ) 這里我總結的是 數組拼接法

該方法基于當前數組創建一個 新的數組（副本），然后將參數添入該數組副本中的末尾，如果參數中包含一個或多個數組，該方法會將數組中的每一項都添加到結果中，沒有參數則只簡單創建一個新的數組副本。

let arr = [1, 2];

let newArr = arr.concat("3", 4);

let otherArr = arr.concat("3", [4, 5, "6"], {name: "Phoenix"});

console.log(newArr);  // [ 1, 2, "3", 4 ]

console.log(otherArr);  // [ 1, 2, "3", 4, 5, "6", { name: "Phoenix" } ]

如上代碼concat()中的參數可以是多種多樣的（Number，Array，Object，String...）等；

細心點看可以發現細節，我使用同一數組 arr 調用了 concat() 方法兩次；

如果你對 concat() 方法并不了解那么你肯恩對它給你返回對結果并不理想；

你可能認為最終結果是 [ 1, 2, "3", 4, "3", 4, 5, "6", { name: "Phoenix" } ]；

這里就要追溯到該方法會創建一個新的數組副本，也就是說concat()不會更改原來的數組；

slice( ) 這里我總結的是 數組截取法

該方法呢，接受一或兩個參數；

如果只傳遞一個參數就是指定開始截取數組的位置一直到數組末尾，然后 返回截取出來的值

說到這，必須提醒一下，slice() 方法不會操作原數組，不會操作原數組，不會操作愿數組；

那么繼續說，如果傳遞兩個參數的時候，第一個參數還是指定截取的開始位置，第二個參數則是結束位置（不包括結束位置的元素）；

let arr = [1, 2, 3, 4, 5];

let newArr = arr.slice(1);

let otherArr = arr.slice(1, 3);

console.log(newArr); // [ 2, 3, 4, 5 ]

console.log(otherArr);  // [ 2, 3 ]

console.log(arr); // [ 1, 2, 3, 4, 5 ]

上面代碼可以看出 newArr 是從 arr 數組中 index 為 1 的位置開始截取到末尾；

otherArr 是從 arr 數組中 index 為 1 開始到 index為 3（arr[3]結果是4），所以最終返回[2, 3]，該結果并不包括 4；

而最后我打印了原來的數組 arr 發現和原來并沒有任何變化；

腦洞大些的同學一定想到傳遞負值會有什么結果；

let arr = [1, 2, 3, 4, 5];

let newArr = arr.slice(-2);

console.log(newArr); // [ 4, 5 ]

從上面可以看出當參數為負值該方法會截取該數組最后 2 個元素；

好像和 Array.pop() 很像，但是區別在于前者返回一個數組，且不會改變原數組，而后者是返回單個元素，而且會改變原有元素；

接下來就是相對比較好用的且常用的splice()；

該方法接受三個參數（還可以更多，等下細說）；

第一個參數是下標值，將要操作當前數組內的第n項開始；

第二個參數是將要刪除的n個項；

第三個參數則是單個或多個將要插入的元素；

下面開始玩吧：

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(1);

console.log(newArr);  // [ 2, 3, 4, 5 ]

console.log(arr);  // [ 1 ]

可以看到，我只傳遞一個參數進去，和slice()方法沒有區別，細節就在于我為什么這次沒有一下調用該方法好幾次，就是因為，這個方法強大到，可以更改原來的數組；

可以看到我打印的 arr 數組中只剩下一個元素 1 了；

這次我再傳遞一個負值進去；

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(-1);

console.log(newArr);  // [ 5 ]

console.log(arr);  // [ 1, 2, 3, 4 ]

和想的一樣，只不過該方法更改了原數組；

那么傳遞 2 個參數看看；

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(1, 3);

console.log(newArr);  // [ 2, 3, 4 ]

console.log(arr);  // [ 1, 5 ]

比較直觀的看出從數組中的1開始截取，截取3個元素出來，那么這個結果沒有什么錯了，原數組也是想的一樣；

再看三個參數:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(1, 3, "5", {name: "Phoenix"}, [1, 2]);

console.log(newArr);  // [ 2, 3, 4 ]

console.log(arr);  // [ 1, 5, { name: "Phoenix" }, [ 1, 2 ], 5 ]

newArr還是老樣子，截取的和之前的一樣，但是后面我在之前的基礎上又加了3個參數；

也就是說該方法把之前刪除掉的元素換成了這些（"5", {name: "Phoenix"}, [1, 2]）；

還一點就是它也沒有像 concat() 一樣把所有參數展開再添加進去，而是原封不動的添加進來；

以上就是這些內容，希望對你學習 JavaScript 有所幫助，本人近期也在寫一些關于 TypeScript 的文章比較基礎細致，歡迎有問題指出。

GPU云服務器云服務器 slice和splice的區別數組操作方法 javascript數組方法 js數組操作方法

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105374.html

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

摘要：刪除數組元素的開始索引需要刪除元素的個數，插入數組的元素語法因為參數變化多樣，我們主要從三個方面來展示的用法。今天是我們介紹數組系列文章的第五篇，也是我們數組系列的最后一篇文章，只是數據系列的結束，所以大家不用擔心，我們會持續的更新干貨文章。生命不息，更新不止！今天我們就不那么多廢話了，直接干貨開始。我們在《Javascript數組系列一之棧與隊列》中描述我們是如何利用 pus...

chavesgu 2019-08-23 12:01 評論0 收藏0
《javascript高級程序設計》筆記：數組方法

摘要：如果傳遞給方法的是一或多個數組，則該方法會將這些數組中的每一項都添加到結果數組中。如果有兩個參數，該方法返回起始和結束位置之間的項，但不包括結束位置的項。為了實現排序，方法會調用每個數組項的轉型方法，然后比較得到的字符串，以確定如何排序。將數組轉換成字符串 join()能夠將數組用指定的字符分割成字符串方法用法變量的值表達式的值假設 arr = [1,2,3] ...

Aomine 2019-08-22 10:53 評論0 收藏0
JavaScript學習筆記之數組（二）

摘要：方法用于刪除原數組的一部分成員，并可以在刪除的位置添加新的數組成員，返回值是被刪除的元素。，這兩個方法，返回一個布爾值，表示判斷數組成員是否符合某種條件。該函數接受三個參數當前成員當前位置和整個數組，然后返回一個布爾值。數組基礎篇二數組對象 1.聲明數組的方法 Array是 JavaScript 的原生對象，同時也是一個構造函數，可以用它生成新的數組。 var arr =new A...

YPHP 2019-08-26 11:52 評論0 收藏0
讀Zepto源碼之集合操作

摘要：調用來獲取符合條件的集合元素，這在上篇文章讀源碼之神奇的已經有詳細的論述。然后調用方法來合并兩個集合，用內部方法來過濾掉重復的項，方法在讀源碼之內部方法已經有論述。最后也是返回一個集合。接下來幾個篇章，都會解讀 zepto 中的跟 dom 相關的方法，也即源碼 $.fn 對象中的方法。讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼...

pepperwang 2019-08-20 16:43 評論0 收藏0
javascript引用類型之Array 類型

摘要：如果你從一個框架向另一個框架傳入一個數組，那么傳入的數組與在第二個框架中原生創建的數組分別具有各自不同的構造函數。數組在javascript中是很常用的數據類型創建數組的幾種方式使用new操作符來創建數組 var arr = new Array() // []創建了一個長度為0的空數組 var arr1 = new Array(2) // [empty × 2]創建了一個長度...

lsxiao 2019-08-23 14:25 評論0 收藏0