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

爲何炒冷飯：

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

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 的文章比較基礎細緻，歡迎有問題指出。