志在指尖
用双手敲打未来

javascript 数组(对象操作方法)

javascript数组

在开发中,数组的运用场景十分多,平日中也涉及到许多数组的api/相关操作,一直也没有对这块内容进行一块收拾总结,许多时分就算用过几回这个api,在开发中也很容易忘掉,仍是要谷歌一下。所以就期望对这块内容有一个比较系统性的总结,在这布景下,就有了本篇文章,假如喜欢的话能够点波赞/关注,支持一下,期望咱们看完本文能够有所收成。
创立一个数组:
//字面量方式:
//这个办法也是咱们最常用的,在初始化数组的时分相当方便
vara=[3,11,8];//[3,11,8];
//结构器:
//实际上newArray===Array,加不加new一点影响都没有。
vara=Array();//[]
vara=Array(3);//[undefined,undefined,undefined]
vara=Array(3,11,8);//[3,11,8]
ES6Array.of()回来由一切参数值组成的数组
界说:回来由一切参数值组成的数组,假如没有参数,就回来一个空数组。
意图:Array.of()呈现的意图是为了处理上述结构器因参数个数不同,导致的行为有差异的问题。
leta=Array.of(3,11,8);//[3,11,8]
leta=Array.of(3);//[3]
ES6Arrar.from()将两类目标转为真正的数组
界说:用于将两类目标转为真正的数组(不改动原目标,回来新的数组)。
参数:
第一个参数(必需):要转化为真正数组的目标。
第二个参数(可选):相似数组的map办法,对每个元素进行处理,将处理后的值放入回来的数组。
第三个参数(可选):用来绑定this。
//1.目标拥有length属性
letobj={0:’a’,1:’b’,2:’c’,length:3};
letarr=Array.from(obj);//[‘a’,’b’,’c’];
//2.布置了Iterator接口的数据结构比方:字符串、Set、NodeList目标
letarr=Array.from(‘hello’);//[‘h’,’e’,’l’,’l’]
letarr=Array.from(newSet([‘a’,’b’]));//[‘a’,’b’]
办法:
数组原型供给了十分多的办法,这里分为三类来讲,一类会改动原数组的值,一类是不会改动原数组,以及数组的遍历办法。
改动原数组的办法(9个):
leta=[1,2,3];
ES5:
a.pop()/a.shift()/a.push()/a.unshift()/a.reverse()/a.splice()/a.sort()
ES6:
a.copyWithin()/a.fill
关于这些能够改动原数组的办法,要留意防止在循环遍历中改动原数组的选项,比方:改动数组的长度,导致遍历的长度呈现问题。
pop()删去一个数组中的最终的一个元素
界说:pop()办法删去一个数组中的最终的一个元素,而且回来这个元素。java
参数:无。
leta=[1,2,3];
letitem=a.pop();//3
console.log(a);//[1,2]
shift()删去数组的第一个元素
界说:shift()办法删去数组的第一个元素,并回来这个元素。
参数:无。
leta=[1,2,3];
letitem=a.shift();//1
console.log(a);//[2,3]
push()向数组的结尾增加元素
界说:push()办法可向数组的结尾增加一个或多个元素,并回来新的长度。
参数:item1,item2,…,itemX,要增加到数组结尾的元素
leta=[1,2,3];
letitem=a.push(‘结尾’);//4
console.log(a);//[1,2,3,’结尾’]
unshift()
界说:unshift()办法可向数组的最初增加一个或更多元素,并回来新的长度。
参数:item1,item2,…,itemX,要增加到数组最初的元素
leta=[1,2,3];
letitem=a.unshift(‘最初’);//4
console.log(a);//[‘最初’,1,2,3]
reverse()倒置数组中元素的次序
界说:reverse()办法用于倒置数组中元素的次序。
参数:无
leta=[1,2,3];
a.reverse();
console.log(a);//[3,2,1]
splice()增加/删去数组元素
界说:splice()办法向/从数组中增加/删去项目,然后回来被删去的项目
语法:array.splice(index,howmany,item1,…..,itemX)
参数:
index:必需。整数,规矩增加/删去项意图方位,运用负数可从数组结尾处规矩方位。
howmany:必需。要删去的项目数量。假如设置为0,则不会删去项目。
item1,…,itemX:可选。向数组增加的新项目。
回来值:假如有元素被删去,回来包括被删去项意图新数组。
eg1:删去元素
leta=[1,2,3,4,5,6,7];
letitem=a.splice(0,3);//[1,2,3]
console.log(a);//[4,5,6,7]
//从数组下标0开端,删去3个元素
letitem=a.splice(-1,3);//[7]
//从最终一个元素开端删去3个元素,由于最终一个元素,所以只删去了7
eg2:删去并增加
leta=[1,2,3,4,5,6,7];
letitem=a.splice(0,3,’增加’);//[1,2,3]
console.log(a);//[‘增加’,4,5,6,7]
//从数组下标0开端,删去3个元素,并增加元素’增加’
letb=[1,2,3,4,5,6,7];
letitem=b.splice(-2,3,’增加1′,’增加2′);//[6,7]
console.log(b);//[1,2,3,4,5,’增加1′,’增加2′]
//从数组最终第二个元素开端,删去3个元素,并增加两个元素’增加1’、’增加2′
eg3:不删去只增加:
leta=[1,2,3,4,5,6,7];
letitem=a.splice(0,0,’增加1′,’增加2′);//[]没有删去元素,回来空数组
console.log(a);//[‘增加1′,’增加2′,1,2,3,4,5,6,7]
letb=[1,2,3,4,5,6,7];
letitem=b.splice(-1,0,’增加1′,’增加2′);//[]没有删去元素,回来空数组
console.log(b);//[1,2,3,4,5,6,’增加1′,’增加2′,7]在最终一个元素的前面增加两个元素
从上述三个栗子能够得出:
数组假如元素不够,会删去到最终一个元素中止
操作的元素,包括开端的那个元素
能够增加许多个元素
增加是在开端的元素前面增加的
sort()数组排序
界说:sort()办法对数组元素进行排序,并回来这个数组。
参数可选:规矩排序次序的比较函数。
默许情况下sort()办法没有传比较函数的话,默许按字母升序,假如不是元素不是字符串的话,会调用toString()办法将元素转化为字符串的Unicode(万国码)位点,然后再比较字符。
//字符串排列看起来很正常
vara=[“Banana”,”Orange”,”Apple”,”Mango”];
a.sort();//[“Apple”,”Banana”,”Mango”,”Orange”]
//数字排序的时分由于转化成Unicode字符串之后,有些数字会比较大会排在后边这显然不是咱们想要的
vara=[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、数组元素为数字的升序、降序:
vararray=[10,1,3,4,20,4,25,8];
//升序a-b<0a将排到b的前面,按照a的巨细来排序的
//比方被减数a是10,减数是2010-20<0被减数a(10)在减数b(20)前面
array.sort(function(a,b){
returna-b;
});
console.log(array);//[1,3,4,4,8,10,20,25];
//降序被减数和减数调换了20-10>0被减数b(20)在减数a(10)的前面
array.sort(function(a,b){
returnb-a;
});
console.log(array);//[25,20,10,8,4,4,3,1];
2、数组多条件排序
vararray=[{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}];
array.sort(function(a,b){
if(a.id===b.id){//假如id的值持平,按照age的值降序
returnb.age-a.age
}else{//假如id的值不持平,按照id的值升序
returna.id-b.id
}
})
//[{“id”:2,”age”:8},{“id”:5,”age”:4},{“id”:6,”age”:10},{“id”:9,”age”:6},{“id”:10,”age”:9},{“id”:10,”age”:2}]
3、自界说比较函数,天空才是你的极限
相似的:运用好回来值,咱们能够写出恣意契合自己需求的比较函数
vararray=[{name:’Koro1′},{name:’Koro1′},{name:’OB’},{name:’Koro1′},{name:’OB’},{name:’OB’}];
array.sort(function(a,b){
if(a.name===’Koro1′){//假如name是’Koro1’回来-1,-1<0a排在b的前面
return-1
}else{//假如不是的话,a排在b的后边
return1
}
})
//[{“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):chrome45,Edge12,Firefox32,Opera32,Safari9,IE不支持
eg:
//-2相当于3号位,-1相当于4号位
[1,2,3,4,5].copyWithin(0,-2,-1)
//[4,2,3,4,5]
vara=[‘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’].fill(7)
//[7,7,7]
[‘a’,’b’,’c’].fill(7,1,2)
//[‘a’,7,’c’]
不改动原数组的办法(8个):
ES5:
join、toLocateString、toStrigin、slice、cancat、indexOf、lastIndexOf、
ES7:
includes
join()数组转字符串
界说:join()办法用于把数组中的一切元素经过指定的分隔符进行分隔放入一个字符串,回来生成的字符串。
语法:
array.join(str)
参数:
str(可选):指定要运用的分隔符,默许运用逗号作为分隔符。
leta=[‘hello’,’world’];
letstr=a.join();//’hello,world’
letstr2=a.join(‘+’);//’hello+world’
运用join办法或许下文提到的toString办法时,当数组中的元素也是数组或许是目标时会呈现什么情况?
leta=[[‘OBKoro1′,’23’],’test’];
letstr1=a.join();//OBKoro1,23,test
letb=[{name:’OBKoro1′,age:’23’},’test’];
letstr2=b.join();//[objectObject],test
//目标转字符串引荐JSON.stringify(obj);
所以,join()/toString()办法在数组元素是数组的时分,会将里边的数组也调用join()/toString(),假如是目标的话,目标会被转为[objectObject]字符串。
toLocaleString()数组转字符串
界说:回来一个表明数组元素的字符串。该字符串由数组中的每个元素的toLocaleString()回来值经调用join()办法衔接(由逗号隔开)组成。
语法:
array.toLocaleString()
参数:无。
leta=[{name:’OBKoro1′},23,’abcd’,newDate()];
letstr=a.toLocaleString();//[objectObject],23,abcd,2018/5/28下午1:52:20
如上述栗子:调用数组的toLocaleString办法,数组中的每个元素都会调用自身的toLocaleString办法,目标调用目标的toLocaleString,Date调用Date的toLocaleString。
toString()数组转字符串不引荐
界说:toString()办法可把数组转化为由逗号链接起来的字符串。
语法:
array.toString()
参数:无。
该办法的效果和join办法一样,都是用于数组转字符串的,可是与join办法相比没有优势,也不能自界说字符串的分隔符,因而不引荐运用。
值得留意的是:当数组和字符串操作的时分,js会调用这个办法将数组自动转化成字符串
letb=[‘toString’,’演示’].toString();//toString,演示
leta=[‘调用toString’,’衔接在我后边’]+’啦啦啦’;//调用toString,衔接在我后边啦啦啦
slice()浅复制数组的元素
界说:办法回来一个从开端到完毕(不包括完毕)选择的数组的一部分浅复制到一个新数组目标,且原数组不会被修正。
留意:字符串也有一个slice()办法是用来提取字符串的,不要弄混了。
语法:
array.slice(begin,end);
参数:
begin(可选):索引数值,承受负值,从该索引处开端提取原数组中的元素,默许值为0。
end(可选):索引数值(不包括),承受负值,在该索引处前完毕提取原数组元素,默许值为数组结尾(包括最终一个元素)。
leta=[‘hello’,’world’];
letb=a.slice(0,1);//[‘hello’]
a[0]=’改动原数组’;
console.log(a,b);//[‘改动原数组’,’world’][‘hello’]
b[0]=’改动复制的数组’;
console.log(a,b);//[‘改动原数组’,’world’][‘改动复制的数组’]
如上:新数组是浅复制的,元素是简单数据类型,改动之后不会互相搅扰。
假如是复杂数据类型(目标,数组)的话,改动其间一个,另外一个也会改动。
leta=[{name:’OBKoro1′}];
letb=a.slice();
console.log(b,a);//[{“name”:”OBKoro1″}][{“name”:”OBKoro1″}]
//a[0].name=’改动原数组’;
//console.log(b,a);//[{“name”:”改动原数组”}][{“name”:”改动原数组”}]
//b[0].name=’改动复制数组’,b[0].koro=’改动复制数组’;
//[{“name”:”改动复制数组”,”koro”:”改动复制数组”}][{“name”:”改动复制数组”,”koro”:”改动复制数组”}]
原因在界说上面说过了的:slice()是浅复制,关于复杂的数据类型浅复制,复制的只是指向原数组的指针,所以不管改动原数组,仍是浅复制的数组,都是改动原数组的数据。
cancat
界说:办法用于合并两个或多个数组,回来一个新数组。
语法:
varnewArr=oldArray.concat(arrayX,arrayX,……,arrayX)
参数:
arrayX(有必要):该参数能够是具体的值,也能够是数组目标。能够是恣意多个。
eg1:
leta=[1,2,3];
letb=[4,5,6];
//衔接两个数组
letnewVal=a.concat(b);//[1,2,3,4,5,6]
//衔接三个数组
letc=[7,8,9]
letnewVal2=a.concat(b,c);//[1,2,3,4,5,6,7,8,9]
//增加元素
letnewVal3=a.concat(‘增加元素’,b,c,’再加一个’);
//[1,2,3,”增加元素”,4,5,6,7,8,9,”再加一个”]
//合并嵌套数组会浅复制嵌套数组
letd=[1,2];
letf=[3,[4]];
letnewVal4=d.concat(f);//[1,2,3,[4]]
ES6扩展运算符…合并数组:
由于ES6的语法更简练易懂,所以现在合并数组我大部分选用…来处理,…运算符能够完成cancat的每个栗子,且更简练和具有高度自界说数组元素方位的效果。
leta=[2,3,4,5]
letb=[4,…a,4,4]
console.log(a,b);//[2,3,4,5][4,2,3,4,5,4,4]
更多关于扩展符的具体内容移步阮一峰大神的ECMAScript6入门
indexOf()查找数组是否存在某个元素,回来下标
界说:回来在数组中能够找到一个给定元素的第一个索引,假如不存在,则回来-1。
语法:
array.indexOf(searchElement,fromIndex)
参数:
searchElement(有必要):被查找的元素
fromIndex(可选):开端查找的方位(不能大于等于数组的长度,回来-1),承受负值,默许值为0。
严格持平的查找:
数组的indexOf查找跟字符串的indexOf不一样,数组的indexOf运用严格持平===查找元素,即数组元素要彻底匹配才干查找成功。
留意:indexOf()不能辨认NaN
eg:
leta=[‘啦啦’,2,4,24,NaN]
console.log(a.indexOf(‘啦’));//-1
console.log(a.indexOf(‘NaN’));//-1
console.log(a.indexOf(‘啦啦’));//0
运用场景:
数组去重
依据获取的数组下标履行操作,改动数组中的值等。
判别是否存在,履行操作。
lastIndexOf()查找指定元素在数组中的最终一个方位
界说:办法回来指定元素,在数组中的最终一个的索引,假如不存在则回来-1。(从数组后边往前查找)
语法:
arr.lastIndexOf(searchElement,fromIndex)
参数:
searchElement(有必要):被查找的元素
fromIndex(可选):逆向查找开端方位,默许值数组的长度-1,即查找整个数组。
关于fromIndex有三个规矩:
正值。假如该值大于或等于数组的长度,则整个数组会被查找。
负值。将其视为从数组结尾向前的偏移。(比方-2,从数组最终第二个元素开端往前查找)
负值。其绝对值大于数组长度,则办法回来-1,即数组不会被查找。
leta=[‘OB’,4,’Koro1′,1,2,’Koro1′,3,4,5,’Koro1′];//数组长度为10
//letb=a.lastIndexOf(‘Koro1’,4);//从下标4开端往前找回来下标2
//letb=a.lastIndexOf(‘Koro1’,100);//大于或数组的长度查找整个数组回来9
//letb=a.lastIndexOf(‘Koro1’,-11);//-1数组不会被查找
letb=a.lastIndexOf(‘Koro1’,-9);//从第二个元素4往前查找,没有找到回来-1
ES7includes()查找数组是否包括某个元素回来布尔
界说:回来一个布尔值,表明某个数组是否包括给定的值
语法:
array.includes(searchElement,fromIndex=0)
参数:
searchElement(有必要):被查找的元素
fromIndex(可选):默许值为0,参数表明查找的开端方位,承受负值。正值超越数组长度,数组不会被查找,回来false。负值绝对值超越长数组度,重置从0开端查找。
includes办法是为了补偿indexOf办法的缺陷而呈现的:
indexOf办法不能辨认NaN
indexOf办法查看是否包括某个值不够语义化,需求判别是否不等于-1,表达不够直观
eg:
leta=[‘OB’,’Koro1′,1,NaN];
//letb=a.includes(NaN);//true辨认NaN
//letb=a.includes(‘Koro1’,100);//false超越数组长度不查找
//letb=a.includes(‘Koro1’,-3);//true从倒数第三个元素开端查找
//letb=a.includes(‘Koro1′,-100);//true负值绝对值超越数组长度,查找整个数组
兼容性(MDN):chrome47,Firefox43,Edge14,Opera34,Safari9,IE未完成。
遍历办法(12个):
js中遍历数组并不会改动原始数组的办法总共有12个:
ES5:
forEach、every、some、fliter、map、reduce、reduceRight、
ES6:
find、findIndex、keys、values、entries
关于遍历:
关于遍历的效率,能够看一下这篇详解JS遍历
尽量不要在遍历的时分,修正后边要遍历的值
尽量不要在遍历的时分修正数组的长度(删去/增加)
forEach
界说:按升序为数组中含有效值的每一项履行一次回调函数。
语法:
array.forEach(function(currentValue,index,arr),thisValue)
参数:
function(有必要):数组中每个元素需求调用的函数。
//回调函数的参数
1.currentValue(有必要),数组当时元素的值
2.index(可选),当时元素的索引值
3.arr(可选),数组目标自身
hisValue(可选):当履行回调函数时this绑定目标的值,默许值为undefined
关于forEach()你要知道:
无法半途退出循环,只能用return退出本次回调,进行下一次回调。
它总是回来undefined值,即便你return了一个值。
下面相似语法同样适用这些规矩
1.关于空数组是不会履行回调函数的
2.关于已在迭代过程中删去的元素,或许空元素会越过回调函数
3.遍历次数再第一次循环前就会确认,再增加到数组中的元素不会被遍历。
4.假如已经存在的值被改动,则传递给callback的值是遍历到他们那一刻的值。
eg:
leta=[1,2,,3];//最终第二个元素是空的,不会遍历(undefined、null会遍历)
letobj={name:’OBKoro1′};
letresult=a.forEach(function(value,index,array){
a[3]=’改动元素’;
a.push(‘增加到尾端,不会被遍历’)
console.log(value,’forEach传递的第一个参数’);//别离打印1,2,改动元素
console.log(this.name);//OBKoro1打印三次this绑定在obj目标上
//break;//break会报错
returnvalue;//return只能完毕本次回调会履行下次回调
console.log(‘不会履行,由于return会履行下一次循环回调’)
},obj);
console.log(result);//即便return了一个值,也仍是回来undefined
//回调函数也承受接头函数写法
every检测数组一切元素是否都契合判别条件
界说:办法用于检测数组一切元素是否都契合函数界说的条件
语法:
array.every(function(currentValue,index,arr),thisValue)
参数:(这几个办法的参数,语法都相似)
function(有必要):数组中每个元素需求调用的函数。
//回调函数的参数
1.currentValue(有必要),数组当时元素的值
2.index(可选),当时元素的索引值
3.arr(可选),数组目标自身
thisValue(可选):当履行回调函数时this绑定目标的值,默许值为undefined
办法回来值规矩:
假如数组中检测到有一个元素不满意,则整个表达式回来false,且剩下的元素不会再进行检测。
假如一切元素都满意条件,则回来true。=
eg:
functionisBigEnough(element,index,array){
returnelement>=10;//判别数组中的一切元素是否都大于10
}
letresult=[12,5,8,130,44].every(isBigEnough);//false
letresult=[12,54,18,130,44].every(isBigEnough);//true
//承受箭头函数写法
[12,5,8,130,44].every(x=>x>=10);//false
[12,54,18,130,44].every(x=>x>=10);//true
some数组中的是否有满意判别条件的元素
界说:数组中的是否有满意判别条件的元素
语法:
array.some(function(currentValue,index,arr),thisValue)
参数:(这几个办法的参数,语法都相似)
function(有必要):数组中每个元素需求调用的函数。
//回调函数的参数
1.currentValue(有必要),数组当时元素的值
2.index(可选),当时元素的索引值
3.arr(可选),数组目标自身
thisValue(可选):当履行回调函数时this绑定目标的值,默许值为undefined
办法回来值规矩:
假如有一个元素满意条件,则表达式回来true,剩下的元素不会再履行检测。
假如没有满意条件的元素,则回来false。
functionisBigEnough(element,index,array){
return(element>=10);//数组中是否有一个元素大于10
}
letresult=[2,5,8,1,4].some(isBigEnough);//false
letresult=[12,5,8,1,4].some(isBigEnough);//true
filter过滤原始数组,回来新数组
界说:回来一个新数组,其包括经过所供给函数完成的测验的一切元素。
语法:
letnew_array=arr.filter(function(currentValue,index,arr),thisArg)
参数:(这几个办法的参数,语法都相似)
function(有必要):数组中每个元素需求调用的函数。
//回调函数的参数
1.currentValue(有必要),数组当时元素的值
2.index(可选),当时元素的索引值
3.arr(可选),数组目标自身
thisValue(可选):当履行回调函数时this绑定目标的值,默许值为undefined
eg:
leta=[32,33,16,40];
letresult=a.filter(function(value,index,array){
returnvalue>=18;//回来a数组中一切大于18的元素
});
console.log(result,a);//[32,33,40][32,33,16,40]
map对数组中的每个元素进行处理,回来新的数组
界说:创立一个新数组,其成果是该数组中的每个元素都调用一个供给的函数后回来的成果。
语法:
letnew_array=arr.map(function(currentValue,index,arr),thisArg)
参数:(这几个办法的参数,语法都相似)
function(有必要):数组中每个元素需求调用的函数。
//回调函数的参数
1.currentValue(有必要),数组当时元素的值
2.index(可选),当时元素的索引值
3.arr(可选),数组目标自身
thisValue(可选):当履行回调函数时this绑定目标的值,默许值为undefined
eg:
leta=[‘1′,’2′,’3′,’4′];
letresult=a.map(function(value,index,array){
returnvalue+’新数组的新元素’
});
console.log(result,a);
//[“1新数组的新元素”,”2新数组的新元素”,”3新数组的新元素”,”4新数组的新元素”][“1″,”2″,”3″,”4″]
reduce为数组供给累加器,合并为一个值
界说:reduce()办法对累加器和数组中的每个元素(从左到右)运用一个函数,最终合并为一个值。
语法:
array.reduce(function(total,currentValue,currentIndex,arr),initialValue)
参数:
function(有必要):数组中每个元素需求调用的函数。
//回调函数的参数
1.total(有必要),初始值,或许上一次调用回调回来的值
2.currentValue(有必要),数组当时元素的值
3.index(可选),当时元素的索引值
4.arr(可选),数组目标自身
initialValue(可选):指定第一次回调的第一个参数。
回调第一次履行时:
假如initialValue在调用reduce时被供给,那么第一个total将等于initialValue,此刻currentValue等于数组中的第一个值;
假如initialValue未被供给,那么total等于数组中的第一个值,currentValue等于数组中的第二个值。此刻假如数组为空,那么将抛出TypeError。
假如数组仅有一个元素,而且没有供给initialValue,或供给了initialValue但数组为空,那么回调不会被履行,数组的唯一值将被回来。
eg:
//数组求和
letsum=[0,1,2,3].reduce(function(a,b){
returna+b;
},0);
//6
//将二维数组转化为一维将数组元素展开
letflattened=[[0,1],[2,3],[4,5]].reduce(
(a,b)=>a.concat(b),
[]
);
//[0,1,2,3,4,5]
reduceRight从右至左累加
这个办法除了与reduce履行方向相反外,其他彻底与其一致,请参考上述reduce办法介绍。
ES6:find()&findIndex()依据条件找到数组成员
find()界说:用于找出第一个契合条件的数组成员,并回来该成员,假如没有契合条件的成员,则回来undefined。
findIndex()界说:回来第一个契合条件的数组成员的方位,假如一切成员都不契合条件,则回来-1。
这两个办法
语法:
letnew_array=arr.find(function(currentValue,index,arr),thisArg)
letnew_array=arr.findIndex(function(currentValue,index,arr),thisArg)
参数:(这几个办法的参数,语法都相似)
function(有必要):数组中每个元素需求调用的函数。
//回调函数的参数
1.currentValue(有必要),数组当时元素的值
2.index(可选),当时元素的索引值
3.arr(可选),数组目标自身
thisValue(可选):当履行回调函数时this绑定目标的值,默许值为undefined
这两个办法都能够辨认NaN,补偿了indexOf的不足.
eg:
//find
leta=[1,4,-5,10].find((n)=>n<0);//回来元素-5
letb=[1,4,-5,10,NaN].find((n)=>Object.is(NaN,n));//回来元素NaN
//findIndex
leta=[1,4,-5,10].findIndex((n)=>n<0);//回来索引2
letb=[1,4,-5,10,NaN].findIndex((n)=>Object.is(NaN,n));//回来索引4
浏览器兼容(MDN):Chrome45,Firefox25,Opera32,Safari8,Edgeyes,
ES6keys()&values()&entries()遍历键名、遍历键值、遍历键名+键值
界说:三个办法都回来一个新的ArrayIterator目标,目标依据办法不同包括不同的值。
语法:
array.keys()
array.values()
array.entries()
参数:无。
遍历栗子(摘自ECMAScript6入门):
for(letindexof[‘a’,’b’].keys()){
console.log(index);
}
//0
//1
for(letelemof[‘a’,’b’].values()){
console.log(elem);
}
//’a’
//’b’
for(let[index,elem]of[‘a’,’b’].entries()){
console.log(index,elem);
}
//0″a”
//1″b”
在for..of中假如遍历半途要退出,能够运用break退出循环。
假如不运用for…of循环,能够手动调用遍历器目标的next办法,进行遍历:
letletter=[‘a’,’b’,’c’];
letentries=letter.entries();
console.log(entries.next().value);//[0,’a’]
console.log(entries.next().value);//[1,’b’]
console.log(entries.next().value);//[2,’c’]
entries()浏览器兼容性(MDN):Chrome38,Firefox28,Opera25,Safari7.1
keys()浏览器兼容性(MDN):Chrome38,Firefox28,Opera25,Safari8,
留意:目前只要Safari9支持,,其他浏览器未完成,babel转码器也还未完成
javascript数组对象操作方法
留意:以下是按操作来分类的,有的办法有多个用处,就有重复
1、数组的创立
vararrayObj=newArray();//创立一个数组
vararrayObj=newArray([size]);//创立一个数组并指定长度,留意不是上限,是长度
vararrayObj=newArray([element0[,element1[,…[,elementN]]]]);创立一个数组并赋值
要阐明的是,尽管第二种办法创立数组指定了长度,但实际上一切情况下数组都是变长的,也便是说即使指定了长度为5,依然能够将元素存储在规则长度以外的,留意:这时长度会随之改动。
2、数组的元素的拜访
vartestGetArrValue=arrayObj[1];//获取数组的元素值
arrayObj[1]=”这是新值”;//给数组元素赋予新的值
3、数组元素的添加
arrayObj.push([item1[item2[…[itemN]]]]);//将一个或多个新元素添加到数组结尾,并回来数组新长度
arrayObj.unshift([item1[item2[…[itemN]]]]);//将一个或多个新元素添加到数组开端,数组中的元素主动后移,回来数组新长度
arrayObj.splice(insertPos,0,[item1[,item2[,…[,itemN]]]]);//将一个或多个新元素插入到数组的指定方位,插入方位的元素主动后移,回来””。
4、数组元素的删去
arrayObj.pop();//移除最终一个元素并回来该元素值
arrayObj.shift();//移除最前一个元素并回来该元素值,数组中元素主动前移
arrayObj.splice(deletePos,deleteCount);//删去从指定方位deletePos开端的指定数量deleteCount的元素,数组形式回来所移除的元素
5、数组的截取和兼并
arrayObj.slice(start,[end]);//以数组的形式回来数组的一部分,留意不包括end对应的元素,假如省略end将复制start之后的一切元素
arrayObj.concat([item1[,item2[,…[,itemN]]]]);//将多个数组(也能够是字符串,或者是数组和字符串的混合)连接为一个数组,回来连接好的新的数组
6、数组的复制
arrayObj.slice(0);//回来数组的复制数组,留意是一个新的数组,不是指向
arrayObj.concat();//回来数组的复制数组,留意是一个新的数组,不是指向
7、数组元素的排序
arrayObj.reverse();//反转元素(最前的排到最终、最终的排到最前),回来数组地址
arrayObj.sort();//对数组元素排序,回来数组地址
8、数组元素的字符串化
arrayObj.join(separator);//回来字符串,这个字符串将数组的每一个元素值连接在一起,中心用separator隔开。
toLocaleString、toString、valueOf:能够看作是join的特别用法,不常用
二、数组目标的3个特点
1、length特点
Length特点表示数组的长度,即其间元素的个数。由于数组的索引总是由0开端,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length特点是可变的,这一点需要特别留意。当length特点被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length特点变大;当length特点被设置得比本来小时,则原先数组中索引大于或等于length的元素的值全部被丢掉。下面是演示改动length特点的比如:
vararr=[12,23,5,3,25,98,76,54,56,76];
//界说了一个包括10个数字的数组
alert(arr.length);//显现数组的长度10
arr.length=12;//增大数组的长度
alert(arr.length);//显现数组的长度现已变为12
alert(arr[8]);//显现第9个元素的值,为56
arr.length=5;//将数组的长度减少到5,索引等于或超越5的元素被丢掉
alert(arr[8]);//显现第9个元素现已变为”undefined”
arr.length=10;//将数组长度恢复为10
alert(arr[8]);//尽管长度被恢复为10,但第9个元素却无法收回,显现”undefined”
由上面的代码我们能够清楚的看到length特点的性质。但length目标不只能够显式的设置,它也有可能被隐式修正。JavaScript中能够运用一个未声明过的变量,相同,也能够运用一个未界说的数组元素(指索引超越或等于length的元素),这时,length特点的值将被设置为所运用元素索引的值加1。例如下面的代码:
vararr=[12,23,5,3,25,98,76,54,56,76];
alert(arr.length);
arr[15]=34;
alert(arr.length);
代码中相同是先界说了一个包括10个数字的数组,通过alert句子能够看出其长度为10。随后运用了索引为15的元素,将其赋值为15,即arr[15]=34,这时再用alert句子输出数组的长度,得到的是16。无论如何,关于习惯于强类型编程的开发人员来说,这是一个很令人惊讶的特性。事实上,运用newArray()形式创立的数组,其初始长度便是为0,正是对其间未界说元素的操作,才使数组的长度发生变化。
由上面的介绍能够看到,length特点是如此的奇特,利用它能够便利的添加或者减少数组的容量。因而对length特点的深化了解,有助于在开发过程中灵活运用。
2、prototype特点
回来目标类型原型的引证。prototype特点是object共有的。
objectName.prototype
objectName参数是object目标的称号。
阐明:用prototype特点供给目标的类的一组基本功能。目标的新实例“继承”赋予该目标原型的操作。
关于数组目标,以以下比如阐明prototype特点的用处。
给数组目标添加回来数组中最大元素值的办法。要完结这一点,声明一个函数,将它参加Array.prototype,并运用它。
functionarray_max()
{
vari,max=this[0];
for(i=1;i<this.length;i++)
{
if(max<this[i])
max=this[i];
}
returnmax;
}
Array.prototype.max=array_max;
varx=newArray(1,2,3,4,5,6);
vary=x.max();
该代码执行后,y保存数组x中的最大值,或说6。
3、constructor特点
表示创立目标的函数。
object.constructor//object是目标或函数的称号。
阐明:constructor特点是一切具有prototype的目标的成员。它们包括除Global和Math目标以外的一切JScript固有目标。constructor特点保存了对构造特定目标实例的函数的引证。
例如:
x=newString(“Hi”);
if(x.constructor==String)//进行处理(条件为真)。

functionMyFunc{
//函数体。
}
y=newMyFunc;
if(y.constructor==MyFunc)//进行处理(条件为真)。
关于数组来说:
y=newArray();

未经允许不得转载:IT技术网站 » javascript 数组(对象操作方法)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载