ES6——数组的扩展详解

数组的扩展详解1、Array.from()2、Array.of()3、数组实例的copyWithin()4、数组实例的find()和findIndex()5、数组实例的fill()6、数组实例的entries()、keys()和values()8、数组的空位9、数组推导1、Array.from()Array.from方法用于将两类对象转为真正的数组类似数组的对象(array-like object)和可遍历(iterable)对象包括ES6新增的数据结构Set和Map​。下面是一个类似数组的对象Array.from将它转为真正的数组。letarrayLike{0:a,1:b,2:c,length:3};//ES5的写法vararr1[].slice.call(arrayLike);console.log(arr1);//[ a, b, c ]//ES6的写法letarr2Array.from(arrayLike);//console.log(arr2);//[ a, b, c ]实际应用中常见的类似数组的对象是DOM操作返回的NodeList集合以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。//NodeList对象letpsdocument.querySelectorAll(p);Array.from(ps).forEach((p){console.log(p);});//arguments对象functionfoo(){varargsArray.from(arguments);//...}上面的代码中querySelectorAll方法返回的是一个类似数组的对象只有将这个对象转为真正的数组才能使用forEach方法。只要是部署了Iterator接口的数据结构Array.from都能将其转为数组。console.log(Array.from(hello));//[ h, e, l, l, o ]letnamesSetnewSet([a,b]);console.log(Array.from(namesSet));//[ a, b ]上面的代码中字符串和Set结构都具有Iterator接口因此可以被Array.from转为真正的数组。如果参数是一个真正的数组Array.from会返回一个一模一样的新数组。Array.from([1,2,3])//[1, 2, 3]值得提醒的是扩展运算符(…)也可以将某些数据结构转为数组。//arguments对象functionfoo(){varargs[...arguments];}//NodeList对象[...document.querySelectorAll(div)]扩展运算符背后调用的是遍历器接口(Symbol.iterator)如果一个对象没有部署该接口就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象本质特征只有一点即必须有length属性。因此任何有length属性的对象都可以通过Array.from方法转为数组而这种情况扩展运算符无法转换。Array.from({length:3});//[undefined, undefined, undefined]上面的代码中Array.from返回了一个具有3个成员的数组每个位置的值都是undefined。扩展运算符转换不了这个对象。对于还没有部署该方法的浏览器可以用Array.prototype.slice方法替代。consttoArray((){Array.from?Array.from:obj[].slice.call(obj);})();Array.from还可以接受第二个参数作用类似于数组的map方法用来对每个元素进行处理将处理后的值放入返回的数组。//Array.from(arrayLike, x x * x);//等价于//Array.from(arrayLike).map(x x * x);console.log(Array.from([1,2,3],(x)x*x));//[ 1, 4, 9 ]如果map函数里面用到了this关键字还可以传入Array.from第三个参数用来绑定this。Array.from()可以将各种值转为真正的数组并且提供map功能。这实际上意味着只要有一个原始的数据结构就可以先对它的值进行处理然后转成规范的数组结构进而可以使用数量众多的数组方法。Array.from({length:2},()jack);//[jack, jack]上面的代码中Array.from的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。Array.from()的另一个应用是将字符串转为数组然后返回字符串的长度。因为它能正确处理各种Unicode字符可以避免JavaScript将大于\uFFFF的Unicode字符算作2个字符的bug。functioncountSymbols(string){returnArray.from(string).length;}2、Array.of()Array.of方法用于将一组值转换为数组。Array.of(3,11,8(//[3, 11, 8]Array.of(3)//[3]Array.of(3).length//1这个方法的主要目的是弥补数组构造函数Array()的不足。因为参数个数的不同会导致Array()的行为有差异。Array()//[]Array(3)//[, , ,]Array(3,11,8)//[3, 11, 8]上面的代码中Array方法没有参数、有1个参数或有3个参数时返回结果都不一样。只有当参数个数不少于2个时Array()才会返回由参数组成的新数组。参数个数只有1个时实际上是指定数组的长度。Array.of基本上可以用来替代Array()或new Array()并且不存在由于参数不同而导致的重载。它的行为非常统一。Array.of()//[]Array.of(undefined)//[undeifned]Array.of(1)//[1]Array.of(1,2)//[1, 2]Array.of总是返回参数值组成的数组。如果没有参数就返回一个空数组。Array.of方法可以用下面的代码模拟实现。functionArrayOf(){return[].slice.call(arguments);}3、数组实例的copyWithin()数组实例的copyWithin方法在当前数组内部将指定位置的成员复制到其他位置会覆盖原有成员​然后返回当前数组。也就是说使用这个方法会修改当前数组。Array.prototype.copyWithin(target,start0,endthis.length)target必需​从该位置开始替换数据。start可选​从该位置开始读取数据默认为0。如果为负值表示倒数。end可选​到该位置前停止读取数据默认等于数组长度。如果为负值表示倒数。这3个参数都应该是数值如果不是会自动转为数值。[1,2,3,4,5].copyWithin(0,3)//[4, 5, 3, 4, 5]上面的代码表示将从3号位置直到数组结束的成员4和5​复制到从0号位置开始的位置结果覆盖了原来的1和2。//将3号位置复制到0号位置console.log([1,2,3,4,5].copyWithin(0,3,4));//[ 4, 2, 3, 4, 5 ]//-2相当于3号位置-1相当于4号位置console.log([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}//将2号位置到数组结束复制到0号位置leti32anewInt32Array([1,2,3,4,5]);console.log(i32a.copyWithin(0,2));//Int32Array(5) [ 3, 4, 5, 4, 5 ]4、数组实例的find()和findIndex()数组实例的find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数所有数组成员依次执行该回调函数直到找出第一个返回值为true的成员然后返回该成员。如果没有符合条件的成员则返回undefined。[1,4,-5,10].find((n)n0);//-5上面的代码找出数组中第一个小于0的成员。[1,5,10,15].find(function(value,index,arr){returnvalue9;})//10上面的代码中find方法的回调函数可以接受3个参数依次为当前的值、当前的位置和原数组。数组实例的findIndex方法的用法与find方法非常类似返回第一个符合条件的数组成员的位置如果所有成员都不符合条件则返回-1。[1,5,10,15].findIndex(function(value,index,arr){returnvalue9;})//10这两个方法都可以接受第二个参数用来绑定回调函数的this对象。另外这两个方法都可以发现NaN弥补了数组的IndexOf方法的不足。[NaN].indexOf(NaN)//-1[NaN].findIndex(yObject.is(NaN,y))//0上面的代码中indexOf方法无法识别数组的NaN成员但是findIndex方法可以借助Object.is方法做到。5、数组实例的fill()fill方法使用给定值填充数组。console.log([a,b,c].fill(7));//[ 7, 7, 7 ]console.log(newArray(3).fill(7));//[ 7, 7, 7 ]上面的代码表明fill方法用于空数组的初始化非常方便。数组中已有的元素会被全部抹去。fill方法还可以接受第二个和第三个参数用于指定填充的起始位置和结束位置。console.log([a,b,c].fill(7,1,2));//[ a, 7, c ]上面的代码表示fill方法从1号位置开始向原数组填充7到2号位置之前结束。6、数组实例的entries()、keys()和values()ES6提供了3个新方法——entries()、keys()和values()——用于遍历数组。它们都返回一个遍历器对象详见第14章​可用for…of循环遍历唯一的区别是keys()是对键名的遍历values()是对键值的遍历entries()是对键值对的遍历。for(letindexof[a,b].keys()){console.log(index);}//0//1for(letelemof[a,b].values()){console.log(elem);}//a//bfor(let[index,elem]of[a,b].entries()){console.log(index,elem);}// 0 a// 1 b如果不使用for…of循环可以手动调用遍历器对象的next方法进行遍历。letletter[a,b,c];letentriesletter.entries();console.log(entries.next().value);//[ 0, a ]console.log(entries.next().value);//[ 1, b ]console.log(entries.next().value);//[ 2, c ]该方法的第二个参数表示搜索的起始位置默认为0。如果第二个参数为负数则表示倒数的位置若此位置超出数组长度比如第二个参数为-4但数组长度为3​则会重置从0开始。console.log([1,2,3].includes(3,3));//falseconsole.log([1,2,3].includes(3,-1));//true没有该方法时通常使用数组的indexOf方法检查是否包含某个值。if(arr.indexOf(el)!-1){//...}indexOf方法有两个缺点一是不够语义化其含义是找到参数值的第一个出现位置所以要比较是否不等于-1表达起来不够直观二是其内部使用严格相当运算符()进行判断会导致对NaN的误判。[NaN].indexOf(NaN)//-1includes使用的是不一样的判断算法没有这个问题。[NaN].includes(NaN)//true下面的代码用来检查当前环境是否支持该方法如果不支持就部署一个简易的替代版本。constcontains((){returnArray.prototype.includes?(arr,value)arr.includes(value):(arr,value)arr.some(elelvalue)})();console.log(contains([foo,bar],baz));//false另外Map和Set数据结构有一个has方法需要注意与includes区分。Map结构的has方法是用来查找键名的比如Map.prototype.has(key)WeakMap.prototype.has(key)Reflect.has(target,propertyKey)Set结构的has方法是用来查找值的比如Set.prototype.has(value)WeakSet.prototype.has(value)8、数组的空位数组的空位指数组的某一个位置没有任何值。比如Array构造函数返回的数组都是空位。Array(3);// [, , ,]上面的代码中Array(3)返回一个具有3个空位的数组。注意空位不是undefined一个位置的值等于undefined依然是有值的。空位是没有任何值in运算符可以说明这一点。console.log(0in[undefined,undefined,undefined]);//trueconsole.log(0in[,,,]);//false上面的代码说明第一个数组的0号位置是有值的第二个数组的0号位置没有值。ES5对空位的处理很不一致大多数情况下会忽略空位。forEach()、filter()、every()和some()都会跳过空位。map()会跳过空位但会保留这个值。join()和toString()会将空位视为undefined而undefined和null会被处理成空字符串。//forEach方法[,a].forEach((x,i)log(i));//1//filterconsole.log([a,,b].filter(xtrue));//[ a, b ]//everyconsole.log([,a].every(xxa));//true//someconsole.log([,a].some(xx!a));//false//mapconsole.log([,a].map(x1));// [, 1]//joinconsole.log([,a,undefined,null].join(#));// #a##//toStringconsole.log([,a,undefined,null].toString());// , a, ,ES6则是明确将空位转为undefined。Array.from方法会将数组的空位转为undefined。也就是说这个方法不会忽略空位。Array.from([a,,b])// [a, undefined, b ]扩展运算符(…)也会将空位转为undefined。[...[a,,b]]// [a, undefined, b]copyWithin()会连空位一起复制。[,a,b,,].copyWithin(2,0)//[, a, , a]fill()会将空位视为正常的数组位置。newArray(3).fill(a)//[a, a, a]for…of循环也会遍历空位。letarr[,,];for(letiofarr){console.log(1);}//1//1上面的代码中数组arr有两个空位for…of并没有忽略它们。如果改成map方法遍历是会跳过空位的。entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。//entries()[...[,a].entries()]//[[0, undefined], [1, a]//keys()[...[,a].keys()]//[0, 1]//values()[...[,a].values()]//[undefined, a]//find()[,a].find(xtrue)// undefined//findIndex()[,a].findIndex(xtrue)//0由于空位的处理规则非常不统一所以建议避免出现空位。9、数组推导数组推导(array comprehension)提供了简洁写法允许直接通过现有数组生成新数组。这项功能本来是要放入ES6的但是TC39委员会想继续完善它让其支持所有数据结构内部调用iterator对象​不像现在只支持数组所以就把它推迟到了ES7。Babel转码器已经支持这个功能。leta1[1,2,3,4];leta2[for(iofa1)i*s];a2// [2, 4, 6, 8]上面的代码表示数组a2通过for…of结构直接在a1的基础上生成。注意数组推导中for…of结构总是写在最前面返回的表达式写在最后面。for…of后面还可以附加if语句用于设定循环的限制条件。letyears[1954,1974,1990,2006,2010,2014];[for(yearofyears)if(year2000)year];//[2006, 2010, 2014][for(yearofyears)if(year2000)if(year2010)year];//[2006][for(yearofyears)if(year2000year2010)year];// [2006]