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

learning 發(fā)布于2019-08-23 18:31 / 2158人閱讀

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

為什么炒冷飯：

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

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

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

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()中的參數(shù)可以是多種多樣的（Number，Array，Object，String...）等；

細心點看可以發(fā)現(xiàn)細節(jié)，我使用同一數(shù)組 arr 調用了 concat() 方法兩次；

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

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

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

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

該方法呢，接受一或兩個參數(shù)；

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

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

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

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 數(shù)組中 index 為 1 的位置開始截取到末尾；

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

而最后我打印了原來的數(shù)組 arr 發(fā)現(xiàn)和原來并沒有任何變化；

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

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

let newArr = arr.slice(-2);

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

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

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

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

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

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

第二個參數(shù)是將要刪除的n個項；

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

下面開始玩吧：

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

let newArr = arr.splice(1);

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

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

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

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

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

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

let newArr = arr.splice(-1);

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

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

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

那么傳遞 2 個參數(shù)看看；

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

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

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

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

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

再看三個參數(shù):

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個參數(shù)；

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

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

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

GPU云服務器云服務器 slice和splice的區(qū)別數(shù)組操作方法 javascript數(shù)組方法 js數(shù)組操作方法

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

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

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

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

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

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

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

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

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

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