ES6之陣列擴充套件方法一（相當好用）

先說一下使用場景，在js中，我們要經常操作dom，比如獲取全部頁面的input標籤，並且找到型別為button的元素，然後給這個按鈕註冊乙個點選事件，我們可能會這樣操作；

var inputobjs=document.getelementsbytagname('input');
for(var i=0;i)
}}

這樣寫肯定是沒有問題的，但是我們知道很多運算元組的方法比for迴圈好用多了，比如es5的foreach方法就很好用；但是能直接用嗎？不能！因為dom物件集合不是乙個真正得array陣列型別，直接使用會報錯的；

var inputobjs=document.getelementsbytagname('input');
inputobjs.foreach(); 
is not a function

儘管如此我們還是可以用，不能直接用可以間接用，使用js強大的物件冒充功能即可；

var inputobjs=document.getelementsbytagname('input');
console.info(inputobjs); 
//length: 0__proto__: htmlcollection
console.info(.slice.call(inputobjs)); //
length: 0__proto__: array[0]

這樣轉化為真正的陣列之後就可以隨便呼叫陣列的方法啦；這種方法固然可行，但是不太容易理解而且太過於「曲折」，es6給我們提供了乙個更為簡單直接的方法，form，使用起來很簡單：

var inputobjs=document.getelementsbytagname('input');
console.info(inputobjs); 
//length: 0__proto__: htmlcollection
console.info(array.from(inputobjs)); //
length: 0__proto__: array[0]

結果是一樣的但是語義上更加貼切也更容易理解，是不是很好用啊！當然這些還不夠，不僅僅是類陣列任何資料型別都能使用此方法轉化為陣列，但是不同的型別效果是不一樣的，測試如下：

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=;
console.log(array.from(obj)); //
let superobj=;
console.log(array.from(superobj)); 
//["foo", "bar"]

這裡列出了不同的資料型別呼叫該方法後的結果，值得留意的是字串和一些特殊物件是可以轉化為有內容的陣列的，特殊的物件是指內容按照數字鍵值對排列，並且有length屬性的物件；這種物件是可以使用for迴圈的，而字串也是可以使用for迴圈來得到每乙個字元的，所以歸結為一句話，能使用for迴圈輸出內容的使用from方法就不是乙個空陣列；在這裡提醒一下，使用過jquery的小夥伴可以留意一下，當你使用選擇器選擇元素返回的jquery物件是什麼結構的？其實就是我們例子中最後乙個的結構，具體可以參考我的jquery

原始碼分析系列文章

建立陣列有兩種方法一種是建構函式式：

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

另一種是最常用的字面量建立：

let arr=[1,2,3];

array.of方法其實是對第乙個種方式的補充，用法如下：

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

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

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

在這個例子中引數數量的不同其代表的意義不一樣，只有乙個引數時，引數表示的是長度，大於1乙個引數時表示的元素，會引起混淆，但是array.of方法就不會存在此問題嗎，因為其引數始終表示的元素:

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

copywithin方法主要作用是陣列內部值的替換，該方法接受三個引數，分別表示開始複製位置、結束複製位置和插入位置，示例如下：

[1, 2, 3, 4, 5].copywithin(0, 3)
//[4, 5, 3, 4, 5]
//將3號位複製到0號位
[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(, 0, 3)
////
將2號位到陣列結束，複製到0號位
var i32a = new int32array([1, 2, 3, 4, 5]);
i32a.copywithin(0, 2);
//int32array [3, 4, 5, 4, 5]
//對於沒有部署typedarray的copywithin方法的平台
//需要採用下面的寫法
.copywithin.call(new int32array([1, 2, 3, 4, 5]), 0, 3, 4);
//int32array [4, 2, 3, 4, 5]

例子參考：

ES6之陣列擴充套件方法一（相當好用）

es6 陣列擴充套件方法

ES6相關擴充套件一

ES6之陣列的擴充套件

ES6之陣列擴充套件方法 一 （相當好用）

es6 陣列擴充套件方法

ES6相關擴充套件 一

ES6之陣列的擴充套件

相關推薦

ES6之陣列擴充套件方法一（相當好用）

ES6相關擴充套件一