類數組對象如何作為數組使用 ---(call方法)

2018-8-3 最近很常使用類數組對象,寫一下自己的所得

---

先簡單列一下自己遇到的類數組對象

1. Arguments

• 個人接觸的第一個類數組,就是arguments元素
  以前寫的arguments的簡單介紹,點這兒

看看arguments在控制台的輸出:
JavaScript :

function gaara(val1,val2,val3,val4,val5){
  console.log(arguments);
}

gaara(1,2,3,4,5);

輸出 :

2. HTML Collection

• HTML Collection也是比較常見的一種特殊類數組對象,在使用js獲取頁面元素時,如果是通過類名或者標簽名,就會得到一個HTML Collection

• 我們可以很輕易的通過使用的方法名來知道我們將得到的是元素,還是元素集
  getElementById( ) --element 獲取元素
  getElementsByClassName( ) --elements獲取元素集
  getElementsByTagName( ) --elements獲取元素集

看看HTML Collection在控制台的輸出:
JavaScript :

var col = document.getElementsByTagName('div');

console.log(col);

HTML :

<div>1</div>  <div>2</div>
<div>3</div>  <div>4</div>  
<div>5</div>

輸出 :

---

回到正題:

類數組對象如何作為數組使用

先看看arguments:

• 我在介紹arguments的文章中記錄了從MDN摘抄的arguments轉數組的方法:

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015 
//The Array.from() method creates a new Array instance
// from an array-like or iterable object.
const args = Array.from(arguments);

• 前兩個方法都是使用了同一種方法:
  數組的slice方法.call ( arguments )

call()方法是干什么的?

• 在MDN中是這樣介紹的:
  可以讓call()中的對象調用當前對象所擁有的function

• 點這兒可以看看我個人對call()方法的一點理解

• 結合上面的例子:
  var args = [].slice.call(arguments);
  call()中的對象 : arguments
  當前對象 : []

• 這時我們就很容易理解這句語句了:
  讓arguments調用數組的slice( )方法,並且將調用后的返回值賦給args語句,可以理解為下面這條語句:
  var args = arguments.slice()
• 雖然我們可以如此理解,但卻不能這樣寫代碼,因為arguments並不是一個數組,沒有數組的slice方法,但又因為它是類數組的,因此它可以使用slice方法
  此時我們便不需要專門為arguments定義一個slice方法,call方法的作用便在於此

上面的問題有了結果

憑借着call方法,我們可以讓目前操作的對象(arguments)去使用別的對象(array)的方法

---

說完了arguments,再來看HTML Collection就簡單多了

HTML Collection如何當做數組處理

• 在獲取到對應的元素集之后,我們可能需要遍歷該元素集來進行操作
  我們可以使用for循環來正確的遍歷這個元素集,得到我們想要的東西

var col = document.getElementsByTagName('div');
for( var i = 0; i < col.length; i ++){
     console.log(col[i]);
}

輸出 :

在上面的函數中,我們用到了col.length以及col[0],這些難道不是數組的方法嗎?HTML Collection本身就是數組嗎?

修改一下上面的代碼:

var col = document.getElementsByTagName('div');
console.log(typeof col);
col.forEach(function(val){
  console.log(val);
});

輸出 :

• 可以看出,元素集的類型是對象,也沒有數組的方法,查看下MDN中對它的介紹,發現它只有一個只讀的length屬性以及兩個方法item()與namedItem(),且這兩個方法可以用中括號來簡寫,這便解釋了上面的代碼為何能運行

---

• 結合上面的arguments的例子,我們便可以寫出HTML Collection使用數組方法的代碼:

JavaScript :

var col = document.getElementsByTagName('div');
[].forEach.call(col,function(val){
  console.log(val);
});

輸出 :