類數組以及將類數組轉化爲數組的方法

今天在學習的時候碰到一個新概念，類數組，我用document.querySelectorAll 獲取元素的時候，覺得返回的是數組，想用splice方法操做這個數組，發現不行，查了一下資料發現這個方法返回的不是數組，叫類數組。總結了一下，arguments函數

document.querySelectorAll、 document.getElementByTagName、 document.getElementsByName、 document.getElementsByClassName // 返回的都是類數組，不能使用數組的一些方法，可是由於有interator接口，因此可遍歷循環，那麼怎麼將一個類數組轉換成數組呢？

 

 

 

1、遍歷類數組，依次將元素放入一個空數組

1 let  ips = document.querySelectorAll('input') 2 
3     let divarr = [] 4 
5     for(let i = 0; i <ips.length; i++){ 6  divarr.push(ips[i]) 7     }

//也能夠用這種方法

for(let item of ips){

        divarr.push(item)

    }

2、用擴展運算符或者Array.from()方法轉換

擴展運算符和Array.from()方法是ES6新增的，可將類數組直接轉化爲數組

 

 

 

1 let  ips = document.querySelectorAll('input') 2 
3     let divarr = [] 4 
5     divarr = [...ips] 6  或 7     divarr = Array.from(ips)

3、利用apply展開

 1 let ips = document.querySelectorAll('input') 2 3

let divarr = [].concat.apply([],ips); 

4、Array.prototype.slice.call() 

 

這種方法是借用了數組原型中的slice方法，返回一個數組。slice方法的內部實現：

1 Array.prototype.slice = function(start,end){ 2   var result = new Array(); 3   start = start || 0; 4   end = end || this.length; //使用call以後this指向了類數組對象
5   for(var i = start; i < end; i++){ 6        result.push(this[i]); 7  } 8   return result; 9 }

var div1 = Array.prototype.slice.call(document.querySelectorAll('div'), 0);

var div2 = Array.prototype.slice.call(document.querySelectorAll('div'));