类/伪数组:
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!