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

 

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

posted @ 2020-01-09 20:44  优冠的味道  阅读(471)  评论(0)  编辑  收藏  举报