28个js常用数组方法总结图,28个js常用数组方法总结图片,28个JS常用数组方法总结

28个js常用数组方法总结图,28个js常用数组方法总结图片,28个JS常用数组方法总结

最近面试有道题是至少写出15个数组方法,数组方法平时经常用到的也就6-7个,突然要一下子写出15个,还是有点卡壳了,今天整理一波,需要的可以参考一下

目录

1.Array.map()2 .Array.filter()3 .Array.reduce()4 .Array.reduceRight()5 .Array.fill()6 .Array.find()7 .数组。()8的索引。lastindexof()9 .Array.findIndex()10 .Array.includes()11 .Array.pop()12 .数组. push()13 .Array.shift()14 .Array.unshift()15 .Array.splice()16 .Array.slice()17Array.join()18 .Array.reverse()19 .数组. sort()20 .Array.some()21 .Array.every()22 .Array.from()23 .的数组。24。Array.isArray()25 .Array.at()26.copyWithin()27 .Array.flat()28 .Array.flatMap()

1.Array.map()

地图()方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const list=[:累_脸:累_脸:累_脸:累_脸:];

list.map((:white_circle:)=:咧着嘴笑:);//[:露齿而笑:露齿而笑:露齿而笑:]

const list=[1,2,3,4];

列表。map((El)=El * 2);//[2, 4, 6, 8]

2.Array.filter()

过滤器()方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.filter((:white_circle:)=:white_circle:===:咧着嘴笑:);//[:露齿而笑:露齿而笑:]

//代码

const list=[1,2,3,4];

列表。过滤器((El)=El % 2===0);//[2, 4]

3.Array.reduce()

减少()方法对数组中的每个元素按序执行一个由您提供的还原剂函数,每一次运行还原剂会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.reduce((:white_large_square:,white_circle:)=:white_large_square::white_circle:);//:咧着嘴笑:累_脸:咧着嘴笑:累_脸:

//或者

const list=[1,2,3,4,5];

list.reduce(合计,项)=合计项,0);//15

4.Array.reduceRight()

reduceRight()方法的功能和减少()功能是一样的,不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.reduceright((:white_large_square:,white_circle:)=:white_large_square::white_circle:);//:累_脸:狞笑:累_脸:狞笑:

//代码

const list=[1,2,3,4,5];

list.reduceRight((total,item)=total item,0);//15

5.Array.fill()

填充()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.fill(:咧着嘴笑:);//[:露齿而笑:露齿而笑:露齿而笑:露齿而笑:]

const list=[1,2,3,4,5];

列表。填充(0);//[0, 0, 0, 0, 0]

6.Array.find()

查找()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回未定义。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.find((:white_circle:)=:white_circle:===:咧着嘴笑:);//:狞笑:

list.find((:white_circle:)=:white_circle:===:卡住_伸出_舌头_闭上_眼睛:);//未定义

const list=[1,2,3,4,5];

列表。find((El)=El===3);//3

列表。find((El)=El===6);//未定义

7.Array.indexOf()

索引属于()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.indexOf(:狞笑:);//0

列表。(:rage:)的索引;//-1

//代码

const list=[1,2,3,4,5];

列表。(3)的索引;//2

列表。(6)的索引;//-1

8.lastIndexOf()

arr.lastIndexOf(searchElement[,fromIndex])

方法返回指定元素(也即有效的Java脚本语言值或变量)在数组中的最后一个的索引,如果不存在则返回-1。从数组的后面向前查找,从从索引处开始。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.lastIndexOf(:狞笑:);//3

list.lastIndexOf(:狞笑:1);//0

//代码

const list=[1,2,3,4,5];

列表。lastindexof(3);//2

list.lastIndexOf(3,1);//-1

9.Array.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.findindex((:white_circle:)=:white_circle:===:咧着嘴笑:);//0

//你可能会想,它与"索引"有什么不同

常数数组=[5,12,8,130,44];

数组。查找索引((元素)=元素13);//3

//或者

常量数组=[{

id:狞笑:

}, {

id:累_脸:

}, {

id:

}];

数组。查找索引((元素)=元素。id===);//2

10.Array.includes()

