• 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"]

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

  • 相关阅读:
    [导入]如何使用C#调用非托管DLL函数
    [导入]ASP.NET 2.0 Page的执行顺序
    [导入]C#实现捕获当前屏幕截图(转)
    初学者入门经典:Java环境配置大全
    [导入]使用母版页时内容页如何使用css和javascript(转)
    CruiseControl.NET配置总结
    使用SQL语句清空数据库所有表的数据
    运行时修改config文件
    [导入]Repater 控件的应用(学习)
    [导入]PictureBox 读取图片及绘画
  • 原文地址:https://www.cnblogs.com/wuziqiang/p/12173463.html
Copyright © 2020-2023  润新知