• 将类数组对象(array-like object)转化为数组对象(Array object)


    用法:Array.prototype.slice.call(array-like object)

    // 创建一个类数组对象
    var alo = {0:"a", 1:"b",2:"c", length:3};
    
    // 转化
    var arr = Array.prototype.slice.call(alo);
    
    console.log(
        Array.isArray(alo) // false
    )
    
    console.log(
        Array.isArray(arr) // true
    )
    
    console.log(alo); // { '0': 'a', '1': 'b', '2': 'c', length: 3 }
    console.log(arr); // [ 'a', 'b', 'c' ]

    下面分析它是如何工作的.

    类数组对象拥有类似数组的结构,所以它可以使用大多数数组的方法。

    数组里有一个方法slice(),遍历调用对象,然后返回一个数组。

    这里有一个问题,slice()是数组对象的方法,那该如何使用?

    数组方法是数组对象的属性,所以可以通过Array.prototype.slice获取它。

    然而在一个对象里调用其它对象的方法,我们需要用到"Function.prototype"里的方法call(),像这样function name.call(obj,args)

    所以有,Array.prototype.slice.call(alo)

    slice()是一个函数(function),所以从Function.prototype继承了方法call,这也就是为什么我们可以这样用Array.prototype.slice.call(...)

    Function.prototype.call(obj)的第一个参数是一个对象,即将传给f.call(obj)函数里的f,这一步,f的上下文(关键词this)的值会是obj.

    一般情况下Array.slice(),方法slice将Array作为this的值,使用索引遍历所有的数组元素。在我们的例子中,我们将alo设置为this的值,alo是类数组,本身又具有索引,因此而工作。

    NodeList,HTMLCollection都是类数组对象

    <body>
    <ul id="ho" class="ho">
      <li></li>
    </ul>
    <script>
    // 创建一个htmlCollection对象
    var htmlCollection = document.getElementsByTagName("li");
    
    // 创建一个NodeList对象
    var nodeList = document.getElementById("ho").childNodes;
    
    // 转化
    var h2arr = Array.prototype.slice.call(htmlCollection);
    var n2arr = Array.prototype.slice.call(nodeList);
    
    console.log(htmlCollection); // HTMLCollection [ <li> ]
    console.log(nodeList); // NodeList [ #text "", <li>, #text "" ]
    
    console.log(h2arr); // Array [ <li> ]
    console.log(n2arr); // Array[ #text "", <li>, #text "" ]
    </script>
    </body>
  • 相关阅读:
    CDN的简单理解
    学习前端笔记1(HTML)
    HTTP概念解析
    web前端
    Bootstrap_排版_标题
    Bootstrap_表单_表单样式
    Bootstrap_排版_列表
    Bootstrap_表单_按钮
    Bootstrap_表单_表单控件
    Bootstrap_基本HTML模板
  • 原文地址:https://www.cnblogs.com/winderby/p/4049820.html
Copyright © 2020-2023  润新知