介绍
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 参考。