js 数组详细操作方法及解析合集图片,js 数组详细操作方法及解析合集数据

js 数组详细操作方法及解析合集图片,js 数组详细操作方法及解析合集数据,js 数组详细操作方法及解析合集

在开发过程中,数组的使用场景很多,平日里会涉及到很多数组的api/相关操作。这段内容没有摘要。即使这个api用了几次,在开发中也很容易忘记,所以还是要Google一下。

前言

开发过程中,数组的使用场景很多,平日里也涉及数组的很多api/相关操作。从来没有对这一段内容进行过总结。很多情况下,即使这个api用了几次,在开发中也很容易忘记,所以还是要Google一下。所以希望对这个内容有一个系统的总结。在这种背景下,我有了这篇文章。喜欢的话可以给我一些赞/关注和支持。希望你看完这篇文章能有所收获。

创建数组:

//字面意思:

//这个方法也是我们最常用的方法,在初始化数组的时候相当方便。

var a=[3,11,8];//[3,11,8];

//构造函数:

//其实newarray==array,加不加new都没什么区别。

var a=Array();//[]

var a=Array(3);//[未定义,未定义,未定义]

var a=Array(3,11,8);//[ 3,11,8 ]

ES6 Array.of() 返回由所有参数值组成的数组

定义:返回所有参数值的数组,如果没有参数,则返回空数组。

目的:Array.of()的目的是为了解决上述构造函数因参数个数不同而产生不同行为的问题。

设a=Array.of(3,11,8);//[3,11,8]

设a=array . of(3);//[3]

ES6 Arrar.from() 将两类对象转为真正的数组

定义:用来把两种对象变成实数组(返回一个新数组,不改变原来的对象)。

参数:

第一个参数(必选):要转换成实数组的对象。

第二个参数(可选):类似array的map方法,处理每个元素,并将处理后的值放入返回的数组中。

第三个参数(可选):用于绑定这个。

//1.该对象具有长度属性。

设obj={0: a ,1: b ,2:c ,长度:3 };

设arr=array . from(obj);//[a , b , c ];

//2.部署迭代器接口的数据结构,如字符串、集合和NodeList对象。

let arr=array . from( hello );//[h , e , l , l]

