zoukankan      html  css  js  c++  java
  • 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"]

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

  • 相关阅读:
    【BZOJ3518】点组计数 欧拉函数
    【BZOJ3677】[Apio2014]连珠线 换根DP
    【BZOJ3678】wangxz与OJ Splay
    【BZOJ3935】Rbtree 树形DP
    【BZOJ3958】[WF2011]Mummy Madness 二分+扫描线+线段树
    (转)Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
    string.Format出现异常"输入的字符串格式有误"的解决方法
    c# winForm使用Aspose.Cells读取CSV文件中文乱码问题
    PowerDesigner15.1给自定义架构表字段添加MS_Description出错
    MongoDB 多条件组合查询
  • 原文地址:https://www.cnblogs.com/wuziqiang/p/12173463.html
Copyright © 2011-2022 走看看