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

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

为了充分利用本教程,您应该对数组的创建,索引,修改和循环有一定的了解,您可以在《了解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()添加

如果我们将第二个参数(要删除的项目)设置为0splice()则会删除零个项目。这样,我们可以选择仅添加从任何索引号开始的项目,从而使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的访问器方法。我们学习了如何在数组的开头或结尾添加和删除元素,以及排序、反转和替换数组项的值。

英文原文地址:https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-mutator-methods

以上就是如何在JavaScript中使用数组方法:Mutator方法的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1