前端JS必备知识点：类数组与数组的区别与转换

类数组与数组的区别与转换

类数组

1. 拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）
2. 不具有数组所具有的方法
3. 是一些元素的集合（普通对象），相当于是个伪数组，数组是Array型

在JavaScript中常见的类数组有：内置对象arguments、DOM方法返回的结果（如：document.querySelectorAll('li')，document.getElementsByTagName('div')）;

由于在开发中我们经常要对一些DOM方法返回的结果做一些相对应的控制处理，然后返回的结果是个类数组，不能进行很好的处理，于是我们经常将类数组或者可遍历的对象转换成真正的数组，这样我们就可以调用数组所具有的方法。

类数组转换数组

1、Array.prototype.slice.call(arrayLike)的结果是将arrayLike对象转换成Array对象，Array.prototype.slice表示数组的原型中的slice方法。slice方法返回的是一个Array类型的对象。

Array.prototype.slice = function(start,end){ 
var result = new Array(); 
start = start || 0; 
end = end || this.length; //使用call后，改变了this的指向，也就是指向传进来的对象
for(var i = start; i < end; i++){ 
       result.push(this[i]); 
     } 
     return result; 
}
let oDivs = document.getElementsByTagName('div');
oDivs = Array.prototype.slice.call(oDivs);

2、使用JavaScript的扩展运算符，三个点"..."，作用是将数组转换为一个用逗号分隔的参数列表，利用拓展运算符可以轻松合并两个数组；同时也可以实现类数组转换为数组。

let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
let ary3 = [...ary1, ...ary2];
//ary1.push(...ary2);
console.log(...ary1);//1, 2, 3
console.log(...ary2);//4, 5, 6
console.log(ary3);//[1,2,3,4,5,6]
let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];

3、使用ES6里面的Array.from()方法转为数组

let a = Array.from('一二三四五六七') // ["一", "二", "三", "四", "五", "六", "七"] 
let b = Array.from(new Set([1, 2, 1, 2])) // [1,2] 数组去重
let c = Array.from(new Map([[1, 2], [2, 4], [4, 8]])) // 接受一个map
let d = Array.from(arguments)// 接受一个类数组对象
let e = Array.from(document.querySelectorAll('li')) //接受DOM返回的结果