let arr=Array.from(new Set([a , b ]);//[a , b]

方法:

Prototype提供了很多方法,可以分为三类:一类是会改变原数组的值,一类是不改变原数组,还有数组的遍历方法。

改变原数组的方法(9个):

设a=[1,2,3];

ES5:

a . pop()/a . shift()/a . push()/a . un shift()/a . reverse()/a . splice()/a . sort()

ES6:

a.copyWithin()/a.fill

对于这些可以改变原数组的方法,要注意避免在循环遍历中改变原数组的选项,比如改变数组的长度,导致遍历长度出现问题。

pop() 删除一个数组中的最后的一个元素

定义:pop()方法删除数组中的最后一个元素,并返回这个元素。

参数:无。

设a=[1,2,3];

let item=a . pop();//3

console . log(a);//[1,2]

shift() 删除数组的第一个元素

定义:shift()方法删除数组的第一个元素并返回这个元素。

参数:无。

设a=[1,2,3];

let item=a . shift();//1

console . log(a);//[2,3]

push() 向数组的末尾添加元素

定义:push()方法可以在数组末尾添加一个或多个元素,并返回新的长度。

参数:item1,item2,…,itemX,要添加到数组末尾的元素。

设a=[1,2,3];

let item=a . push( end );//4

console . log(a);//[1,2,3, end]

unshift()

定义:unshift()方法可以在数组的开头添加一个或多个元素,并返回新的长度。

参数:item1,item2,…,itemX,要添加到数组开头的元素

设a=[1,2,3];

item=a . un shift( beginning );//4

console . log(a);//[开始,1,2,3]

reverse() 颠倒数组中元素的顺序

定义:reverse()方法用于反转数组中元素的顺序。

参数:无

设a=[1,2,3];

a . reverse();

console . log(a);//[3,2,1]

splice() 添加/删除数组元素

定义:splice()方法在数组中添加/删除项目,然后返回删除的项目。

语法:array.splice (index,多少,item1,itemx)

参数:

Index:必选。整数,指定添加/删除项目的位置。使用负数指定距数组末尾的位置。

多少:必选。要删除的项目数。如果设置为0,则不会删除项目。

1,…,itemx:可选。添加到数组中的新项。

返回值:如果删除了任何元素,则返回一个包含已删除项的新数组。

Eg1:删除元素

设a=[1,2,3,4,5,6,7];

设item=a.splice(0,3);//[1,2,3]

console . log(a);//[4,5,6,7]

//从数组下标0中删除3个元素

let item=a.splice(-1,3);//[7]

//从最后一个元素中删除3个元素,因为最后一个元素,只删除了7个

Eg2:删除和添加

设a=[1,2,3,4,5,6,7];

Item=a.splice (0,3, add );//[1,2,3]

console . log(a);//[添加,4,5,6,7]

//从数组下标0开始,删除3个元素并添加元素“add”

设b=[1,2,3,4,5,6,7];

Item=b.splice (-2,3, Add 1 , Add 2 );//[6,7]

console . log(b);//[1,2,3,4,5,加1 ,加2]

//从数组的最后第二个元素开始,删除3个元素并添加两个元素“add 1”和“add 2”

Eg3:不要删除,而是添加:

设a=[1,2,3,4,5,6,7];

Item=a.splice (0,0, Add 1 , Add 2 );//[]不删除任何元素,返回一个空数组。

console . log(a);//[加1 ,加2 ,1,2,3,4,5,6,7]

设b=[1,2,3,4,5,6,7];

Item=b.splice (-1,0, Add 1 , Add 2 );//[]不删除任何元素,返回一个空数组。

console . log(b);//[1,2,3,4,5,6,加1 ,加2 ,7]在最后一个元素前面添加两个元素

从以上三个栗子可以得出结论:

如果数组中没有足够的元素,它将被删除,直到最后一个元素。

操作的元素,包括开始元素。

可以添加很多元素。

加法是在开始元素之前添加的。

sort() 数组排序

定义:sort()方法对一个数组的元素进行排序并返回这个数组。

可选参数:指定排序顺序的比较函数。

默认情况下,如果sort()方法没有比较函数,默认情况下将按字母升序排列。如果元素不是字符串,将调用toString()方法将元素转换为字符串的Unicode(通用代码)位置,然后比较字符。

//字符串排列看起来正常

var a=[香蕉,橘子,苹果,芒果];

a . sort();//[苹果,香蕉,芒果,橘子]

//在对数字进行排序时,有些数字转换成Unicode字符串后会排在后面,这显然不是我们想要的。

var a=[10,1,3,20,25,8];

console.log(a.sort()) //[1,10,20,25,3,8];

比较函数的两个参数:

Sort的比较函数有两个默认参数。要在函数中接收这两个参数,这两个参数是数组中要比较的两个元素。通常,我们使用A和B来接收两个要比较的元素:

如果比较函数返回值0,那么A会在B之前;

如果比较函数的返回值=0,那么A和B的相对位置不变;

如果比较函数返回值0,那么B在A之前;

对于sort()方法更深层次的内部实现和处理机制,可以看看这篇文章,了解更多关于javascript的sort方法。

sort排序常见用法:

1.数组元素按数字的升序和降序排列:

var array=[10,1,3,4,20,4,25,8];

//升序a-b 0 a会排在B之前,按照a的大小排序。

//比如减数分裂A是10,减数分裂是20 ^ 10-20 ^ 0,减数分裂a(10)在减数分裂b(20)前面

array.sort(函数(a,b){

返回a-b;

});

console.log(数组);//[1,3,4,4,8,10,20,25];

//降序减数分裂交换20-100。减数b(20)在减数分裂a(10)之前

array.sort(函数(a,b){

返回b-a;

});

console.log(数组);//[25,20,10,8,4,4,3,1];

2.数组的多条件排序

var array=[{id:10,年龄:2},{id:5,年龄:4},{id:6,年龄:10},{id:9,年龄:6},{id:2,年龄:8},{id:10,年龄:9 }];

array.sort(函数(a,b){

If(a.id===b.id){//如果id的值相等,则按照年龄的值降序排列

返回b.age - a.age

}else{ //如果id的值不相等,则根据id的值以升序排列

返回a.id - b.id

}

})

//[{id:2,年龄:8},{id:5,年龄:4},{id:6,年龄:10},{id:9,年龄:6},{id:10,年龄:9},{id:10,年龄,{ id :10,年龄:2}]

3.自定义对比功能,天空就是你的极限。

类似:利用好返回值,我们就可以写出任何符合自己需求的比较函数。

var array=[{name:Koro1},{name:Koro1},{name:OB},{name:Koro1},{name:OB},{ name: OB }];

array.sort(函数(a,b){

If(a.name===Koro1){//如果名称为 Koro1 ,返回-1,-10 a在b之前。

返回-1

}else{ //如果不是,A跟在b后面。

返回1

}

})

//[{name:Koro1},{name:Koro1},{name:Koro1},{name:OB},{name:OB},{name:OB}]

ES6: copyWithin() 指定位置的成员复制到其他位置

定义:在当前数组中,将指定位置的成员复制到其他位置,并返回该数组。

语法:

array.copyWithin(target,start=0,end=this.length)

参数:

这三个参数都是数值,如果不是,它们会自动转换成数值。

Target(必需):替换此位置的数据。如果是负数,则表示倒数。

Start(可选):从该位置开始读取数据,默认为0。如果是负数,则表示倒数。

End(可选):在到达该位置之前停止读取数据,默认情况下该位置等于数组长度。使用负数指定距数组末尾的位置。

浏览器兼容性(MDN):不支持Chrome 45、Edge 12、Firefox 32、Opera 32、Safari 9、IE

例如:

//-2相当于位置3,-1相当于位置4。

[1, 2, 3, 4, 5].copyWithin(0,-2,-1)

//[4, 2, 3, 4, 5]

var a=[OB1 , Koro1 , OB2 , Koro2 , OB3 , Koro3 , OB4 , Koro4 , OB5 , Koro5]

//位置2开始替换,位置3开始读取要替换的位置5,替换在其前面停止。

a.copyWithin(2,3,5)

//[OB1 , Koro1 , Koro2 , OB3 , OB3 , Koro3 , OB4 , Koro4 , OB5 , Koro5]

从上面的栗子来看:

第一个参数是要替换的元素的位置。

要替换的数据的位置范围:从第二个参数开始读取的元素,在第三个参数之前,一个元素停止读取。

数组的长度不会改变。

看完几个元素,从被替换的地方替换几个元素。

ES6: fill() 填充数组

定义:用给定值填充数组。

参数:

第一个元素(必需):填充数组的值

第二个元素(可选):填充的起始位置,默认值为0。

第三个元素(可选):填充的结束位置,默认情况下是this.length。

MDN浏览器兼容性

[a , b , c]。填充(7)

//[7, 7, 7]

[a , b , c]。填充(7,1,2)

//[a ,7, c]

不改变原数组的方法(8个):

ES5:

join、toLocateString、toStrigin、slice、cancat、indexOf、lastIndexOf、

ES7:

包含

join() 数组转字符串

定义:join()方法用于按照指定的分隔符将数组中的所有元素分隔成一个字符串,并返回生成的字符串。

语法:

数组.连接(字符串)

参数:

Str(可选):指定要使用的分隔符,默认情况下使用逗号作为分隔符。

设a=[hello , world ];

设str=a . join();//你好,世界

设str 2=a . join();//你好,世界

当使用join方法或下面提到的toString方法时,当数组中的元素也是数组或对象时会发生什么?

设a=[ obkoro 1 , 23], test ];

