ES6(三)数组的扩展
1、Array.form
ES6中,Array.from = function(items,mapfn,thisArg) { ?}
??Array.from 用于將 類數(shù)組 和 可遍歷對(duì)象(實(shí)現(xiàn)了Iterator接口的對(duì)象以及set、map)對(duì)象,轉(zhuǎn)換成真正的數(shù)組。
(1) ? 第一個(gè)參數(shù):items,類數(shù)組 和 可遍歷對(duì)象。
? ? 在ES5中,將類數(shù)組轉(zhuǎn)換成真正數(shù)組,如下:
var arr=[].slice.call(likeArray);? ? ? ?實(shí)際應(yīng)用中,類數(shù)組對(duì)象常常包括 NodeList集合,以及 函數(shù)參數(shù) arguments.
(2)?第二個(gè)參數(shù),類似map方法,可以直接改變?cè)瓟?shù)組的值。
? 如下:將 類數(shù)組中的值加 1
Array.from(arrayLike, (x)=>x+1);(3) ? 第三個(gè)參數(shù),綁定this。
(4) Array.from 可以將只要原始的數(shù)據(jù)結(jié)構(gòu)(string,number 等),會(huì)先對(duì)值進(jìn)行處理,
?然后轉(zhuǎn)換成規(guī)范的數(shù)組結(jié)構(gòu),進(jìn)而可以使用Array中的方法。
Array.from( { length:2}, ()=>'jack');將字符串轉(zhuǎn)換為數(shù)組,能正確處理各種Unicode字符,避免 將大于 \uFFFF 的字符,算成兩個(gè)字符。
function countString(string){return Array.from(string).length; }?
2、Array.of
Array.of = function(items) { }用于將一組值,轉(zhuǎn)換成數(shù)組,用于彌補(bǔ)Array()不足。?
? ? 比如:使用 Array(3),指定了數(shù)組為3,值為[undefined*3],當(dāng)參數(shù)count>=2時(shí),才會(huì)返回新數(shù)組。
ES5中可以如下代替:
function ArrayOf(){return [].slice.call(arguments); }?
3、擴(kuò)展運(yùn)算符 ?( ... )
擴(kuò)展運(yùn)算符背后調(diào)用的是遍歷器接口(Symbol.iterator),如果A對(duì)象沒有實(shí)現(xiàn)此接口,則無法轉(zhuǎn)換。
? ?[...數(shù)據(jù)結(jié)構(gòu)A] ?這樣的書寫方式可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換成為數(shù)組。
擴(kuò)展運(yùn)算符 無法將類數(shù)組轉(zhuǎn)換為 real Array.
4、數(shù)組實(shí)例的擴(kuò)展
?(1)copyWithin()
? ??Array.prototype.copyWithin = function(target,start,enf) {}
1、在當(dāng)前數(shù)組內(nèi)部,將指定位置的成員復(fù)制到其他位置,且覆蓋原有成員;2、其中 包括start,不包括enf(end from),如果[1,3,5],即將 3,4位置的元素替換 arr
3、start,endf為負(fù)數(shù),則表示數(shù)組倒數(shù)位數(shù)
[0, 1, 2, 3, 4, 5].copyWithin(2, 3, 4); //[0,1,3,3,4,5]
(2)find() and findIndex()
??Array.prototype.find = function(predicate,thisArg) {}
? ? ? ? ? ? ? ? ?find()? ?用于找出第一個(gè)符合條件的數(shù)組成員,參數(shù)是一個(gè)回調(diào)函數(shù),所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù),若無符合條件,則返回undefined。 ?
findIndex() 則返回第一個(gè)符合條件的成員的位置,未找到,則返回 -1。
let personList = [{name: 'jack',age: 20},{name: 'Tom',age: 18},{name: 'Lily',age: 15}];personList.find((item,index,arr)=>(item.age < 19));? ? 這兩個(gè)方法都可以發(fā)現(xiàn) NaN,彌補(bǔ)了數(shù)組 IndexOf方法的不足。
[NaN].findIndex(y=>Object.is(NaN,y)) //0(3) fill()
Array.prototype.fill = function(value,start,end) {}使用給定值,填充一個(gè)數(shù)組。
['a','b','c'].fill(7,1,2);//[a,7,c]
(4)entries(),keys(),values()
var arr = ['key1', 'key2'];for (let index of arr.keys) {}? ? ?如果不使用for...of循環(huán),可以手動(dòng)調(diào)用遍歷器對(duì)象的next方法,進(jìn)行遍歷。
(5)includes()
? ? ?String.prototype.includes = function(searchString,position) {};
? ? ?表示某個(gè)數(shù)組是否包含給定的值
? ? ? ? ? ? position 表示搜索的起始位置,負(fù)數(shù)為倒數(shù)位置
?indexOf 內(nèi)部使用嚴(yán)格相當(dāng)運(yùn)算符(===)進(jìn)行判斷,這會(huì)導(dǎo)致對(duì)NaN的誤判。
[1, 2, 3].includes(3, 3);[NaN].indexOf(NaN); //-1[NaN].includes(NaN); //true Map 的has方法,用來查找 鍵名。Set 的has方法,用來查找 值。
(5)數(shù)組的空位
數(shù)組的空位,是指某一個(gè)位置沒有任何值,空位不是undefined。
1、forEach,filter,every,some 都會(huì)跳過空位。
2、map會(huì)跳過空位,但會(huì)保留這個(gè)值。
3、join 、toString 會(huì)將空位視為 undefined,undefined和null 則被處理成空字符串。
?
而Array.from 會(huì)將數(shù)組的空位 轉(zhuǎn)換為 undefined,不會(huì)忽略這個(gè)空位。( ... )也會(huì)轉(zhuǎn)換為 undefined。
至于為什么會(huì)出現(xiàn) 空位,我也不太明白。
轉(zhuǎn)載于:https://www.cnblogs.com/xianrongbin/p/6831069.html
總結(jié)
以上是生活随笔為你收集整理的ES6(三)数组的扩展的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JAVA数据类型与逻辑练习
- 下一篇: jdk7 for Mac