form 轉化為真正的數組 先說一下使用場景,在Js中,我們要經常操作DOM,比如獲取全部頁面的input標簽,並且找到類型為button的元素,然後給這個按鈕註冊一個點擊事件,我們可能會這樣操作; 這樣寫肯定是沒有問題的,但是我們知道很多操作數組的方法比for迴圈好用多了,比如es5的forEac ...
form 轉化為真正的數組
先說一下使用場景,在Js中,我們要經常操作DOM,比如獲取全部頁面的input標簽,並且找到類型為button的元素,然後給這個按鈕註冊一個點擊事件,我們可能會這樣操作;
var inputObjs=document.getElementsByTagName('input');
for(var i=0;i<inputObjs.length;i++){
if(inputObjs[i].type==='button'){
inputObjs[i].onclick=function(){
return;
}
}
}
這樣寫肯定是沒有問題的,但是我們知道很多操作數組的方法比for迴圈好用多了,比如es5的forEach方法就很好用;但是能直接用嗎?不能!因為dom對象集合不是一個真正得Array數組類型,直接使用會報錯的;
var inputObjs=document.getElementsByTagName('input');
inputObjs.forEach(); //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={foo:'foo',bar:'bar'};
console.log(Array.from(obj)); //[]
let superObj={0:'foo',1:'bar',length:2};
console.log(Array.from(superObj)); //["foo", "bar"]
這裡列出了不同的數據類型調用該方法後的結果,值得留意的是字元串和一些特殊對象是可以轉化為有內容的數組的,特殊的對象是指內容按照數字鍵值對排列,並且有length屬性的對象;這種對象是可以使用for迴圈的,而字元串也是可以使用for迴圈來得到每一個字元的,所以歸結為一句話,能使用for迴圈輸出內容的使用from方法就不是一個空數組;在這裡提醒一下,使用過jQuery的小伙伴可以留意一下,當你使用選擇器選擇元素返回的jquery對象是什麼結構的?其實就是我們例子中最後一個的結構,具體可以參考我的jQuery源碼分析系列文章
of 將值轉化為數組
創建數組有兩種方法一種是構造函數式:
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 數組內部數據複製替換
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({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 將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]
例子參考:http://es6.ruanyifeng.com/#docs/array