Java教程

JavaScript中类数组转化的方式

本文主要是介绍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中类数组转化的方式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!