03 记录类/伪数组转为数组的几种方法

199 阅读1分钟

类/伪数组:

   1. 拥有 length 属性

   2. 元素保存在对象中,可以通过索引访问,但是没有数组的其他方法,例如:push、slice、indexOf 、forEach等

例子如下:

<body>  <ul>    <li>1</li>    <li>2</li>    <li>3</li>  </ul><script>    let lis = document.getElementsByTagName('li');    lis.forEach((item)=>{        console.log(item);  // 无打印,会报错    });</script></body>

浏览器中:

类/伪数组转数组的方法:

   1. 扩展运算符

例如:

let lis = document.getElementsByTagName('li');
[...lis].forEach((item)=>{   console.log(item);});

   2. Array.from()

例如:

let lis = document.getElementsByTagName('li');
Array.from(lis).forEach((item)=>{   console.log(item);});

   3. slice

       Array.prototype.slice.call(arrayLike)  

       Array.prototype.slice.apply(lis) 

       Array.prototype.slice.call(arrayLike, 0)

       [].slice.call (arrayLike)  

       [].slice.apply(lis);

       [].slice.call (arrayLike, 0)

例如:

let lis = document.getElementsByTagName('li');
[].slice.apply(lis).forEach((item)=>{   console.log(item);});

   4. concat

       Array.prototype.concat.apply([],lis) 

       [].concat.apply([],lis)

例如:

let lis = document.getElementsByTagName('li');
Array.prototype.concat.apply([],lis).forEach((item)=>{   console.log(item);});

   5. 通过 push 或者 for...of

let lis = document.getElementsByTagName('li');
let arr = [];

// push
for(let i = 0; i < lis.length; i++) {
   arr.push(lis[i]);
}

// for...of
// for(let item of lis) {
   // arr.push(item);
// }

arr.forEach((item) => {
   console.log(item);
});

   6. 直接对 lis 集合进行循环或者 map --- call/apply/bind

let lis = document.getElementsByTagName('li');
// Array.prototype.forEach.apply(lis,[function(item,index){
//     console.log(item,index);
// }]);
// Array.prototype.map.apply(lis,[function(item,index){
//     console.log(item,index);
// }]);

// Array.prototype.forEach.bind(lis)(function(item,index){
//     console.log(item);
// });
// Array.prototype.map.bind(lis)(function(item,index){
//     console.log(item);
// });

// Array.prototype.forEach.call(lis,function(item){
//     console.log(item);
// });
Array.prototype.map.call(lis,function(item){
	console.log(item);
});

OK!