• js中的伪数组


    伪数组(类数组)

    什么是伪数组?

    1.无法直接调用数组方法或期望length属性有什么特殊的行为,但具有length属性。

    2.按索引方式存储数据。

    3.不具有数组的push,pop等方法,但仍可以对真正数组遍历方法来遍历它们。

    怎样产生伪数组?

    1. function的arguments对象。

    2.调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。

    3. 上传文件时选择的file对象也是伪数组。

    4. 自定义的某些对象。

    <body>
        <img src="img/arss.jpg" alt="">
        <img src="img/gaylun.jpg" alt="">
        <img src="img/guidao.jpg" alt="">
        <img src="img/jianmo.jpg" alt="">
        <img src="img/yasuo.jpg" alt="">
        <img src="img/zed.jpg" alt="">
    </body>
    <script>
        var clientH = document.documentElement.clientHeight;
        var aimg = document.querySelectorAll("img");
        // console.log(typeof aimg)                 //object
        aimg.push("1");
    </script>

    自定义生成的aimg即是伪数组,将aimg中push(“1”)后,即会得到这种报错。

    Uncaught TypeError: aimg.push is not a function

    将伪数组转为真正的数组

    1.可以使用Array.prototype.slice.call()。

        var aimg = document.querySelectorAll("img");
        // console.log(typeof aimg)                 //object
        // aimg.push("1");                          //懒加载.html:21 Uncaught TypeError: aimg.push is not a function
        var arr = Array.prototype.slice.call(aimg);
        // console.log(arr)                         //[img, img, img, img, img, img]
        arr.push("reaArray");
        // console.log(arr)                         //[img, img, img, img, img, img, "reaArray"]

    2.使用ES6的Array.from()。

        var aimg = document.querySelectorAll("img");
        // 1.Array.prototype.slice.call(aimg);
        // console.log(typeof aimg)                 //object
        // aimg.push("1");                          //懒加载.html:21 Uncaught TypeError: aimg.push is not a function
        // var arr = Array.prototype.slice.call(aimg);
        // console.log(arr)                         //[img, img, img, img, img, img]
        // arr.push("reaArray");
        // console.log(arr)                         //[img, img, img, img, img, img, "reaArray"]
    
        // 2.Array.from()
        var arr2 = Array.from(aimg);
        arr2.push("hello");
        // console.log(arr2)                        //[img, img, img, img, img, img, "hello"]

    3.emmmmmmm的方法遍历伪数组,拿到所有数据,挨个放入真数组。

        var aimg = document.querySelectorAll("img");
        // 1.Array.prototype.slice.call(aimg);
        // console.log(typeof aimg)                 //object
        // aimg.push("1");                          //懒加载.html:21 Uncaught TypeError: aimg.push is not a function
        // var arr = Array.prototype.slice.call(aimg);
        // console.log(arr)                         //[img, img, img, img, img, img]
        // arr.push("reaArray");
        // console.log(arr)                         //[img, img, img, img, img, img, "reaArray"]
    
        // 2.Array.from()
        // var arr2 = Array.from(aimg);
        // arr2.push("hello");
        // console.log(arr2)                        //[img, img, img, img, img, img, "hello"]
    
        // 3.
        var arr3 = [];
                for(var i=0;i<aimg.length;i++){
                    arr3.push(aimg[i]);
                }
                arr3.push("world");
                console.log(arr3)                   //[img, img, img, img, img, img, "world"]

    这看起来就觉得麻烦,不过随你用咯。

  • 相关阅读:
    git 删除已经提交的文件
    IDEA不显示service 服务窗口
    MySQL SQL语句查询结果 多列合并为1列
    Linux远程执行脚本
    mycat 连接命令
    win10 关闭被占用的端口
    ERROR 1045 (HY000): Access denied for user 'root', because password is error
    unblock with 'mysqladmin flush-hosts'
    neo4j数据库cypher查询
    基于websocket的网页实时消息推送与在线聊天(上篇)
  • 原文地址:https://www.cnblogs.com/wuziqiang/p/12173463.html
Copyright © 2020-2023  润新知