如何在JavaScript中使用数组方法：Mutator方法[通俗易懂]

JavaScript中的数组由元素列表组成。JavaScript有许多有用的内置方法来处理数组。修改原始数组的方法称为mutator方法，返回新值或表示的方法称为accessor方法。在本教程中，我们将重点介绍mutator方法。

数组与字符串相似，它们都由可通过索引号访问的一系列元素组成。但是，请务必记住，字符串是不可变的数据类型，这意味着它们无法更改。

另一方面，数组是可变的，这意味着许多数组方法将影响原始数组，而不是数组的副本。

本教程将介绍添加和删除元素，反转，替换以及修改数组中元素的过程。

注意：数组方法正确地写为array.prototype.method()，因为array.prototype引用Array对象本身一样。为了简单起见，我们只需将名称列为method()。

isArray()

在介绍mutator方法之前，让我们先看看isArray()方法，以测试对象是否是数组。这是一个布尔方法，如果变量的值等于数组，则返回true。如果对象不是数组，则此方法返回false。

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Test if fish variable is an arrayArray.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 arrayfish.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 arrayfish.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 arrayfish.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 arrayfish.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 1fish.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 1fish.splice(1, 2);
fish;

输出：

[ 'piranha', 'eel' ]

我们从数组中删除了两项，从索引1，“barracuda”开始。如果删除第二个参数，则删除数组末尾的所有项。

使用splice()添加和删除

一次使用所有参数，我们就可以同时在数组中添加和删除项目。

为了演示这一点，让我们删除与上面相同的项，并在它们的位置上添加一个新项。

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items and add onefish.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 arrayfish.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()将按字母顺序排列的字符串数组全部为大写或小写。

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

输出：

[ '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 sizeconst sortNumerically = (a, b) => {  return a - b;}
numbers.sort(sortNumerically);

输出：

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

sortNumerically比较函数允许我们按照预期进行排序。sort()将把更改应用到原始数组。

结论

在本教程中，我们回顾了javascript中的主要mutator数组方法。mutator方法修改它们使用的原始数组，而不是创建类似于copy的访问器方法。我们学习了如何在数组的开头或结尾添加和删除元素，以及排序、反转和替换数组项的值。

本文完~