类数组及类数组转换数组方法

什么是类数组：

  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);

参考文章

类数组对象转换为数组的六种方法 - 霓裳依旧 - 博客园

类数组对象汇总 - baoyadong - 博客园

NodeList 借用call方法使用Array.prototype.map方法_call_me_hoyin-CSDN博客

一个类数组对象转换为一个真正的数组 - 杨气 - 博客园