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

介绍

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

为了充分利用本教程，您应该熟悉创建，索引，修改和循环数组，您可以在“ 了解JavaScript中的数组”一节中查看。

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

本教程将通过添加和删除元素，反转，替换或以其他方式修改数组中的元素。

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

IsArray的()

在我们进入mutator方法之前，我们来看看isArray()方法来测试对象是否是数组。 这是一个布尔方法，如果变量的值等于数组，则返回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 array方法将一个新的元素添加到数组的开头。

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 ，将所有其他数组元素移位1。 与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()是一个mutator方法，并将更改应用于原始数组。

结论

在本课中，我们回顾了JavaScript中的主要mutator数组方法。 数组方法是非常多样化和有用的，允许您添加，删除，插入和突变数组。

要查看数组的基础知识，请阅读JavaScript中的“了解数组” 。 要查看所有数组方法的完整列表，请查看Mozilla Developer Network上的Array引用 。