javascript模擬實現toAarray()方法程式碼例項

antzone發表於2017-04-09
原文網址 : https://www.softwhy.com/article-6504-1.html
JavaScript

本章節介紹一下如何模擬實現toAarray()方法。

在jQuery中有此方法的宣告，具體可以參閱jQuery toArray()一章節。

本章節就借鑑一下jQuery的實現方式，單獨將此功能獨立出來。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>
function isArrayFn(value) {
  if (typeof Array.isArray === "function") {
    return Array.isArray(value);
  }
  else {
    return Object.prototype.toString.call(value) === "[object Array]";
  }
}
 
var core_slice = Array.prototype.slice;
function toArray(elements){
  return core_slice.call(elements);
}
 
window.onload = function () {
  var obox = document.getElementById("box");
  var odiv = document.getElementById("antzone");
  var lis = obox.getElementsByTagName("li");
  var arr = toArray(lis);
  odiv.innerHTML = isArrayFn(toArray(arr));
}
</script>
</head>  
<body>
<div id="antzone"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body> 
</html>

上面的程式碼在div中輸出結果為true，說明toArray()函式實現了將元素集合轉換成陣列的功能。

我們可以將toArray()方法再封裝一下，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function toArray(elements) {
  var core_slice = Array.prototype.slice;
  return core_slice.call(elements);
}

相關閱讀:

（1）.typeof可以參閱javascript typeof運算子一章節。

（2）.prototype可以參閱javascript prototype原型一章節。

（3）.slice可以參閱javascript Array slice()一章節。

（4）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

相關文章