javascript中的数组由元素列表组成。javascript有许多有用的内置方法来处理数组。修改原始数组的方法称为mutator
accessor方法
为了充分利用本教程,您应该对数组的创建,索引,修改和循环有一定的了解,您可以在《了解JavaScript中的数组》教程中进行阅读。
数组与字符串相似,它们都由可通过索引号访问的一系列元素组成。但是,请务必记住,字符串是不可变的数据类型,这意味着它们无法更改。另一方面,数组是可变的,这意味着许多数组方法将影响原始数组,而不是数组的副本。
本教程将介绍添加和删除元素,反转,替换以及修改数组中元素的过程。
注意:数组方法正确地写为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);
输出:
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 array
fish.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 array
fish.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 array
fish.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 array
fish.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 1
fish.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 1
fish.splice(1, 2);
fish;
输出:
[ 'piranha', 'eel' ]
我们从数组中删除了两项,从索引1
,“barracuda”
开始。如果删除第二个参数,则删除数组末尾的所有项。
使用splice()添加和删除
一次使用所有参数,我们就可以同时在数组中添加和删除项目。
为了演示这一点,让我们删除与上面相同的项,并在它们的位置上添加一个新项。
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items and add one
fish.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 array
fish.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 array
fish.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 size
const sortNumerically = (a, b) => {
return a - b;
}
numbers.sort(sortNumerically);
输出:
[ 4, 8, 15, 16, 23, 42 ]
sortNumerically
比较函数允许我们按照预期进行排序。sort()
将把更改应用到原始数组。
结论
在本教程中,我们回顾了javascript中的主要mutator数组方法。mutator方法修改它们使用的原始数组,而不是创建类似于copy的访问器方法。我们学习了如何在数组的开头或结尾添加和删除元素,以及排序、反转和替换数组项的值。