包括()方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回没错,否则返回错误。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.includes(:咧着嘴笑:);//真

//代码

const list=[1,2,3,4,5];

列表包括(3);//真

清单。包括(6);//假

11.Array.pop()

流行()方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。

const list=[:狞笑:累_脸:狞笑:累_脸:];

列表。pop();//

列表;//[:露齿而笑:累_脸:露齿而笑:累_脸:]

//代码

const list=[1,2,3,4,5];

列表。pop();//5

列表;//[1, 2, 3, 4]

12.Array.push()

推送()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

const list=[:狞笑:累_脸:狞笑:累_脸:];

列表。推(:狂怒:);//5

列表;//[:露齿而笑:累_脸:露齿而笑:累_脸:狂怒:]

//代码

const list=[1,2,3,4,5];

列表。推(6);//6

列表;//[1, 2, 3, 4, 5, 6]

13.Array.shift()

shift()方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

const list=[:狞笑:累_脸:狞笑:累_脸:];列表。shift();//:咧着嘴笑:列表;//[:累_脸:咧着嘴笑:累_脸:]

//代码常量列表=[1,2,3,4,5];列表。shift();//1列表;//[2, 3, 4, 5]

14.Array.unshift()

未移位()方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

const list=[:狞笑:累_脸:狞笑:累_脸:];

列表。un shift(:rage:);//6

列表;//[:狂怒:狞笑:累_脸:狞笑:累_脸:]

//代码

const list=[1,2,3,4,5];

列表。un shift(0);//6

列表;//[0, 1, 2, 3, 4, 5]

15.Array.splice()

拼接()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.splice(1,2);//[:咧着嘴笑:累_脸:]

列表;//[:咧着嘴笑:累_脸:]

//代码

const list=[1,2,3,4,5];

list.splice(1,2);//[2, 3]

列表;//[1, 4, 5]

16.Array.slice()

切片()方法返回一个新的数组对象,这一对象是一个由开始和结束决定的原数组的浅拷贝(包括开始,不包括结束)。原始数组不会被改变。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.slice(1,3);//[:累_脸:咧着嘴笑:]

列表;//[:露齿而笑:累_脸:露齿而笑:累_脸:]

//代码

const list=[1,2,3,4,5];

list.slice(1,3);//[2, 3]

列表;//[1, 2, 3, 4, 5]

17Array.join()

加入()方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

const list=[:狞笑:累_脸:狞笑:累_脸:];

列表。join(':wavy _ dash:');//':咧着嘴笑:波浪_破折号:累_脸:波浪_破折号:咧着嘴笑:波浪_破折号:累_脸:波浪_破折号: '

//代码

const list=[1,2,3,4,5];

list.join(',');//'1, 2, 3, 4, 5'

18.Array.reverse()

反向()方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

const list=[:狞笑:累_脸:狞笑:累_脸:];

列表。反向();//[,累_脸:露齿一笑:累_脸:露齿一笑:]

列表;//[,累_脸:露齿一笑:累_脸:露齿一笑:]

//代码

const list=[1,2,3,4,5];

列表。反向();//[5, 4, 3, 2, 1]

列表;//[5, 4, 3, 2, 1]

19.Array.sort()

排序()方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。

const list=[:狞笑:累_脸:狞笑:累_脸:];

列表。sort();//[:露齿而笑:露齿而笑:累_脸:累_脸:]

//这更有意义

const array=['D ',' B ',' A ',' C '];

数组。sort();//:咧着嘴笑:['A ',' B ',' C ',' D']

//或者

常量数组=[4,1,3,2,10];

数组。sort();//:痛苦的:[1,10,2,3,4]

array.sort((a,b)=a-b);//:咧着嘴笑:[1,2,3,4,10]

20.Array.some()

一些()方法测试数组中是不是至少有一个元素通过了被提供的函数测试。它返回的是一个布尔代数学体系的类型的值。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.some((:white_circle:)=:white_circle:===:咧着嘴笑:);//真

list.some((:white_circle:)=:white_circle:===:狂怒:);//假

//代码

const list=[1,2,3,4,5];

列表。一些((El)=El===3);//真

