如何在JavaScript中使用數(shù)組方法：Mutator方法

JavaScript中的數(shù)組由元素列表組成。JavaScript有許多有用的內(nèi)置方法來(lái)處理數(shù)組。修改原始數(shù)組的方法稱(chēng)為mutator方法，返回新值或表示的方法稱(chēng)為accessor方法。在本教程中，我們將重點(diǎn)介紹mutator方法。

數(shù)組與字符串相似，它們都由可通過(guò)索引號(hào)訪問(wèn)的一系列元素組成。但是，請(qǐng)務(wù)必記住，字符串是不可變的數(shù)據(jù)類(lèi)型，這意味著它們無(wú)法更改。

另一方面，數(shù)組是可變的，這意味著許多數(shù)組方法將影響原始數(shù)組，而不是數(shù)組的副本。

本教程將介紹添加和刪除元素，反轉(zhuǎn)，替換以及修改數(shù)組中元素的過(guò)程。

注意：數(shù)組方法正確地寫(xiě)為array.prototype.method()，因?yàn)閍rray.prototype引用Array對(duì)象本身一樣。為了簡(jiǎn)單起見(jiàn)，我們只需將名稱(chēng)列為method()。

isArray()

在介紹mutator方法之前，讓我們先看看isArray()方法，以測(cè)試對(duì)象是否是數(shù)組。這是一個(gè)布爾方法，如果變量的值等于數(shù)組，則返回true。如果對(duì)象不是數(shù)組，則此方法返回false。

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Test if fish variable is an arrayArray.isArray(fish);

輸出：

true

isArray()方法很有用，因?yàn)橥ǔＳ糜跍y(cè)試的typeof運(yùn)算符在與數(shù)組一起使用時(shí)返回object，有時(shí)需要知道對(duì)象和Array對(duì)象之間的區(qū)別。

注意，isArray()的寫(xiě)法與大多數(shù)數(shù)組方法不同，數(shù)組變量作為方法的參數(shù)提供。

現(xiàn)在，我們知道了如何檢查以確保對(duì)象是一個(gè)數(shù)組，接下來(lái)介紹mutator方法。

pop()

我們將看到的第一個(gè)mutator方法是pop()方法，該方法刪除數(shù)組末尾的最后一個(gè)元素。

我們先從fish數(shù)組開(kāi)始。

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

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

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

我們將調(diào)用數(shù)組以確保返回的數(shù)組沒(méi)有最后一項(xiàng)：

fish;

輸出：

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

我們已經(jīng)成功地從fish數(shù)組中移除“eel”。pop()方法不接受其他參數(shù)。

shift()

另一個(gè)mutator方法，shift()方法從數(shù)組的開(kāi)頭刪除第一個(gè)元素。

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

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

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

輸出：

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

在這個(gè)例子中，"piranha"被刪除了，每個(gè)項(xiàng)目都向下移動(dòng)了一個(gè)索引號(hào)。因此，通常最好盡可能使用pop()方法，因?yàn)槠渌麛?shù)組元素將保持它們的索引位置。

push()

mutator方法push()向數(shù)組的末尾添加一個(gè)或多個(gè)新元素。

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

為了在末尾添加一個(gè)項(xiàng)，我們將新元素作為函數(shù)的參數(shù)寫(xiě)入。

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

輸出：

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

也可以向數(shù)組中添加多個(gè)新值。例如，fish.push("swordfish", "dragonfish")?將向索引4和5添加項(xiàng)。

unshift()

mutator數(shù)組方法unshift()將一個(gè)或多個(gè)新元素添加到數(shù)組的開(kāi)頭。

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

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

輸出：

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

在上面的示例中，將“shark”被添加到索引位置0，將所有其他數(shù)組元素向后移動(dòng)一個(gè)。與shift()一樣，可以一次向數(shù)組中添加多個(gè)逗號(hào)分隔的項(xiàng)。

pop()和push()影響數(shù)組的結(jié)尾，而shift()和unshift()影響數(shù)組的開(kāi)始。記住這一點(diǎn)的一個(gè)簡(jiǎn)單方法是，記住shift()和unshift()將更改返回?cái)?shù)組的所有索引號(hào)

splice()

splice()方法可以從數(shù)組中的任何位置添加或刪除項(xiàng)目。mutator方法splice()可以添加或刪除，也可以同時(shí)添加和刪除。

splice()接受三個(gè)參數(shù)——起始索引號(hào)、要?jiǎng)h除的項(xiàng)數(shù)和要添加的項(xiàng)數(shù)(可選)。

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

splice(0, 0, "new")?將把字符串“new”添加到數(shù)組的開(kāi)頭，而不刪除任何內(nèi)容。

讓我們看下面的幾個(gè)示例，了解如何splice()添加和刪除數(shù)組中的項(xiàng)目。

使用splice()添加

