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

js数组方法

时间:2023-03-28 14:32:48 HTML

JavaScript中创建数组有两种方式(1)使用Array构造函数:vararr1=newArray();//创建一个空数组vararr2=newArray(20);//创建一个包含20个项目的数组Arrayvararr3=newArray("lily","lucy","Tom");//创建一个包含3个字符串的数组(2)使用数组字面量表示法:vararr4=[];//创建一个空数组vararr5=[20];//创建一个包含1项的数组vararr6=["lily","lucy","Tom"];//创建一个包含3个字符串的数组数组方法包括数组原型方法和继承自object对象的方法。这里只介绍数组原型方法。数组原型方法主要有以下几种:join()push()和pop()shift()和unshift()sort()reverse()concat()slice()splice()indexOf()和lastIndexOf()(ES5new)forEach()(ES5new)map()(ES5new)filter()(ES5新增)every()(ES5新增)some()(ES5新增)reduce()和reduceRight()(ES5新加入)下面详细介绍各个方法的基本功能。1.join()join(separator):将数组的元素组合成一个字符串,使用separator作为分隔符。如果省略,则默认使用逗号作为分隔符。该方法只接受一个参数:分隔符。vararr=[1,2,3];console.log(arr.join());//1,2,3console.log(arr.join("-"));//1-2-3控制台。日志(arr);//[1,2,3](原数组不变)重复字符串可以通过join()方法实现,只需传入字符串和重复次数即可返回重复字符串,函数如下:functionrepeatString(str,n){returnnewArray(n+1).join(str);}console.log(repeatString("abc",3));//abcabcabcconsole.log(repeatString("Hi",5));//HiHiHiHiHi2、push()和pop()push():可以接收任意数量的参数,将它们一一添加到数组末尾,返回修改后的数组长度。pop():从数组末尾移除最后一项,减少数组的长度值,并返回移除的项。vararr=["Lily","lucy","Tom"];varcount=arr.push("Jack","Sean");console.log(count);//5console.log(arr);//["Lily","lucy","Tom","Jack","Sean"]varitem=arr.pop();console.log(item);//Seanconsole.log(arr);//["Lily","lucy","Tom","Jack"]3、shift()和unshift()shift():删除原数组的第一项,返回删除元素的值;如果数组为空,则返回undefined。unshift:将参数添加到原数组的开头,返回数组的长度。这组方法对应上面的push()和pop()方法,一个是操作数组的开头,一个是操作数组的结尾。vararr=["Lily","lucy","Tom"];varcount=arr.unshift("Jack","Sean");console.log(count);//5console.log(arr);//["Jack","Sean","Lily","lucy","Tom"]varitem=arr.shift();console.log(item);//Jackconsole.log(arr);//["Sean","Lily","lucy","Tom"]4、sort()sort():将数组项按升序排列——即最小值在最前面,最大值在底部。排序时,sort()方法会调用每个数组项的toString()转换方法,然后比较得到的字符串,决定如何排序。即使数组中的每一项都是一个值,sort()方法比较的是字符串,所以会出现下面的情况:vararr1=["a","d","c","b"];console.log(arr1.sort());//["a","b","c","d"]arr2=[13,24,51,3];console.log(arr2.sort());//[13,24,3,51]console.log(arr2);//13,24,3,51为了解决上面的问题,sort()方法可以接收一个比较函数作为参数,这样我们就可以指定哪个值在哪个值之前。比较函数有两个参数,如果第一个参数应该在第二个参数之前,则返回一个负数;如果两个参数相等,则返回0;如果第一个参数应该在第二个参数之后,则返回一个正数。下面是一个简单的比较函数:functioncompare(value1,value2){if(value1value2){return1;}else{return0;}}arr2=[13,24,51,3];console.log(arr2.sort(比较));//[3,13,24,51]如果需要通过比较函数生成降序排序结果,只需交换比较函数返回的值即可:functioncompare(value1,value2){if(value1value2){return-1;}else{return0;}}arr2=[13,24,51,3];console.log(arr2.sort(比较));//[51,24,13,3]5.reverse()reverse():反转数组项的顺序。vararr=[13,24,51,3];console.log(arr.reverse());//[3,51,24,13]console.log(arr);//3,51,24,136.concat()concat():将参数添加到原数组中。该方法会先创建当前数组的副本,然后将接收到的参数添加到副本的末尾,最后返回新构造的数组。在没有参数传递给concat()方法的情况下,它只是复制当前数组并返回副本。vararr=[1,3,5,7];vararrCopy=arr.concat(9,[11,13]);console.log(arrCopy);//[1,3,5,7,9,11,13]console.log(arr);//1,3,5,7从上面的测试结果可以发现:如果输入不是数组,直接在数组后面添加参数,如果输入是数组,则添加其中的每一项数组被添加到数组中。但是如果传入一个二维数组呢?vararrCopy2=arr.concat([9,[11,13]]);console.log(arrCopy2);//[1,3,5,7,9,Array[2]]console.log(arrCopy2[5]);//[11,13]上面代码中,arrCopy2数组的第五项是一个包含两项的数组,也就是说concat方法只能将传入数组中的每一项添加到数组中,如果有的话传入数组中的项是数组,此数组项也将作为项添加到arrCopy2。7.slice()slice():返回一个由原数组中指定开始下标和结束下标之间的项组成的新数组。slice()方法可以接受一个或两个参数,即要返回的项目的起始位置和结束位置。只有一个参数,slice()方法返回从参数指定的位置到当前数组末尾的所有项目。使用两个参数,该方法返回介于(但不包括)开始和结束位置之间的项目。vararr=[1,3,5,7,9,11];vararrCopy=arr.切片(1);vararrCopy2=arr。切片(1,4);vararrCopy3=??arr.slice(1,-2);vararrCopy4=arr.slice(-4,-1);console.log(arr);//1,3,5,7,9,11console.log(arrCopy);//[3,5,7,9,11]console.log(arrCopy2);//[3,5,7]console.log(arrCopy3);//[3,5,7]console.log(arrCopy4);//[5,7],9]arrCopy只设置一个参数,即起始下标为1,所以返回的数组是从下标1开始(包括下标1)到数组末尾。arrCopy2设置两个参数,返回从起始下标(含1)到结束下标(不含4)的子数组。arrCopy3设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度(6)的值来替换这个位置的数,所以是一个从1开始到4(不包括在内)。arrCopy4中的两个参数都是负数,所以通过加上数组长度6转为正数,所以相当于slice(2,5)。8.splice()splice():一个非常强大的数组方法,它有很多用法,可以实现删除、插入和替换。删除:可以删除任意数量的项目,只需指定2个参数:要删除的第一个项目的位置和要删除的项目数。例如,splice(0,2)删除数组中的前两项。Insert:可以向给定位置插入任意数量的项目,只需提供3个参数:起始位置、0(要删除的项目数)和要插入的项目。例如,splice(2,0,4,6)从当前数组的位置2开始插入4和6。替换:可以在指定位置插入任意数量的item,同时删除任意数量的item,只需要指定3个参数:起始位置,删除的item个数,插入的item任意个数。插入的项目数不必等于删除的项目数。例如,splice(2,1,4,6)删除当前数组位置2的项目,然后从位置2开始插入4和6。splice()方法总是返回一个包含从原始数组中删除的项目的数组,如果没有删除任何项目,则为空数组。vararr=[1,3,5,7,9,11];变种arrRemoved=arr。拼接(0,2);安慰。日志(arr);//[5,7,9,11]控制台。日志(arrRemoved);//[1,3]vararrRemoved2=arr.splice(2,0,4,6);console.log(arr);//[5,7,4,6,9,11]控制台.log(arrRemoved2);//[]vararrRemoved3=arr.splice(1,1,2,4);console.log(arr);//[5,2,4,4,6,9,11]console.log(arrRemoved3);//[7]9、indexOf()和lastIndexOf()indexOf():接收两个参数:要查找的项目和(可选)指示搜索起始位置的索引。其中,从数组的开头(位置0)向后看。lastIndexOf:接收两个参数:要查找的项目和(可选)表示搜索起始位置的索引。其中,从数组的末尾向前看。两种方法都返回正在查找的项目在数组中的位置,如果未找到则返回?1。将第一个参数与数组中的每一项进行比较时,使用相等运算符。vararr=[1,3,5,7,7,5,3,1];控制台日志(arr.indexOf(5));//2console.log(arr.lastIndexOf(5));//5console.log(arr.indexOf(5,2));//2console.log(arr.lastIndexOf(5,4));//2console.log(arr.indexOf("5"));//-110,forEach()forEach():遍历数组并对数组中的每一项运行给定的函数。该方法没有返回值。参数都是函数类型,默认有传参。参数为:要遍历的数组内容;相应数组的索引,以及数组本身。vararr=[1,2,3,4,5];arr.forEach(function(x,index,a){console.log(x+'|'+index+'|'+(a===arr));});//输出为://1|0|true//2|1|true//3|2|true//4|3|true//5|4|true11、map()map():指的是“映射”,在其上运行给定的函数数组中的每一项,并返回每个函数调用结果的数组。下面的代码使用map方法实现数组中每个数的平方。vararr=[1,2,3,4,5];vararr2=arr。地图(函数(项目){返回项目*项目;});安慰。日志(arr2);//[1,4,9,16,25]12.filter()filter():“过滤”函数,数组中的每一项运行给定的函数,返回满足过滤条件的数组。vararr=[1,2,3,4,5,6,7,8,9,10];vararr2=arr。filter(function(x,index){返回索引%3===0||x>=8;});控制台日志(arr2);//[1,4,7,8,9,10]13、every()every():判断数组中的每一项是否满足条件,只有所有项都满足条件才返回true。vararr=[1,2,3,4,5];vararr2=arr.every(function(x){returnx<10;});控制台日志(arr2);//truevararr3=arr.every(function(x){returnx<3;});控制台日志(arr3);//false14,some()some():判断数组中是否有满足条件的项,只要有满足条件的项就返回true。vararr=[1,2,3,4,5];vararr2=arr.some(function(x){returnx<3;});控制台日志(arr2);//truevararr3=arr.some(function(x){returnx<1;});控制台日志(arr3);//false15,reduce()和reduceRight()将实现对数组中所有项的迭代,然后构建最终返回值。reduce()方法从数组的第一项开始,逐项遍历到末尾。而reduceRight()从数组的最后一项开始,向前遍历到第一项。这两种方法都有两个参数:调用每个项目的函数和(可选)合并所基于的初始值。传递给reduce()和reduceRight()的函数接收4个参数:前一个值、当前值、项目的索引和数组对象。此函数返回的任何值都会作为第一个参数自动传递给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项。下面的代码使用reduce()实现数组求和,在开始的时候给数组加上一个初始值10。var值=[1,2,3,4,5];var总和=值。reduceRight(function(prev,cur,index,array){returnprev+cur;},10);安慰。日志(总和);//25