设str 1=a . join();//OBKoro1,23,测试

设b=[{姓名: OBKoro1 ,年龄: 23},测试];

设str 2=b . join();//[对象对象],测试

//对象转字符串推荐JSON . stringify(obj);

所以,当数组元素是数组时,join()/toString()方法也会调用join()/toString(),如果是对象,对象会被转换成[object Object]字符串。

toLocaleString() 数组转字符串

定义:返回代表数组元素的字符串。该字符串由数组中每个元素的toLocaleString()返回值组成,通过调用join()方法连接(用逗号分隔)。

语法:

array.toLocaleString()

参数:无。

设a=[{name:OBKoro1},23, abcd ,new Date()];

设str=a . tolocalestring();//[对象对象],23,ABCD,2018/5/28下午1点52分20秒

比如上面说的栗子:调用数组的Tolocalestring方法,数组中的每个元素都会调用自己的toLocaleString方法,对象会调用对象的toLocaleString,日期会调用日期的toLocaleString。

toString() 数组转字符串 不推荐

定义:toString()方法可以将数组转换成用逗号链接的字符串。

语法:

array.toString()

参数:无。

此方法的效果与join方法相同,join方法用于将数组转换为字符串。但与join方法相比,这种方法没有优势,并且不能自定义字符串的分隔符,所以不推荐使用。

