深入理解ECMA2015（四）——数组扩展一、JavaScript数组详解（ES6之前）（一）数组的创建使用Array构造函数：vararr1=新数组();//创建一个空数组vararr2=newArray(20);//创建一个包含20个项目的数组vararr3=newArray("lily","lucy","Tom");//创建一个包含3个字符串的数组，使用数组文字表示法：vararr4=[];//创建一个空数组vararr5=[20];//创建一个包含1项的数组vararr6=["lily","lucy","Tom"];//创建一个包含3个字符串的数组（二）原型方法数组原型方法概述//会改变原来的数组push()和pop()shift()和unshift()sort()reverse()splice()//会不更改原始数组concat()slice()join()indexOf()和lastIndexOf()（ES5新）forEach()（ES5新）map()（ES5新）filter()（ES5新）every()(NewtoES5)some()(NewtoES5)reduce()和reduceRight()(NewtoES5)数组原型方法使用详解join()join(分隔符)：将数组的元素分组为一个字符串，使用分隔符作为分隔符。如果省略，则默认使用逗号作为分隔符。该方法只接受一个参数：分隔符。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",2));//HiHipush()和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"]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"]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()方法可以接收一个比较函数作为参数，这样我们就可以处理两个值是否一致交换职位；比较函数接收两个参数，即前一个值和下一个值；如果返回false，则不交换位置，通过比较函数Resultfunctioncompare(value1,value2){if(value1value2)按降序生成真正的交换位置){return-1;}else{return0;}}arr2=[13,24,51,3];console.log(arr2.sort(compare));//[51,24,13,3]通过比较函数生成随机排序数组的结果functionrandomArr(arr){//body...returnarr.sort(function(pre,next){return(0.5-Math.random())})}是洗牌算法，但实际上证明了上面的不是完全随机函数shuffleArray(array){for(vari=array.length-1;i>0;i--){varj=数学。floor(Math.random()*(i+1));vartemp=array[i];数组[i]=数组[j]；数组[j]=温度；}returnarray;}了解更多shuffletostacko顺流；理解算法到算法分析reverse()vararr=[13,24,51,3];console.log(arr.reverse());//[3,51,24,13]console.log(arr);//[3,51,24,13](原数组改变)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]（原数组未修改）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);控制台日志（arr）；//[1,3,5,7,9,11]（原数组没有变化）console.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]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];vararrRemoved=arr.splice(0,2);console.log(arr);//[5,7,9,11]console.log(arrRemoved);//[1,3]vararrRemoved2=arr.splice(2,0,4,6);console.log(arr);//[5,7,4,6,9,11]console.log(arrRemoved2);//[]vararrRemoved3=arr.splice(1,1,2,4);console.log(arr);//[5,2,4,4,6,9,11]console.log(arrRemoved3);//[7]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"));//-1forEach()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|truemap()map():指的是“映射”，在每个项目上运行给定的函数在数组中，并返回每个函数调用结果的数组。vararr=[1,2,3,4,5];vararr2=arr。地图（函数（项目）{返回项目*项目；}）；安慰。日志（arr2）；//[1,4,9,16,25]经典面试题console.log([1,2,3].map(parseInt))//[1,NaN,NaN]以上代码可以分解为：console.log([1,2,3].map(function(val,key,arr){parseInt(val,key)}))//循环返回[parseInt(1,0),parseInt(2,1),parseInt(3,2)]即For[1,NaN,NaN]map接收两个参数，parseInt接收两个，第一个是value，第二个是base，当第一个参数大于第二个base参数时，它是南;了解更多面试题前端面试题JavaScriptfilter()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]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）；//falsesome()some()：判断数组中是否有满足条件的项。只要有符合条件的项目，就会返回true。vararr=[1,2,3,4,5];vararr2=arr.some(function(x){returnx<3;});控制台日志（arr2）；//truevararr3=arr.some(function(x){returnx<1;});控制台日志（arr3）；//falsereduce()和reduceRight()方法都会遍历数组中的所有项，然后构造最终的返回值。reduce()方法从数组的第一项开始，逐项遍历到末尾。reduceRight()从数组的最后一项开始，向前遍历到第一项。这两种方法都有两个参数：调用每个项目的函数和（可选）合并所基于的初始值。传递给reduce()和reduceRight()的函数接收4个参数：前一个值、当前值、项目的索引和数组对象。此函数返回的任何值都会作为第一个参数自动传递给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。下面的代码使用reduce()实现数组求和，在开始的时候给数组加上一个初始值10。var值=[1,2,3,4,5];var总和=值。reduceRight(function(prev,cur,index,array){returnprev+cur;},10);安慰。日志（总和）；//252.ES6数组的扩展(1)Array.from()Array.from方法用于将两类对象转换成真正的数组：类数组对象（array-likeobject）和可遍历（iterable）对象（包括ES6新数据结构Set和Map）。letarrayLike={'0':'a','1':'b','2':'c',length:3};//ES5写法vararr1=[].slice.call(arrayLike);//['a','b','c']//ES6的写法letarr2=Array.from(arrayLike);//['a','b','c']在实际应用中，常见的类数组对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from可以将它们变成真正的数组。//NodeList对象letps=document.querySelectorAll('p');Array.from(ps).forEach(function(p){console.log(p);});//argumentsobjectfunctionfoo(){varargs=Array.from(arguments);//querySelectorAll方法返回一个类数组对象，forEach方法只有在对象转换为真正的数组时才能使用。}值得提醒的是，展开运算符(...)还可以将一些数据结构转换为数组//argumentsobjectfunctionfoo(){varargs=[...arguments];}//NodeListobject[...document.querySelectorAll('div')](2)Array.of()Array.of方法用于将一组值转换成数组。Array.of(3,11,8)//[3,11,8]Array.of(3)//[3]Array.of(3).length//1这个方法的主要目的是让upthearray构造函数Array()的不足。因为参数个数不同，Array()的行为也会不同。Array()//[]Array(3)//[,,,]Array(3,11,8)//[3,11,8](3)数组实例的copyWithin()一个数组实例的copyWithin方法数组实例，在当前数组内部，将指定位置的成员复制到另一个位置（原来的成员会被覆盖），然后返回当前数组。也就是说，使用这个方法会修改当前数组。Array.prototype.copyWithin(target,start=0,end=this.length)它接受三个参数。target（必需）：开始替换数据的位置。start（可选）：开始读取数据的位置，默认为0。如果是负值，则表示倒数。end（可选）：到达该位置前停止读取数据，默认等于数组长度。如果是负值，则表示倒数。这三个参数应该都是数值，如果不是，会自动转为数值//Copybit3tobit0[1,2,3,4,5].copyWithin(0,3,4)//[4,2,3,4,5]//-2相当于位置3，-1相当于位置4[1,2,3,4,5].copyWithin(0,-2,-1)//[4,2,3,4,5]//将位置3复制到位置0[].copyWithin.call({length:5,3:1},0,3)//{0:1,3:1,length:5}(4)数组实例的find()和findIndex()方法用于查找第一个满足条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行回调函数，直到找到第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。-find方法的回调函数可以接受三个参数，依次是当前值、当前位置和原数组。```[1,5,10,15].find(function(value,index,arr){returnvalue>9;})//10```数组实例的findIndex方法的使用非常相似到find方法，返回符合条件的第一个数组成员的位置，如果没有成员符合条件，则返回-1。[1,5,10,15].findIndex(function(value,index,arr){returnvalue>9;})//2(4)数组实例的fill()填充方法使用给定的值进行填充数组。['a','b','c'].fill(7)//[7,7,7]newArray(3).fill(7)//[7,7,7]填充方法OK接受指定填充开始和结束位置的第二个和第三个参数。['a','b','c'].fill(7,1,2)//['a',7,'c']上面代码表示fill方法从位置1开始填充原数组7，到第2个位置之前结束。(5)数组实例的entries()、keys()和values()ES6提供了三个新的方法——entries()、keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环遍历。唯一不同的是，keys()遍历键名，values()遍历键值，entries()遍历键值For(letindexof['a','b'].keys()){console.log(index);}//0//1for(letelemof['a','b'].values()){console.log(elem);}//'a'//'b'对于(let[index,elem]of['a','b'].entries()){console.log(index,elem);}//0"a"//1"b"(6)数组实例的includes()Array.prototype.includes方法返回一个布尔值，表示数组是否包含给定值，类似于字符串的includes方法。该方法属于ES7，但Babel转码器已经支持。[1,2,3].包括(2);//真[1,2,3].包括(4);//false[1,2,NaN].includes(NaN);//true这个方法第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置。如果大于数组的长度（比如第二个参数是-4，但是数组的长度是3），就会重置为从0开始。[1,2,3].包括(3,3);//false[1,2,3].includes(3,-1);//true上一期经典深入理解ES6（字符串、数字扩展）常深入理解时期经典——URL加载过程持续更新中~喜欢的留个赞吧！
