什么是类数组:
JavaScript中有一些看起来像却又不是数组的对象,叫做类数组
一个类数组对象:
- 具有:指向对象元素的数字索引下标以及 length 属性告诉我们对象的元素个数;
- 不具有:诸如 push 、 forEach 以及 indexOf 等数组对象具有的方法;
典型的类数组:
- DOM方法 document.getElementsByClassName() 的返回结果(许多DOM方法的返回值都是类数组);
- 特殊变量 arguments 对象;
- input的文件对象FileList;
代码示例:
//DOM获取到的类数组,,数组
let list = document.getElementsByTagName("li");
//arguments获取到的类数组
let b = (function a(a, b, c, d) {
let argList = arguments;
return () => argList;
})("好的", "可以", "没问题", "OK");
//数组
let arrNum = [0, 1, 2, 3, 4];
console.log("DOM:", list, "arguments:", b(), "数组:", arrNum);
输出结果:
可以利用length确定函数参数的个数
console.log("DOM:",list.length,
"arguments:",b().length,
"数组:",arrNum.length);
输出结果:
可以利用数字索引下标获取单个参数值
console.log("DOM:", list[0], "arguments:", b()[0], "数组:", arrNum[0]);
输出结果:
查看类数组是否有数组自带的方法,以push()为例
let argList = b();
list.push(5);
argList.push(5);
arrNum.push(5);
console.log("DOM:", list);
console.log("arguments:", argList);
console.log("数组:", arrNum);
输出结果:
目前结论:类数组具有数字索引下标以及 length 属性,但查看_proto_类数组不具备数组的push()等方法
将类数组对象转换为数组的方法
1.利用es6新增的Array.from
let newarr = Array.from(arrNum);
console.log("333", newarr);
2.扩展运算符
let newarr3 = [...argList];
console.log("444", newarr3);
3.利用数组自带的方法
由于类数组不能使用数组中的 map ()等方法,要想用 Array 的方法,有两种实现方式:
第一种:完全继承 Array 的所有方法
NodeList.prototype = Array.prototype;
第二种:用call()方法来调用 Array 原型链上的 map 方法
Array.prototype.map.call(links,function(e){})
我们选择使用第二种:利用slice,map,filter这些可以筛选数组的方法,用call()来重新制定使用方法的内容:
注意 Array.prototype.slice.call(argList);与 [].slice.call(list);效果是等同的,原理都是利用call改变数组内容
let newarr1 = Array.prototype.slice.call(argList);
// let newarr1 = [].slice.call(list);
console.log("111", newarr1);
let newarr2 = Array.prototype.map.call(argList, a => a);
// let newarr2 = [].map.call(argList, a => a);
console.log("222", newarr2);
let newarr3 = Array.prototype.filter.call(argList, a => a);
console.log("333", newarr3);
参考文章
NodeList 借用call方法使用Array.prototype.map方法_call_me_hoyin-CSDN博客