• Javascript 类数组(Array-like)对象


    Javascript中的类数组对象(Array-like object)指的是一些看起来像数组但又不是数组的对象。Javascript中的arguments变量、document.getElementsByTagName()返回值就是典型的类数组对象。

    类数组特性

    • 类数组对象具有一个length属性且length的值为非负整数。
    • 类数组对象不具有数组对象的方法。例如:push、 pop等方法。

    类数组对象可以像数组一样遍历,但不支持数组对象的方法。

    function test1() {  
        for(var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    
        console.log(arguments instanceof Array);
    }
    test1(2, 3);  
    /* 输出
    2  
    3  
    false  
    */
    
    function test2(){  
        arguments.push(1);
    }
    test2();  
    /* 报错
    TypeError: undefined is not a function  
    */

    将类数组对象转化为数组

    slice 方法可以用来将一个类数组(Array-like)对象转换成一个数组。 你只需要用数组原型上的slice方法call这个对象。

    function arrayify( a ) {  
        return Array.prototype.slice.call( a );
    }
    
    function test3() {  
        var arrayified = arrayify(arguments);
        arrayified.push(1);
        console.log(arrayified);
        console.log(arrayified instanceof Array);
    }
    
    test3(2, 3);  
    /* 输出
    [2, 3, 1]
    true  
    */

    也可以简单的使用 [].slice.call(a)代替Array.prototype.slice.call(a)

    slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个数组。你只需将该方法绑定到这个对象上。下述代码中 list 函数中的 arguments 就是一个类数组对象。

    1 function list() {
    2   return Array.prototype.slice.call(arguments);
    3 }
    4 
    5 var list1 = list(1, 2, 3); // [1, 2, 3]

    除了使用 Array.prototype.slice.call(arguments),你也可以简单的使用[].slice.call(arguments) 来代替。另外,你可以使用 bind 来简化该过程。

    1 var unboundSlice = Array.prototype.slice;
    2 var slice = Function.prototype.call.bind(unboundSlice);
    3 
    4 function list() {
    5   return slice(arguments);
    6 }
    7 
    8 var list1 = list(1, 2, 3); // [1, 2, 3]

    实例代码

    Array.prototype.slice.apply(document.querySelectorAll('.total-con li')).map((item)=>{
              if(item.className == 'hover1') {
                this.sortField = item.getAttribute('sortField')
                this.sortType = item.getAttribute('sortType')
                return
              }
            })
  • 相关阅读:
    TP5 try{}catch{}异常捕获不到 解决办法
    layui2.5 开关在confirm确认了之后在关/开
    JQuery 表单textarea控制字数
    Navicat Premium从远程Mysql数据库复制到本地数据库的方法
    dedecmsV5.7 任意文件上传漏洞修复
    PHP 利用PHPExcel到处数据到Excel;还有导出数据乱码的解决方案。
    Mac Pro 2017款自带php与用brew重装PHP后的地址
    用js传递当前页面的url,丢失了&后面的参数 解决办法
    PHP 超全局变量之$_SERVER
    Linux while和for循环简单分析
  • 原文地址:https://www.cnblogs.com/timejs/p/5502154.html
Copyright © 2020-2023  润新知