值得注意的是,在操作数组和字符串时,js会调用这个方法自动将数组转换成字符串。

设b=[toString , demo ]。toString();//toString,demo

让a=[call toString , connect behind me]啦啦啦;//调用toString,在我后面连接。

slice() 浅拷贝数组的元素

定义:该方法将数组从头到尾(不包括结尾)选中的一部分的浅拷贝返回到一个新的数组对象中,原数组不会被修改。

注意:字符串还有一个slice()方法,用于提取字符串。不要混淆。

语法:

array.slice(begin,end);

参数:

Begin(可选):索引值,接受负值,并从索引中提取原始数组中的元素。默认值为0。

End(可选):索引值(不包括),接受负值,并完成提取索引之前的原始数组元素。默认值是数组的结尾(包括最后一个元素)。

设a=[hello , world ];

设b=a.slice(0,1);//[你好]

A[0]=改变原数组;

console.log(a,b);//[改变原数组,世界] [你好]

B[0]=改变复制的数组;

console.log(a,b);//[更改原始数组, world] [更改复制的数组]

如上:新数组是浅拷贝,元素是简单的数据类型,更改后不会互相干扰。

如果是复杂数据类型(对象,数组),你改变其中一个,另一个也会改变。

设a=[{ name: obk oro 1 }];

设b=a . slice();

console.log(b,a);//[{ name : obk oro 1 }][{ name : obk oro 1 }]

//a[0]。name=更改原始数组;

//console.log(b,a);//[{name :更改原始数组 }] [{name :更改原始数组 }]

//b[0]。name=更改副本数组,b[0]。koro=改变副本数组;

//[{name :更改副本数组, koro :更改副本数组 }] [{name :更改副本数组, koro :更改副本数组 }]

原因在上面的定义中已经提到:slice()是浅拷贝。对于复杂数据类型的浅复制,只复制指向原数组的指针,所以无论是改变原数组还是浅复制数组,都会改变原数组的数据。

cancat

定义:该方法用于合并两个或多个数组,并返回一个新数组。

语法:

var newArr=old array . concat(arrayX,arrayX,arrayX)

参数:

ArrayX(必选):该参数可以是一个具体值,也可以是一个数组对象。可以有任何数字。

eg1:

设a=[1,2,3];

设b=[4,5,6];

//连接两个数组

设new val=a . concat(b);//[1,2,3,4,5,6]

//连接三个数组

设c=[7,8,9]

设newVal2=a.concat(b,c);//[1,2,3,4,5,6,7,8,9]

//添加元素

Letval3=a.concat(添加元素,b,c,再添加一个);

//[1,2,3,添加元素,4,5,6,7,8,9,再添加一个]

//合并嵌套数组将浅层复制嵌套数组。

设d=[1,2];

设f=[3,[4]];

设new val 4=d . concat(f);//[1,2,3,[4]]

ES6扩展运算符.合并数组:

因为ES6的语法更简洁易懂,现在我大多用.来处理合并数组,而.运算符可以实现cancat的每一个栗子,更加简洁,有高度自定义数组元素位置的效果。

设a=[2,3,4,5]

设b=[ 4,一、四、四]

console.log(a,b);//[2, 3, 4, 5] [4,2,3,4,5,4,4]

关于扩展器的更多细节,请参阅阮一峰的ECMAScript 6简介

indexOf() 查找数组是否存在某个元素,返回下标

定义:返回给定元素在数组中的第一个索引,如果不存在,返回-1。

语法:

array.indexOf(searchElement,fromIndex)

参数:

SearchElement(必选):要搜索的元素。

FromIndex(可选):开始搜索的位置(不能大于或等于数组的长度,返回-1)。接受负值,默认值为0。

严格搜索:

数组搜索的indexOf不同于字符串搜索的index of。数组的indexOf使用严格的equal==搜索元素,也就是说,数组的元素必须完全匹配才能成功搜索。

注意:indexOf()不识别NaN

例如:

Let=[啦啦,2,4,24,NaN]

console . log(a . index of( la ));//-1

console . log(a . index of( NaN ));//-1

console . log(a . index of( la la ));//0

使用场景:

阵列重复数据消除

根据获取的数组下标,改变数组中的值等。

确定它是否存在并执行操作。

