伪数组(类数组)
什么是伪数组?
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"]
这看起来就觉得麻烦,不过随你用咯。