JavaScript中的陣列由元素列表組成。JavaScript有許多有用的內建方法來處理陣列。修改原始陣列的方法稱為mutator方法，返回新值或表示的方法稱為accessor方法。在本教程中，我們將重點介紹mutator方法。

陣列與字串相似，它們都由可通過索引號訪問的一系列元素組成。但是，請務必記住，字串是不可變的資料型別，這意味著它們無法更改。

另一方面，陣列是可變的，這意味著許多陣列方法將影響原始陣列，而不是陣列的副本。

本教程將介紹新增和刪除元素，反轉，替換以及修改陣列中元素的過程。

isArray()

在介紹mutator方法之前，讓我們先看看isArray()方法，以測試物件是否是陣列。這是一個布林方法，如果變數的值等於陣列，則返回true。如果物件不是陣列，則此方法返回false。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Test if fish variable is an array
Array.isArray(fish);

輸出：

true

isArray()方法很有用，因為通常用於測試的typeof運算子在與陣列一起使用時返回object，有時需要知道物件和Array物件之間的區別。

注意，isArray()的寫法與大多數陣列方法不同，陣列變數作為方法的引數提供。

現在，我們知道了如何檢查以確保物件是一個數組，接下來介紹mutator方法。

pop()

我們將看到的第一個mutator方法是pop()方法，該方法刪除陣列末尾的最後一個元素。

我們先從fish陣列開始。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

為了刪除最後一項，讓我們初始化pop()方法。在本例中，它將是字串文字“eel”。

// Use pop method to remove an item from the end of an array
fish.pop();

我們將呼叫陣列以確保返回的陣列沒有最後一項：

fish;
 

輸出：

[ 'piranha', 'barracuda', 'koi' ]

我們已經成功地從fish陣列中移除“eel”。pop()方法不接受其他引數。

shift()

另一個mutator方法，shift()方法從陣列的開頭刪除第一個元素。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

我們將使用shift()從索引0中刪除"piranha"，並將所有其他元素下移一個索引號。

// Use shift method to remove an item from the beginning of an array
fish.shift();

fish;

輸出：

[ 'barracuda', 'koi', 'eel' ]

在這個例子中，"piranha"被刪除了，每個專案都向下移動了一個索引號。因此，通常最好儘可能使用pop()方法，因為其他陣列元素將保持它們的索引位置。

push()

mutator方法push()向陣列的末尾新增一個或多個新元素。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

為了在末尾新增一個項，我們將新元素作為函式的引數寫入。

// Use push method to add an item to the end of an array
fish.push("swordfish");

fish;

輸出：

[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]

也可以向陣列中新增多個新值。例如，fish.push("swordfish", "dragonfish") 將向索引4和5新增項。

unshift()

mutator陣列方法unshift()將一個或多個新元素新增到陣列的開頭。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Use unshift method to add an item to the beginning of an array
fish.unshift("shark");
fish;

輸出：

[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]

在上面的示例中，將“shark”被新增到索引位置0，將所有其他陣列元素向後移動一個。與shift()一樣，可以一次向陣列中新增多個逗號分隔的項。

pop()和push()影響陣列的結尾，而shift()和unshift()影響陣列的開始。記住這一點的一個簡單方法是，記住shift()和unshift()將更改返回陣列的所有索引號

splice()

splice()方法可以從陣列中的任何位置新增或刪除專案。mutator方法splice()可以新增或刪除，也可以同時新增和刪除。

splice()接受三個引數——起始索引號、要刪除的項數和要新增的項數(可選)。

splice(index number, number of items to remove, items to add)

splice(0, 0, "new") 將把字串“new”新增到陣列的開頭，而不刪除任何內容。

讓我們看下面的幾個示例，瞭解如何splice()新增和刪除陣列中的專案。

使用splice()新增