lastIndexOf() 查找指定元素在数组中的最后一个位置

定义:该方法返回指定元素的索引,即数组中的最后一个元素,如果不存在,则返回-1。(从阵列背面向前看)

语法:

arr.lastIndexOf(searchElement,fromIndex)

参数:

SearchElement(必选):要搜索的元素。

FromIndex(可选):反向查找起始位置。默认数组长度为-1,即找到整个数组。

关于fromIndex有三个规则:

正值。如果该值大于或等于数组的长度,则将搜索整个数组。

负值。可以把它看作是从数组末尾向前的偏移量。(例如-2,从数组的最后第二个元素开始向前看)

负值。如果其绝对值大于数组的长度,则该方法返回-1,即找不到该数组。

设a=[OB ,4, Koro1 ,1,2, Koro1 ,3,4,5, koro 1 ];//数组长度为10

//设b=a.lastIndexOf(Koro1 ,4);//从下标4开始,向前返回下标2

//设b=a.lastIndexOf(Koro1 ,100);//大于或等于数组的长度。找到整个数组并返回9

//设b=a.lastIndexOf(Koro1 ,-11);//-1数组将找不到

设b=a.lastIndexOf(Koro1 ,-9);//从第二个元素4向前看,没有找到return -1

ES7 includes() 查找数组是否包含某个元素 返回布尔

定义:返回一个布尔值,指示数组是否包含给定值。

语法:

array.includes(searchElement,fromIndex=0)

参数:

SearchElement(必选):要搜索的元素。

FromIndex(可选):默认值为0,该参数指示搜索的起始位置,接受负值。如果正值超过数组长度,将不搜索数组,并将返回false。负值的绝对值超过长数组的次数。从0重置搜索。

Includes方法是为了弥补indexOf方法的缺陷:

indexOf方法不识别NaN。

indexOf方法语义不够,无法检查是否包含某个值,需要判断是否不等于-1,所以表达不够直观。

例如:

设a=[OB , Koro1 ,1,NaN];

//设b=a . includes(NaN);//true标识NaN

//设b=a.includes(Koro1 ,100);//false如果超过数组长度,则不进行搜索。

//设b=a.includes(Koro1 ,-3);//true从最后一个元素开始搜索。

//设b=a.includes(Koro1 ,-100);//true负值的绝对值超过了数组的长度。搜索整个数组。

兼容性(MDN): Chrome 47,Firefox 43,Edge 14,Opera 34,Safari 9,IE未实现。

遍历方法(12个):

有12种方法可以在不改变原始数组的情况下遍历js中的数组:

ES5:

forEach,every,some,fliter,map,reduce,reduceRight,

ES6:

查找、查找索引、键、值、条目

关于遍历:

关于遍历的效率,可以看看这个JS遍历的详细解释。

以后遍历的时候尽量不要修改要遍历的值。

遍历时尽量不要修改数组的长度(删除/添加)。

为每一个

定义:回调函数按升序对数组中每个有有效值的项执行一次。

语法:

array . foreach(function(current value,index,arr),thisValue)

参数:

Function(必选):数组中每个元素需要调用的函数。

//回调函数的参数

1.currentValue(必选),数组中当前元素的值。

2.index(可选),当前元素的索引值

3.arr(可选),数组对象本身

HisValue(可选):回调函数执行时该绑定对象的值;默认值是未定义的。

关于forEach()你要知道:

你不能中途退出循环。您只能使用return键退出本次回拨,并进行下一次回拨。

它总是返回一个未定义的值,即使你返回一个值。

下面类似语法同样适用这些规则

1.对于空数组,不会执行回调函数。

2.对于迭代过程中已经删除的元素,或者空元素将跳过回调函数。

3.遍历次数会在第一次循环之前确定,添加到数组中的元素不会被遍历。

4.如果现有值被更改,传递给callback的值就是遍历它们时的值。

例如:

设a=[1,2,3];//最后一个第二元素为空,将不被遍历(未定义,将遍历null)

let obj={ name: obk oro 1 };

let result=a . foreach(function(value,index,array) {

A[3]=改变元素;

A.push(加到最后,就不遍历了)

Console.log (value, foreach传递的第一个参数);//分别打印1和2,并更改元素。

console . log(this . name);//OBKoro1将此打印三次。它被绑定到obj对象。

//break;//break将报告一个错误

返回值;//return只能结束这个回调。将执行下一个回调。

Console.log(不会执行,因为return将执行下一个循环回调)

},obj);

