如何在JavaScript中使用数组方法：Mutator方法

介绍

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

为了充分利用本教程，您应该熟悉数组的创建、索引、修改和循环，您可以在教程 Understanding Arrays in JavaScript 中查看这些内容。

数组与 strings 相似，因为它们都由可以通过索引号访问的元素序列组成。 但是，重要的是要记住字符串是不可变的数据类型，这意味着它们不能更改。 另一方面，数组是可变的，这意味着许多数组方法会影响原始数组，而不是数组的副本。

本教程将介绍添加和删除元素、反转、替换和以其他方式修改数组中的元素。

注意： 数组方法正确写为 Array.prototype.method()，因为 Array.prototype 指的是 Array 对象本身。 为简单起见，我们将简单地将名称列为 method()。

是数组（）

在我们进入 mutator 方法之前，让我们看一下 isArray() 方法来测试对象是否是数组。 这是一个 Boolean 方法，如果变量的值等于数组，则返回 true。 如果对象不是数组，则此方法返回 false。

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

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

Outputtrue

isArray() 方法很有用，因为我们通常用于测试的 typeof 运算符在与数组一起使用时返回 object，并且有时知道对象和 Array 对象是必需的。

请注意，isArray() 的写法与大多数数组方法不同，数组变量作为方法的参数提供。

现在我们知道如何检查以确保一个对象是一个数组，让我们继续讨论 mutator 方法。

流行音乐（）

我们将看到的第一个 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;

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

我们已经成功地从 fish 数组中删除了 "eel"。 pop() 方法不接受额外的参数。

转移（）

另一种 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;

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

在此示例中，"piranha" 已被删除，并且每个项目已向下移动一个索引号。 出于这个原因，通常最好尽可能使用 pop() 方法，因为其他数组元素将保持它们的索引位置。

推（）

push() mutator 方法将一个或多个新元素添加到数组的末尾。

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

为了在最后添加一个项目，我们将新元素写为函数的参数。

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

fish;

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

也可以向数组添加多个新值。 例如，fish.push("swordfish", "dragonfish") 会将项目添加到索引 4 和 5。

取消移位（）

unshift() mutator 数组方法将一个或多个新元素添加到数组的开头。

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

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

fish;

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

在上面的示例中，"shark" 被添加到索引位置 0 中，将所有其他数组元素移动了一个。 与 shift() 一样，您可以一次将多个逗号分隔的项目添加到数组中。

pop() 和 push() 影响数组的结尾，而 shift() 和 unshift() 影响数组的开头。 记住这一点的一个简单方法是记住 shift() 和 unshift() 将更改返回数组的所有索引号

拼接（）

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;

Output[ '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;

Output[ 'piranha', 'eel' ]

我们从数组中删除了两项，从索引 1、"barracuda" 开始。 如果第二个参数被删除，则数组末尾的所有项目都将被删除。

使用 splice() 添加和删除

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

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

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

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

fish;

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

splice() 是修改数组任何部分的强大方法。 请注意，不要将 splice() 与 slice() 混淆，后者是访问器数组，它将复制数组的一部分。

逆转（）

reverse() 方法反转数组中元素的顺序。

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

使用 reverse()，最后一个元素将是第一个，第一个元素将是最后一个。

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

fish;

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

reverse() 数组方法没有参数。

填（）

fill() 方法将数组中的所有元素替换为静态值。

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

在 fish 数组中，我们有四个项目。 让我们应用 fill()。

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

fish;

Output[ '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() 将按字母顺序排列一个全部为大写或小写的字符串数组。

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

// Sort items in array
fish.sort();

fish;

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

由于 sort() 基于第一个 unicode 字符，它会将大写项目排在小写之前。

让我们修改我们的原始数组，以便我们的字符串之一以大写字母开头。

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

fish.sort();

fish;

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

数字位于大写和小写字符之前。

我们可以再次修改数组以在其中一个字符串项中包含一个数字。

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

fish.sort();

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

sort() 默认不会按大小对数字数组进行排序。 相反，它只会检查数字中的第一个字符。

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

numbers.sort();

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

为了正确排序数字，您可以创建一个比较函数作为参数。

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

numbers.sort(sortNumerically);

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

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

结论

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

要复习数组的基础知识，请阅读 Understanding Arrays in JavaScript。 要查看所有数组方法的完整列表，请查看 Mozilla Developer Network 上的 Array 参考。