• JS-数组与伪数组


    数组与伪数组

    把符合以下条件的对象称为伪数组:

    • 具有length属性
    • 按索引方式存储数据
    • 不具有数组的push,pop等方法

    伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push,pop等方法,但仍可以用数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用document.getElementsByTagName, document.childNodes之类的,它们返回的NodeList对象都属于伪数组。

    可以使用以下方法将伪数组转化为真正的Array对象。

    Array.prototype.slice

    function  makeArray (c) {
        try{
            return Array.prototype.slice.call(c);
        }catch(e){
            var ret = [],i, len = c.length;
            for(i = 0; i < len; i++) {
                ret[i] = (c[i]);
            }
            return ret;
        }
    }
    

    ES6中数组的新方法 Array.from()

    function test(){
        var arg = Array.from(arguments);
        arg.push(5);
        console.log(arg);
    }
    test(1,2,3,4); //1,2,3,4,5
    

    ES6展开操作符

    es6中,展开操作符对于实现了 Iterator 接口的对象转为真正的数组
    任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。

    let nodeList = document.querySelectorAll('div');
    let array = [...nodeList];
    

    上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了 Iterator 。
    对于那些没有部署 Iterator 接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。

    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    };
    
    // TypeError: Cannot spread non-iterable object.
    let arr = [...arrayLike];
    

    上面代码中,arrayLike是一个类似数组的对象,但是没有部署 Iterator 接口,扩展运算符就会报错。这时,可以改为使用Array.from方法将arrayLike转为真正的数组。

    concat+apply

    let nodeList = document.querySelectorAll('div');
    let nodeArray = Array.prototype.concat.apply([], nodeList); // apply会将nodeList展开
    

    jquery中的,jQuery.toArray()方法

    alert($('li').toArray());
    

    jquery中,jQuery.makeArray(obj)
    将类数组对象转换为数组对象。
    类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。

    var arr = jQuery.makeArray(document.getElementsByTagName("div"));
    
  • 相关阅读:
    Linux软件安装中RPM与YUM 区别和联系(转载)
    linux文件系统
    (转载) linux基础知识
    linux学习:硬盘挂载
    IDEA版github教程(转载)
    idea配置gitee(转载)
    事与人的关系
    maven打包失败与问题反思
    计算机开机
    maven到底干了啥
  • 原文地址:https://www.cnblogs.com/fanlinqiang/p/11829327.html
Copyright © 2020-2023  润新知