如果我們將第二個引數（要刪除的專案）設定為0，splice()則會刪除零個專案。這樣，我們可以選擇僅新增從任何索引號開始的專案，從而使splice()比push()或unshift()更強大，後者只向陣列的末尾或開頭新增項。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Splice a new item number into index position 1
fish.splice(1, 0, "manta ray");

fish;

輸出：

[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ]

新字串“manta ray”已新增到陣列中，從索引1開始。

使用splice()刪除

如果我們將第三個引數(要新增的項)留空，我們可以簡單地從陣列中的任意點刪除一個項。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Remove two items, starting at index position 1
fish.splice(1, 2);

fish;

輸出：

[ 'piranha', 'eel' ]

我們從陣列中刪除了兩項，從索引1，“barracuda”開始。如果刪除第二個引數，則刪除陣列末尾的所有項。

使用splice()新增和刪除

一次使用所有引數，我們就可以同時在陣列中新增和刪除專案。

為了演示這一點，讓我們刪除與上面相同的項，並在它們的位置上新增一個新項。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Remove two items and add one
fish.splice(1, 2, "manta ray");

fish;

輸出：

[ 'piranha', 'manta ray', 'eel' ]

splice()是修改陣列任何部分的強大方法。注意，不要將splice()與slice()混淆，後者是一個訪問器陣列，它將複製陣列的一部分。

reverse()

reverse()方法反轉陣列中元素的順序。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

使用reverse()，最後一個元素將是第一個元素，第一個元素將是最後一個元素。

// Reverse the fish array
fish.reverse();

fish;

輸出：

[ 'eel', 'koi', 'barracuda', 'piranha' ]

reverse()陣列方法沒有引數。

fill()

fill()方法用靜態值替換陣列中的所有元素。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

在fish陣列中，我們有四個專案。我們應用fill()。

// Replace all values in the array with "shark"
fish.fill("shark");

fish;

輸出：

[ 'shark', 'shark', 'shark', 'shark' ]

陣列中的所有四項都被替換為相同的值“shark”。fill()還接受起點和終點的可選引數。

fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]

使用fill()我們可以用靜態值替換陣列中的一個或多個元素。

sort()
sort()方法根據元素中的第一個字元對陣列中的元素進行排序。在第一個字元相同的情況下，它將繼續向下並比較第二個字元，以此類推。

預設情況下，sort()將按字母順序排列的字串陣列全部為大寫或小寫。

輸出：

[ 'barracuda', 'eel', 'koi', 'piranha' ]

由於sort()基於第一個unicode字元，因此它將對大寫的專案進行排序，然後再對小寫進行排序。

讓我們修改原始陣列，以使我們的字串之一以大寫字母開頭。

let fish = [ "piranha", "barracuda", "Koi", "eel" ];

fish.sort();

fish;

輸出：

[ 'Koi', 'barracuda', 'eel', 'piranha' ]

數字位於大寫和小寫字元之前。

我們可以再次修改陣列以在一個字串項中包含一個數字。

let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];

fish.sort();

輸出：

[ '1 eel', 'Koi', 'barracuda', 'piranha' ]

sort()預設情況下不會按大小對數字陣列進行排序。相反，它將只檢查數字中的第一個字元。

let numbers = [ 42, 23, 16, 15, 4, 8 ];

numbers.sort();

輸出：

[ 15, 16, 23, 4, 42, 8 ]

為了正確地對數字進行排序，您可以建立一個比較函式作為引數。

// Function to sort numbers by size
const sortNumerically = (a, b) => {
  return a - b;
}

numbers.sort(sortNumerically);

輸出：

[ 4, 8, 15, 16, 23, 42 ]

sortNumerically比較函式允許我們按照預期進行排序。sort()將把更改應用到原始陣列。

結論

在本教程中，我們回顧了javascript中的主要mutator陣列方法。mutator方法修改它們使用的原始陣列，而不是建立類似於copy的訪問器方法。我們學習瞭如何在陣列的開頭或結尾新增和刪除元素，以及排序、反轉和替換陣列項的值。

本文完~