本文主要是介绍JavaScript中类数组转化的方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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;
}`

这篇关于JavaScript中类数组转化的方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！