当前位置: 首页 > Web前端 > HTML5

平时工作时一些数组常用方法,以及操作总结

时间:2023-04-05 16:08:04 HTML5

数组在平时工作中常用的一些方法,以及操作总结render。废话不多说,来看看数组包含的方法,可能不是很全面,不足之处请补充,大家的共同成长才是写这篇文章的目的不是吗?!ES5中Array的常用API:1、join()2、push()3、pop()4、splice()5、indexOf()6、lastIndexOf()7、reverse()8、slice()9、every()10,some()11,reduce()12,reduceRight()13,forEach()14,map()15,filter()16,sort()17,concat()18,shift()19,unshift()20、toLocaleString()ES6new:1、扩展运算符的使用...2、Array.form()3、Array.of()4、copyWithin()5、find()6、findIndex()7,fill()8,entries()9,flat()10,flatMap()11,keys()12,values()13,数组空位提示:es6的用法有很多。阮一峰大师的API(是的,连目录都是抄的)在使用的时候加入了一些自己的心得和见解。大家喷我的时候点一下(我就是抄的,你说了我就不改了)附上阮一峰写的文档链接http://es6.ruanyifeng.com/#do...不要废话不多说,直奔主题一:数组对象的join方法:join方法将数组对象中的每一个对象都转成一个字符串,并与传入的参数字符串进行拼接,返回一个字符串让Arr=[1,2,3,4]console.log(Arr.join(','))//1,2,3,4console.log(Arr.join('-'))//1-2-3-4让arr2=[1,2,[3,4],[5,6]]console.log(Arr2.join(','))//1,2,3,4,5,6//如果有数组中的一个对象,首先会在对象上使用tostring方法,所以会把对象转成[objectObject],一般不会这样做也不多解释letArr3=[1,2,{name:'name1',value:1}]//1,2,[对象对象]console.log(Arr3.join(','))2:数组对象的push方法:这个方法相信大家都不陌生,就是把元素追加到数组的末尾,但实际上,这个方法有一个反向参数,你可能没有注意letarr=[1,2,3]console.log(`pushreturnparameter:${arr.push(4)}appendedarrayobject:${arr}`)//Printresultpushreturnparameter:4Appendedarrayobjects:1,2,3,4//注意打印出来的arr.push(4)没有reverse参数4,是的,返回的是拼接后的长度array(lengthattribute)//数组对象可以接受所有的对象,所以push方法的入参可以是所有合法的对象(Symbol对象好像没有,或者我没有转换)letarr=[1,2]arr.push('String')arr.push(Symbol('symbol'))arr.push({name:'testName',value:'萨鲁法尔'})arr.push([3,4])arr.push(undefined)arr.push(null)arr.push(NaN)arr.push(newDate())console.dir(arr)输出结果:2:数组对象的pop方法:pop()方法会删除最后一个元素arrayObject并减少数组1的长度,并返回它删除的元素的值。如果数组已经为空,则pop()不会更改数组,并返回值undefined。//popletarr=[1,2,3]console.log(arr.pop())//3返回删除的元素console.log(arr)//[1,2]删除最后一个元素数组letarr2=[1]console.log(arr2.pop())//1console.log(arr2)//[]letarr3=[]console.log(arr3.pop())//undefinedconsole.log(arr3)//[]3:数组对象的splice()方法splice()方法在数组中添加/删除项,然后返回删除的项。splice方法有多个参数,不需要每个都填,具体参数我借用了w3cschool的文档,讲解语法arrayObject.splice(index,howmany,item1,...,itemX)参数和使用索引:必需的。指定添加/删除项目的整数,使用负数指定从数组末尾开始的位置。多少:必填。要删除的项目数。如果设置为0,项目将不会被删除。item1,...,itemX:可选。添加到数组的新项目。//spliceletarr=[1,2,3,4]//arr.splice(1,2)//从数组indexOf为1的位置删除两个元素,返回一个数组console.log(arr.splice(1,2))//[2,3]console.log(arr)//[1,4]letarr2=[1,2,3,4]arr2.splice(1,2,666,777,888)//来自arr2indexOfto删除位置1的两个元素,并在666,777,888插入三个元素console.log(arr2)//[1,666,777,888,4]letarr3=[1,2,3,4]arr3.splice(-1,1,7777)//从arr3的末尾删除1个元素,在删除的元素处插入7777console.log(arr3)//[1,2,3,7777]letarr4=[1,2,3,4]arr4.splice(-1,0,6666)//从arr4的末尾删除0个元素,在删除元素的位置插入7777console.log(arr4)//[1,2,3,6666,4]letarr5=[1,2,3,4]arr5.splice(-2,3,9999)console.log(arr5)//[1,2,9999]5:的indexOf方法数组对象:返回数组中Position中的入参(第一次出现)//indexOfletarr=['a','b','c','d']console.log(arr.indexOf('c'))//2letarr2=['a','b','b','b']console.log(arr2.indexOf('b'))//16:数组对象的lastIndexOf方法:返回入参在数组中的位置(最后一次出现)用法至于indexOf()就不细说了7:数组对象的reverse方法:反转数组中元素的位置//反向让arr=[1,2,3,4]arr.reverse()console.log(arr)//[4,3,2,1]8:数组对象的slice方法:从现有数组返回选中的元素用法:arrayObject.slice(start,end)start:必须指定从哪里开始选择。如果为负,则它指定从数组末尾开始的位置。也就是说,-1指的是最后一个元素,-2指的是倒数第二个元素,依此类推。选修的。指定结束选择的位置。该参数为数组切片末尾的数组下标。如果不指定该参数,拆分后的数组包含数组从头到尾的所有元素。如果此参数为负数,则它指定从数组末尾开始计数的元素。//sliceletarr=[1,2,3,4]console.log(arr.slice(0,2))//[1,2]//返回arr中的第一个元素,开始截取两个长度的数组lengthconsole.log(arr)//[1,2,3,4]//这个方法和拼接方法不同,它只是返回一段数组的长度拼接成一个数组返回,而不改变原数组9:数组对象的every方法获取数组对象中的每个元素是否满足要求letarr=[10,11,12,13]console.log(arr.every(i=>i>10))//判断arr中所有元素是否大于10//falseconsole.log(arr.every(i=>i>9))//判断arr中所有元素是否大于9//true10:数组对象的some方法获取数组对象是否符合规则元素letarr=[10,11,12,13]console.log(arr.some(i=>i<9))//判断是否arr中任意元素小于9//falseconsole.log(arr.some(i=>i<11))//判断arr中是否有小于11的元素//true11:reduce方法累加器数组对象的方法,有点类似于forEach方法,遍历计算数组中的对象并返回最终结果//reduceletarr=[1,2,3,4,5,6,7,8,9,10]console.log('Result:'+arr.reduce((x,y)=>{console.log(`x=>${x}`)console.log(`y=>${y}`)returnx+y}))//55从输出结果可以发现,第一次运行回调函数时x为1,y为2,第二次x=3,y=3,第三次输出x=6,y=4,可以看出第一次x等于数组第一个元素的值,第二次是数组第二个元素的值,并且之后,x为回调函数返回的值,y为arr[times]的值11:数组对象的reduceRight方法//reduceRightletarr=[1,2,3,4,5,6,7,8,9,10]console.log('Result:'+arr.reduceRight((x,y)=>{console.log(`x=>${x}`)console.log(`y=>${y}`)returnx+y}))//55从输出可以看出reduceRight方法和reduce方法,之后从末尾开始加12:数组对象的forEach方法用于调用数组的每个元素,并将元素传递给回调函数letarr=['aaa','ccc','ddd','eee','bbb']arr.forEach((currentValue,index,arr)=>{console.log(`index:${index},value:${currentValue}`)console.log(arr)})/*this要输出结果index:0,value:aaa['aaa','ccc','ddd','eee','bbb']...forEach方法遍历数组中的元素并在回调函数中执行操作currentValue为遍历的当前元素的值,index为当前元素的索引,arr为当前元素返回的数组。forEach方法用于调用数组的每个元素并将元素传递给回调函数如果需要对数组中的每个元素进行操作或判断,可以使用该方法。如果遍历需要返回,不建议使用*/我就不多说了。这个平时用的比较多,大家基本都知道。用法13:数组对象的map方法这个和forEach方法很像,区别写在代码备注里`letarr=['aaa','ccc','ddd','eee','bbb']安慰。log(arr.map((currentValue,index,arr)=>{returncurrentValue+index}))/*这是输出结果[aaa1,ccc2,ddd3,eee4,bbb5]map方法和forEach方法很类似于回调方法两者都必须传递当前遍历元素的值和当前元素的可选索引。与当前元素所在数组唯一不同的是forEach方法没有返回值,而map方法会返回一个新的数组。这用于向数组中添加一些元素。新建子元素很方便(操作数组)*/`14:数组对象filter方法filter方法,过滤掉数组对象中符合自定义规则的元素,组合成一个新的数组return//filterletarr=[111,222,333,444,555,666]console.log(arr.filter((currentValue,index,arr)=>{returncurrentValue>333}))//输出结果[444,555,666]/***filter方法的入参相同对于每个map,currentValue是必须的fill,index,arr可选*filter会返回一个新的数组,过滤掉不符合自定义规则的数组**/15:数组对象的sort方法主要用于对数组进行排序数组,可以传入一个回调函数来定义排序方式,一般在比较Number元素的大小时可用。如果数组中的元素都是Number类型,没有传入回调函数,则返回原数组。说白了,大小比较只对不传回调函数的String类型有效,所以不想传入。如果回调函数要对纯Number数组进行排序,必须先将所有的转换数组元素转换成String类型进行排序。废话不多说,我们直接上传代码letarr=[333,11,666,2,8,123,0]letarr2=['zzz','eee','sss','aaa','ddd']console.log(arr2.sort())//["aaa","ddd","eee","sss","zzz"]console.log(arr.sort())//[0,11,123,2,333,666,8]//by可以看出,不传回调函数的回调函数对于纯Number类型的数组是无效的。可以看出sort方法的排序方式是通过编码对数组元素进行排序//PureNumber类型数组从小到大排序console.log(arr.sort((a,f)=>{returna-f}))//[0,2,8,11,123,333,666]//将纯Number类型数组从大到小排序console.log(arr.sort((a,f)=>{return-(a-f)}))//[666,333,123,11,8,2,0]16:数组对象的concat方法:这个方法现在用的不多还是我告诉你,这个方法是用来拼接的数组,并且可以传入多个参数(至少一个)以返回一个新数组。如果传入一个数组,则拼接成数组中的元素,而不是数组letarr=[1,2,3,4,5]console.log(arr.concat(6,7,8,[9,10],[11],[12,13]))//[1,2,3,4,5,6,7,8,9,10,11,12,13]我不会话不多说,ES6中有更好的方法,下一篇博客我会讲解17:数组对象shift方法:这个不太好用,我就简单说明一下,毕竟一家人最重要就是要整洁。如果数组为空,则shift()方法将不执行任何操作并返回未定义的值//shiftletarr=[1,2,3,4,5]console.log(arr.shift())//1console.log(arr)//[2,3,4,5]//注意嗯,这个方法会改变原数组的长度,一般情况下一般不会用到。18:数组对象的unshift方法:unshift()方法会把它的参数插入到arrayObject的头部,将已有的元素依次移位。更高的下标以留出空间。此方法的第一个参数将成为数组的新元素0,如果有第二个参数,它将成为新元素1,依此类推。(这段我直接抄了,因为不知道怎么表达)废话不多说,上代码//unshiftletarr=[1,2,3,4,5]console.log(arr.unshift(6))//6console.log(arr.unshift([7,8,9]))//7console.log(arr)//[[7,8,9],6,1,2,3,4,5]//unshift方法返回新数组的长度,shift方法返回第一个删除的元素。这两种方法都会改变数组的长度,如果传入的参数是数组,则不会像concat方法一样传入。输入数组元素并将它们分解。我能想到的数组方法就这么多了。这些都是es6之前的。在es6中有许多用于操作数组的新的和有用的API。我将在下一篇博客中讨论它们。同时也会说说我平时工作中操作数组的一些风骚操作。希望大家能纠正我的意见。写博客的目的不就是为了共同成长吗?我现在只是个菜鸟,希望大家多多给我加分,希望你们的代码永远不会有bug