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

更新日期: 2020-02-19阅读: 1.8k标签: 数组

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

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

本教程将介绍添加和删除元素,反转,替换以及修改数组中元素的过程。

注意:数组方法正确地写为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的访问器方法。我们学习了如何在数组的开头或结尾添加和删除元素,以及排序、反转和替换数组项的值。

链接: https://fly63.com/article/detial/8683

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!