如果我們將第二個(gè)參數(shù)（要?jiǎng)h除的項(xiàng)目）設(shè)置為0，splice()則會(huì)刪除零個(gè)項(xiàng)目。這樣，我們可以選擇僅添加從任何索引號(hào)開(kāi)始的項(xiàng)目，從而使splice()比push()或unshift()更強(qiáng)大，后者只向數(shù)組的末尾或開(kāi)頭添加項(xiàng)。

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Splice a new item number into index position 1fish.splice(1, 0, "manta ray");
fish;

輸出：

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

新字符串“manta ray”已添加到數(shù)組中，從索引1開(kāi)始。

使用splice()刪除

如果我們將第三個(gè)參數(shù)(要添加的項(xiàng))留空，我們可以簡(jiǎn)單地從數(shù)組中的任意點(diǎn)刪除一個(gè)項(xiàng)。

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items, starting at index position 1fish.splice(1, 2);
fish;

輸出：

[ 'piranha', 'eel' ]

我們從數(shù)組中刪除了兩項(xiàng)，從索引1，“barracuda”開(kāi)始。如果刪除第二個(gè)參數(shù)，則刪除數(shù)組末尾的所有項(xiàng)。

使用splice()添加和刪除

一次使用所有參數(shù)，我們就可以同時(shí)在數(shù)組中添加和刪除項(xiàng)目。

為了演示這一點(diǎn)，讓我們刪除與上面相同的項(xiàng)，并在它們的位置上添加一個(gè)新項(xiàng)。

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items and add onefish.splice(1, 2, "manta ray");
fish;

輸出：

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

splice()是修改數(shù)組任何部分的強(qiáng)大方法。注意，不要將splice()與slice()混淆，后者是一個(gè)訪問(wèn)器數(shù)組，它將復(fù)制數(shù)組的一部分。

reverse()

reverse()方法反轉(zhuǎn)數(shù)組中元素的順序。

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

使用reverse()，最后一個(gè)元素將是第一個(gè)元素，第一個(gè)元素將是最后一個(gè)元素。

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

輸出：

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

reverse()數(shù)組方法沒(méi)有參數(shù)。

fill()

fill()方法用靜態(tài)值替換數(shù)組中的所有元素。

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

在fish數(shù)組中，我們有四個(gè)項(xiàng)目。我們應(yīng)用fill()。

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

輸出：

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

數(shù)組中的所有四項(xiàng)都被替換為相同的值“shark”。fill()還接受起點(diǎn)和終點(diǎn)的可選參數(shù)。

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

使用fill()我們可以用靜態(tài)值替換數(shù)組中的一個(gè)或多個(gè)元素。

sort()

sort()方法根據(jù)元素中的第一個(gè)字符對(duì)數(shù)組中的元素進(jìn)行排序。在第一個(gè)字符相同的情況下，它將繼續(xù)向下并比較第二個(gè)字符，以此類(lèi)推。

默認(rèn)情況下，sort()將按字母順序排列的字符串?dāng)?shù)組全部為大寫(xiě)或小寫(xiě)。

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Sort items in arrayfish.sort();
fish;

輸出：

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

由于sort()基于第一個(gè)unicode字符，因此它將對(duì)大寫(xiě)的項(xiàng)目進(jìn)行排序，然后再對(duì)小寫(xiě)進(jìn)行排序。

讓我們修改原始數(shù)組，以使我們的字符串之一以大寫(xiě)字母開(kāi)頭。

let fish = [ "piranha", "barracuda", "Koi", "eel" ];
fish.sort();
fish;

輸出：

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

數(shù)字位于大寫(xiě)和小寫(xiě)字符之前。

我們可以再次修改數(shù)組以在一個(gè)字符串項(xiàng)中包含一個(gè)數(shù)字。

let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];
fish.sort();

輸出：

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

sort()默認(rèn)情況下不會(huì)按大小對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序。相反，它將只檢查數(shù)字中的第一個(gè)字符。

let numbers = [ 42, 23, 16, 15, 4, 8 ];
numbers.sort();

輸出：

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

為了正確地對(duì)數(shù)字進(jìn)行排序，您可以創(chuàng)建一個(gè)比較函數(shù)作為參數(shù)。

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

輸出：

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

sortNumerically比較函數(shù)允許我們按照預(yù)期進(jìn)行排序。sort()將把更改應(yīng)用到原始數(shù)組。

結(jié)論

在本教程中，我們回顧了javascript中的主要mutator數(shù)組方法。mutator方法修改它們使用的原始數(shù)組，而不是創(chuàng)建類(lèi)似于copy的訪問(wèn)器方法。我們學(xué)習(xí)了如何在數(shù)組的開(kāi)頭或結(jié)尾添加和刪除元素，以及排序、反轉(zhuǎn)和替換數(shù)組項(xiàng)的值。

本文完~