列表。一些((El)=El===6);//假

21.Array.every()

每隔()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.every((:white_circle:)=:white_circle:===:咧着嘴笑:);//假

const list=[:狞笑:狞笑:狞笑:狞笑:];

list.every((:white_circle:)=:white_circle:===:咧着嘴笑:);//真

//代码

const list=[1,2,3,4,5];

列表。every((El)=El===3);//假

const list=[2,4,6,8,10];

列表。every((El)=El % 2===0);//真

22.Array.from()

数组。来自()方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

常量列表=:狞笑:累_脸:狞笑:累_脸:

数组。from(列表);//[:露齿而笑:累_脸:露齿而笑:累_脸:]

const set=新集合([':狞笑:',':累_脸:',':狞笑:',':累_脸:',' ']);

数组。从(集);//[:咧着嘴笑:累_脸:]

常量范围=(n)=数组。from({ length:n },(_,I)=I ^ 1);

console.log(范围(10));//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

23.Array.of()

的数组()方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

的数组()和排列构造函数之间的区别在于处理整数参数:数组。的(7)创建一个具有单个元素七的数组,而数组(7)创建一个长度为七的空数组(注意:这是指一个有七个空位(空的)的数组,而不是由七个不明确的组成的数组)。

(7)的数组;//[7]

Array.of(1,2,3);//[1, 2, 3]

数组(7);//[ , ]

Array(1,2,3);//[1, 2, 3]

24.Array.isArray()

Array.isArray()用于确定传递的值是否是一个数组。

Array.isArray([:狞笑:累_脸:狞笑:累_脸:]);//真

数组。isarray();//假

//代码

Array.isArray([1,2,3,4,5]);//真

数组。伊萨雷(5);//假

25.Array.at()

在()方法接收一个整数值并返回该索引的项目,允许正数和负数。负整数从数组中的最后一个项目开始倒数。

const list=[:狞笑:累_脸:狞笑:累_脸:];

列表。在(1);//:累_脸:

//从最后一个返回

列表。at(-1);//

列表。在(-2);//:累_脸:

//代码

const list=[1,2,3,4,5];

列表。在(1);//2

列表。at(-1);//5

列表。在(-2);//4

26.copyWithin()

arr.copyWithin(目标[,开始[,结束]])

方法只是将数组的一部分复制到同一数组中的另一个位置并返回它,而不改变原始数组的长度。

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.copyWithin(1,3);//[:咧着嘴笑:咧着嘴笑:累_脸:]

const list=[:狞笑:累_脸:狞笑:累_脸:];

list.copyWithin(0,3,4);//[:累_脸:累_脸:咧着嘴笑:累_脸:]

//代码

const list=[1,2,3,4,5];

list.copyWithin(0,3,4);//[4, 2, 3, 4, 5]

27.Array.flat()

var new array=arr . flat([深度])

//depth可选:指定要提取嵌套数组的结构的深度。默认值为1。

flat()方法根据指定的深度递归地遍历数组,并将所有元素与被遍历的子数组中的元素组合起来,以返回一个新数组。

const list=[:狞笑:累_脸:[:狞笑:累_脸:]];

list.flat(无穷大);//[:露齿而笑:累_脸:露齿而笑:累_脸:]

//代码

const list=[1,2,[3,4,[5,6]];

list.flat(无穷大);//[1, 2, 3, 4, 5, 6]

28.Array.flatMap()

flatMap()方法首先用映射函数映射每个元素,然后将结果压缩到一个新数组中。这与使用深度值为1的flat连接的map几乎相同,但flatMap通常在合并到一个方法中时效率稍高。

const list=[:狞笑:累_脸:[:狞笑:累_脸:]];

list.flatmap((:white_circle:)=[:white_circle:,white_circle::white_circle:]);//[:咧着嘴笑:咧着嘴笑:累_脸:累_脸:累_脸:咧着嘴笑:累_脸:累_脸:累_脸:]

//代码

const list=[1,2,3];

list.flatMap((el)=[el,El * El]);//[1, 1, 2, 4, 3, 9]

关于28个JS数组方法的总结这篇文章到此为止。有关JS数组方法的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: