JavaScript中类数组转化的方式
很多时候我们要在JavaScript中对类数组进行转化,所谓的类数组是指那些有数组的结构,但原型对象不为Array的数据结构,比如childNodes,querySelectorAll返回的节点对象,都属于类数组,对于这些类数组,我们无法调用数组默认的API,对他们处理起来会比较困难,因此很多时候我们需要将他们转化成数组对象再进行处理。
使用Array.from
Array.from本身就是为了转化为数组而诞生的,它的使用结果就是能够将 参数转化为数组对象
` console.log(document.querySelectorAll('div'))
let element = document.querySelectorAll('div');
console.log(Array.from(element))`
除此之外,Array.from还可以将map,set转化为数组,其中map的每一个键值对都会被拆开,作为一组连续的元素
如果参数是一个字符串,那么字符串也会被拆分成数组结构,类似与split(""),但其无法选择参数,只能分成逐个字符
rest参数
Rest就是为解决传入的参数数量不一定, rest 本身就是数组,数组的相关的方法都可以用。
` console.log(document.querySelectorAll('div'))
let element = document.querySelectorAll('div');
console.log([...element])`
利用concat
` console.log([].concat.apply([], element))`
利用apply利用参数序列传参的特性,将类数组对象作为参数序列注入数组
利用slice.call
这种写法可以看作rest参数的ES5写法,因为slice的内部构造决定了slice的参数只要是一个可迭代对象它就可以执行,但slice本身是一个Array上的方法,因此类数组对象不能直接调用,因此我们需要用call将它的this绑定到要转化的类数组对象上,然后利用slice迭代产生一个数组对象
` console.log(Array.prototype.slice.call(element))`
附上slice的基本是实现原理,再其内部用length进行迭代导致类数组对象也可以执行这个函数,而内部的push方法可以让其产生一个新数组
` Array.prototype.mySlice = function(beg, end) {
let begin = beg || 0;
let last = end || this.length;
begin = (begin >= 0) ? begin : Math.max(0, begin + last);
last = (typeof last == 'number') ? Math.min(last, this.length) : this.length;
let res = new Array();
for (let i = begin; i < last; i++) {
res.push(this[i]);
}
return res;
}`