console.log(结果);//即使返回一个值,它仍然返回undefined

//回调函数也接受联合函数编写。

every 检测数组所有元素是否都符合判断条件

定义:方法用于检查数组的所有元素是否满足函数定义的条件。

语法:

array.every(函数(currentValue,index,arr),thisValue)

参数:(这些方法的参数具有相似的语法)

Function(必选):数组中每个元素需要调用的函数。

//回调函数的参数

1.currentValue(必选),数组中当前元素的值。

2.index(可选),当前元素的索引值

3.arr(可选),数组对象本身

ThisValue(可选):回调函数执行时该绑定对象的值。默认值是未定义的。

方法返回值规则:

如果检测到数组中的一个元素不满足,则整个表达式将返回false,其余元素将不再被检测。

如果所有元素都满足条件,则返回true。=

例如:

函数isBigEnough(元素,索引,数组){

返回元素=10;//确定数组中的所有元素是否都大于10

}

设结果=[12,5,8,130,44]。every(isBigEnough);//假

设结果=[12,54,18,130,44]。every(isBigEnough);//真

//接受箭头函数编写

[12, 5, 8, 130, 44].每(x=x=10);//假

[12, 54, 18, 130, 44].每(x=x=10);//真

some 数组中的是否有满足判断条件的元素

定义:数组中是否有满足判断条件的元素。

语法:

array . some(function(current value,index,arr),thisValue)

参数:(这些方法的参数具有相似的语法)

Function(必选):数组中每个元素需要调用的函数。

//回调函数的参数

1.currentValue(必选),数组中当前元素的值。

2.index(可选),当前元素的索引值

3.arr(可选),数组对象本身

ThisValue(可选):回调函数执行时该绑定对象的值。默认值是未定义的。

方法返回值规则:

如果一个元素满足条件,表达式返回true,其余的元素将不再被检测。

如果没有符合条件的元素,则返回false。

函数isBigEnough(元素,索引,数组){

return(元素=10);//数组中有大于10的元素吗

}

设结果=[2,5,8,1,4]。一些(isBigEnough);//假

设结果=[12,5,8,1,4]。一些(isBigEnough);//真

filter 过滤原始数组,返回新数组

定义:返回一个新数组,包含由提供的函数实现的测试的所有元素。

语法:

let new _ array=arr . filter(function(current value,index,arr),thisArg)

参数:(这些方法的参数具有相似的语法)

Function(必选):数组中每个元素需要调用的函数。

//回调函数的参数

1.currentValue(必选),数组中当前元素的值。

2.index(可选),当前元素的索引值

3.arr(可选),数组对象本身

ThisValue(可选):回调函数执行时该绑定对象的值。默认值是未定义的。

例如:

设a=[32,33,16,40];

let result=a . filter(function(value,index,array) {

返回值=18;//返回数组a中所有大于18的元素。

});

console.log(结果,a);//[32,33,40] [32,33,16,40]

map 对数组中的每个元素进行处理,返回新的数组

定义:创建一个新的数组,其结果是数组中的每个元素调用一个提供的函数后返回的结果。

语法:

设new _ array=arr . map(function(current value,index,arr),thisArg)

参数:(这些方法的参数具有相似的语法)

Function(必选):数组中每个元素需要调用的函数。

//回调函数的参数

1.currentValue(必选),数组中当前元素的值。

2.index(可选),当前元素的索引值

3.arr(可选),数组对象本身

ThisValue(可选):回调函数执行时该绑定对象的值。默认值是未定义的。

例如:

设a=[1 , 2 , 3 , 4 ];

let result=a.map(function (value,index,array) {

返回值“新数组的新元素”

});

console.log(结果,a);

//[新数组的1个新元素,新数组的2个新元素,新数组的3个新元素,新数组的4个新元素] [1 , 2 , 3 , 4]

reduce 为数组提供累加器,合并为一个值

定义:reduce()方法对累加器和数组中的每个元素(从左到右)应用一个函数,最后合并成一个值。

语法:

array.reduce(function(total,currentValue,currentIndex,arr),initialValue)

参数:

Function(必选):数组中每个元素需要调用的函数。

//回调函数的参数

1.total (must)、初始值或最后一次回调调用返回的值。

2.currentValue(必选),数组中当前元素的值。

3.index(可选),当前元素的索引值

