快捷導(dǎo)航

ES6中的數(shù)組擴(kuò)展方法

更新時(shí)間：2016年08月26日 17:07:25 作者：不一樣的追尋著

這篇文章主要介紹了ES6中的數(shù)組擴(kuò)展方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

form 轉(zhuǎn)化為真正的數(shù)組

先說一下使用場(chǎng)景，在Js中，我們要經(jīng)常操作DOM，比如獲取全部頁面的input標(biāo)簽，并且找到類型為button的元素，然后給這個(gè)按鈕注冊(cè)一個(gè)點(diǎn)擊事件，我們可能會(huì)這樣操作；

var inputObjs=document.getElementsByTagName('input');
for(var i=0;i<inputObjs.length;i++){
if(inputObjs[i].type==='button'){
inputObjs[i].onclick=function(){
return;
}
}
}

這樣寫肯定是沒有問題的，但是我們知道很多操作數(shù)組的方法比for循環(huán)好用多了，比如es5的forEach方法就很好用；但是能直接用嗎？不能！因?yàn)閐om對(duì)象集合不是一個(gè)真正得Array數(shù)組類型，直接使用會(huì)報(bào)錯(cuò)的；

var inputObjs=document.getElementsByTagName('input');
inputObjs.forEach(); //inputObjs.forEach is not a function

盡管如此我們還是可以用，不能直接用可以間接用，使用js強(qiáng)大的對(duì)象冒充功能即可；

var inputObjs=document.getElementsByTagName('input');
console.info(inputObjs); //[]length: 0__proto__: HTMLCollection
console.info([].slice.call(inputObjs)); //[]length: 0__proto__: Array[0]

這樣轉(zhuǎn)化為真正的數(shù)組之后就可以隨便調(diào)用數(shù)組的方法啦；這種方法固然可行，但是不太容易理解而且太過于“曲折”，es6給我們提供了一個(gè)更為簡(jiǎn)單直接的方法，form，使用起來很簡(jiǎn)單：

var inputObjs=document.getElementsByTagName('input');
console.info(inputObjs); //[]length: 0__proto__: HTMLCollection
console.info(Array.from(inputObjs)); //[]length: 0__proto__: Array[0]

結(jié)果是一樣的但是語義上更加貼切也更容易理解，是不是很好用啊！當(dāng)然這些還不夠，不僅僅是類數(shù)組任何數(shù)據(jù)類型都能使用此方法轉(zhuǎn)化為數(shù)組，但是不同的類型效果是不一樣的，測(cè)試如下：

let str='google';
console.log(Array.from(str)); //["g", "o", "o", "g", "l", "e"]
let num=234;
console.log(Array.from(num)); //[]
let bol=false;
console.log(Array.from(bol));
let obj={foo:'foo',bar:'bar'};
console.log(Array.from(obj)); //[]
let superObj={0:'foo',1:'bar',length:2};
console.log(Array.from(superObj)); //["foo", "bar"]

這里列出了不同的數(shù)據(jù)類型調(diào)用該方法后的結(jié)果，值得留意的是字符串和一些特殊對(duì)象是可以轉(zhuǎn)化為有內(nèi)容的數(shù)組的，特殊的對(duì)象是指內(nèi)容按照數(shù)字鍵值對(duì)排列，并且有l(wèi)ength屬性的對(duì)象；這種對(duì)象是可以使用for循環(huán)的，而字符串也是可以使用for循環(huán)來得到每一個(gè)字符的，所以歸結(jié)為一句話，能使用for循環(huán)輸出內(nèi)容的使用from方法就不是一個(gè)空數(shù)組；在這里提醒一下，使用過jQuery的小伙伴可以留意一下，當(dāng)你使用選擇器選擇元素返回的jquery對(duì)象是什么結(jié)構(gòu)的？其實(shí)就是我們例子中最后一個(gè)的結(jié)構(gòu)，具體可以參考我的jQuery源碼分析系列文章

of 將值轉(zhuǎn)化為數(shù)組

創(chuàng)建數(shù)組有兩種方法一種是構(gòu)造函數(shù)式：

let arr=Array(1,2,3);

另一種是最常用的字面量創(chuàng)建：

let arr=[1,2,3];

Array.of方法其實(shí)是對(duì)第一個(gè)種方式的補(bǔ)充，用法如下：

console.log(Array.of(1,2,3)); //[1,2,3]

貌似跟跟構(gòu)造方法一樣的效果，那這個(gè)方法為什么還有存在的必要呢？看下面的例子就明白了：

console.log(Array()); //[]
console.log(Array(1)); //[undefined]
console.log(Array(1,2)); //[1,2]

在這個(gè)例子中參數(shù)數(shù)量的不同其代表的意義不一樣，只有一個(gè)參數(shù)時(shí)，參數(shù)表示的是長(zhǎng)度，大于1一個(gè)參數(shù)時(shí)表示的元素，會(huì)引起混淆，但是Array.of方法就不會(huì)存在此問題嗎，因?yàn)槠鋮?shù)始終表示的元素:

console.log(Array.of()); //[]
console.log(Array.of(1)); //[1]
console.log(Array.of(1,2)); //[1,2]

copyWithin 數(shù)組內(nèi)部數(shù)據(jù)復(fù)制替換

copyWithin方法主要作用是數(shù)組內(nèi)部值的替換，該方法接受三個(gè)參數(shù)，分別表示開始復(fù)制位置、結(jié)束復(fù)制位置和插入位置，示例如下：

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]// 將3號(hào)位復(fù)制到0號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相當(dāng)于3號(hào)位，-1相當(dāng)于4號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 將3號(hào)位復(fù)制到0號(hào)位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 將2號(hào)位到數(shù)組結(jié)束，復(fù)制到0號(hào)位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 對(duì)于沒有部署TypedArray的copyWithin方法的平臺(tái)
// 需要采用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

以上所述是小編給大家介紹的ES6中的數(shù)組擴(kuò)展方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: