javascript模拟实现toAarray()方法代码实例

快乐打工仔 分类:实例代码

本章节介绍一下如何模拟实现toAarray()方法。

在jQuery中有此方法的声明,具体可以参阅jQuery toArray()一章节。

本章节就借鉴一下jQuery的实现方式,单独将此功能独立出来。

代码实例如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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()方法再封装一下,代码如下:

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()一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容