4.arr(可选),数组对象本身

InitialValue(可选):指定第一个回调的第一个参数。

第一次执行回调时:

如果调用reduce时提供了initialValue,那么第一个合计将等于initialValue,此时currentValue等于数组中的第一个值;

如果未提供initialValue,则total等于数组中的第一个值,currentValue等于数组中的第二个值。如果此时数组为空,将会抛出一个TypeError。

如果数组只有一个元素,并且没有提供initialValue,或者提供了initialValue但数组为空,则不会执行回调,将返回数组的唯一值。

例如:

//数组总和

设sum=[0,1,2,3]。减少(函数(a,b) {

返回a b;

}, 0);

//6

//将二维数组转换为一维数组,并展开数组元素

设flattened=[[0,1],[2,3],[4,5]]。减少(

(a,b)=a.concat(b),

[]

);

//[0, 1, 2, 3, 4, 5]

reduceRight 从右至左累加

这种方法与reduce完全一致,只是运行方向相反。请参考前面提到的reduce方法的介绍。

ES6:find() findIndex() 根据条件找到数组成员

Find()定义:用于查找第一个合格的数组成员并返回,如果没有合格的成员,则为undefined。

FindIndex()定义:返回第一个合格数组成员的位置,如果所有成员都不合格,则返回-1。

这两种方法

语法:

let new _ array=arr . find(function(current value,index,arr),thisArg)

设new _ array=arr . find Index(function(current value,index,arr),thisArg)

参数:(这些方法的参数具有相似的语法)

Function(必选):数组中每个元素需要调用的函数。

//回调函数的参数

1.currentValue(必选),数组中当前元素的值。

2.index(可选),当前元素的索引值

3.arr(可选),数组对象本身

ThisValue(可选):回调函数执行时该绑定对象的值。默认值是未定义的。

两种方法都能鉴别NaN,弥补了indexOf的不足。

例如:

//查找

设a=[1,4,-5,10]。find((n)=n0);//返回元素-5

设b=[1,4,-5,10,NaN]。find((n)=Object.is(NaN,n));//返回元素NaN

//findIndex

设a=[1,4,-5,10]。find index((n)=n 0);//返回索引2

设b=[1,4,-5,10,NaN]。findIndex((n)=Object.is(NaN,n));//返回索引4

浏览器兼容性(MDN): Chrome 45,Firefox 25,Opera 32,Safari 8,Edge Yes,

ES6 keys()values()entries() 遍历键名、遍历键值、遍历键名+键值

定义:三个方法都返回一个新的数组迭代器对象,根据方法的不同包含不同的值。

语法:

array.keys()

array.values()

数组.条目()

参数:无。

遍历栗子(从ECMAScript 6入门):

for(设索引为[a , b]。keys()) {

console.log(索引);

}

//0

//1

for (let elem of [a , b]。values()) {

console . log(elem);

}

//a

//b

for (let [index,elem] of [a , b]。entries()) {

console.log(index,elem);

}

//0 a

//1个“b”

免不了遭受.的,如果要在遍历中途退出,可以使用break退出循环。

如果您不使用for.循环中,您可以手动调用遍历对象的下一个方法来遍历:

let letter=[a , b , c ];

let entries=letter . entries();

console.log(entries.next()。值);//[0, a]

console.log(entries.next()。值);//[1, b]

console.log(entries.next()。值);//[2, c]

Entries()浏览器兼容性(MDN): Chrome 38、Firefox 28、Opera 25、Safari 7.1

Keys()浏览器兼容性(MDN): Chrome 38,Firefox 28,Opera 25,Safari 8,

注意:目前仅支持Safari 9,其他浏览器未实现,babel转码器尚未实现。

结语

呼~终于写了,断断续续,上班偷偷写了好几天。虽然很辛苦,但是现在数组操作方法清晰多了,每个API都理解的好一点了,收获很大。文章如有不准确之处,请多多鼓励!希望你看完能有所收获。喜欢的话就点波订阅关注/喜欢。

希望看完的朋友可以点个喜欢/关注,您的支持是对我最大的鼓励。

个人blogand掘金个人主页,如需转载,请放上原文链接并签名。码字不容易,谢谢大家的支持!我是抱着交换记录的心态写文章的,不想把不好的东西撕了,但是欢迎大家给点意见。

js 数组详细操作方法及解析合集图片,js 数组详细操作方法及解析合集数据