介绍
Arrays在JavaScript中由一个元素列表组成。JavaScript具有许多有用的内置方法来工作与数组. 修改原始数组的方法被称为 mutator方法,而返回新值或表示的方法被称为 accessor方法。
为了充分利用本教程,您应该熟悉创建,索引,修改和循环数组,您可以在教程中审查 理解JavaScript中的数组。
字符串类似于 字符串,因为它们都由一个可以通过索引号访问的元素序列组成,但是,重要的是要记住,字符串是一种不可变的数据类型,这意味着它们不能更改。
本教程将包括添加和删除元素、逆转、更换和其他修改数组中的元素。
<$>[注]
注: Array 方法被正确地编写为 Array.prototype.method(),因为 Array.prototype 指的是 Array 对象本身。
( )
在我们进入突变方法之前,让我们看看 isArray() 方法来测试对象是否是数组. 这是一个 Boolean 方法,如果变量的值等于数组,则返回 `true'。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
2
3// Test if fish variable is an array
4Array.isArray(fish);
1[secondary_label Output]
2true
isArray()方法是有用的,因为我们通常用来测试的typeof运算器在使用数组时会返回object,有时需要知道对象和Array对象之间的区别。
请注意, isArray() 与大多数数组方法不同,数组变量作为方法的参数提供。
现在我们知道如何检查一个对象是否是一个数组,让我们转到突变方法。
( )
我们将研究的第一个突变方法是pop()方法,它从数组的末尾删除最后一个元素。
我们将从我们的鱼阵列开始。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
让我们初始化pop()方法以删除最后一个项目,在这种情况下,它将是字面字母字符串eel。
1// Use pop method to remove an item from the end of an array
2fish.pop();
我们将拨打我们的数组,以确保数组没有最后一个项目返回:
1fish;
1[secondary_label Output]
2[ 'piranha', 'barracuda', 'koi' ]
我们已经成功地从fish数组中删除了eel。
转换( )
另一种突变方法,‘shift()’方法将第一个元素从数组的开始中移除。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
我们将使用shift()从索引0中删除piranha并将所有其余元素以一个索引数转移。
1// Use shift method to remove an item from the beginning of an array
2fish.shift();
3
4fish;
1[secondary_label Output]
2[ 'barracuda', 'koi', 'eel' ]
在这个例子中,piranha已被删除,每个项目都将一个索引号移动下来,因此,通常最好在可能时使用pop()方法,因为其他数组元素将保持其索引位置。
推( )
Push() 突变方法将新元素或元素添加到数组的末尾。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
为了在最后添加一个元素,我们将新元素写成函数的参数。
1// Use push method to add an item to the end of an array
2fish.push("swordfish");
3
4fish;
1[secondary_label Output]
2[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]
例如,fish.push(剑鱼,龙鱼)将添加到索引4和5中的项目。
( )
unshift()突变数组方法将新元素或元素添加到一个数组的开始。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
1// Use unshift method to add an item to the beginning of an array
2fish.unshift("shark");
3
4fish;
1[secondary_label Output]
2[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]
在上面的示例中,鲨鱼被添加到索引位置0,将所有其他数组元素逐一移动。
pop()和push()会影响数组的结尾,而shift()和unshift()会影响数组的开始。
( )
splice()方法可以从一个数组中的任何位置添加或删除一个项目,而splice()方法可以同时添加或删除,也可以同时添加和删除。
splice()需要三个参数 - 指数号从开始,删除的项目数量和添加的项目(可选)。
1splice(index number, number of items to remove, items to add)
splice(0,0,新)将添加字符串 新 到一个数组的开始,而没有删除任何东西。
让我们看看下面的几个例子,看看如何splice()可以添加和删除数组中的项目。
添加Splice( )
如果我们将我们的第二个参数(要删除的项目)设置为0,那么splice()将删除零项,这样我们就可以选择只添加一个从任何索引号开始的项目,使splice()比push()或unshift()更强大,这些项目只会添加到数组的结尾或开始。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
2
3// Splice a new item number into index position 1
4fish.splice(1, 0, "manta ray");
5
6fish;
1[secondary_label Output]
2[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ]
新的字符串manta ray已被添加到数组中,从索引1开始。
用「Splice()」删除
如果我们将第三个参数(要添加的项目)留空,我们可以简单地从数组的任何点删除一个项目。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
2
3// Remove two items, starting at index position 1
4fish.splice(1, 2);
5
6fish;
1[secondary_label Output]
2[ 'piranha', 'eel' ]
我们从数组中删除了两个项目,从索引 1 开始, barracuda. 如果删除第二个参数,将删除数组末尾的所有项目。
添加和删除splice()
同时使用所有参数,我们可以同时从数组中添加和删除项目。
为了证明这一点,让我们像上面一样删除相同的项目,并在其位置上添加一个新的项目。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
2
3// Remove two items and add one
4fish.splice(1, 2, "manta ray");
5
6fish;
1[secondary_label Output]
2[ 'piranha', 'manta ray', 'eel' ]
splice() 是修改数组的任何部分的强大方法. 请注意, splice() 不能与 slice() 混淆,这是一种附加数组,它会复制数组的一部分。
相反( )
反向()方法可逆转数组中的元素的顺序。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
使用反向(),最后一个元素将是第一个元素,第一个元素将是最后一个元素。
1// Reverse the fish array
2fish.reverse();
3
4fish;
1[secondary_label Output]
2[ 'eel', 'koi', 'barracuda', 'piranha' ]
反向()数组方法没有参数。
加油( )
‘fill()’ 方法将数组中的所有元素替换为静态值。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
在鱼数组中,我们有四个项目,让我们应用fill()。
1// Replace all values in the array with "shark"
2fish.fill("shark");
3
4fish;
1[secondary_label Output]
2[ 'shark', 'shark', 'shark', 'shark' ]
数组中的所有四个项目都被相同的值所取代,即鲨鱼。
1fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
2fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]
使用fill(),我们可以用静态值代替一个或多个数组中的元素。
( )
sort() 方法会根据元素中的第一个字符对数组中的元素进行排序.如果第一个字符是相同的,它将继续沿线并比较第二个字符等等。
默认情况下, sort() 将字母化一个数组的字符串,这些字符串都是 uppercase 或 lowercase。
1let fish = [ "piranha", "barracuda", "koi", "eel" ];
2
3// Sort items in array
4fish.sort();
5
6fish;
1[secondary_label Output]
2[ 'barracuda', 'eel', 'koi', 'piranha' ]
由于sort()是基于第一个 unicode 字符的,所以它会将上级项目排序为下级。
让我们修改我们的原始数组,以便我们的一个字符串以上层字母开始。
1let fish = [ "piranha", "barracuda", "Koi", "eel" ];
2
3fish.sort();
4
5fish;
1[secondary_label Output]
2[ 'Koi', 'barracuda', 'eel', 'piranha' ]
数字在上层和下层字符之前出现。
我们可以再次修改数组,以便在一个字符串项目中包含一个数字。
1let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];
2
3fish.sort();
1[secondary_label Output]
2[ '1 eel', 'Koi', 'barracuda', 'piranha' ]
sort() 不会默认地按大小对数组进行排序,而是只会检查数字中的第一个字符。
1let numbers = [ 42, 23, 16, 15, 4, 8 ];
2
3numbers.sort();
1[secondary_label Output]
2[ 15, 16, 23, 4, 42, 8 ]
要正确排序数字,您可以创建一个比较函数作为一个参数。
1// Function to sort numbers by size
2const sortNumerically = (a, b) => {
3 return a - b;
4}
5
6numbers.sort(sortNumerically);
1[secondary_label Output]
2[ 4, 8, 15, 16, 23, 42 ]
sortNumerically比较函数允许我们按预期进行排序。
结论
在本教程中,我们审查了JavaScript中的主要突变数组方法。突变数组方法更改了它们所使用的原始数组,而不是像附加数组方法一样创建副本。
若要查看数组的基本知识,请阅读 理解 JavaScript 中的数组。 若要查看所有数组方法的完整列表,请参阅 Mozilla 开发者网络上的数组参考。