当前位置: 首页 > 科技观察

如何将JS中的类数组对象转换为数组?

时间:2023-03-15 20:49:42 科技观察

大家好,我是前端西瓜小哥,今天来聊一聊JS中什么是类数组对象,以及如何将类数组对象转化为数组。什么是类数组对象?类数组对象是具有长度属性的对象,但这个对象不是数组。一般来说,也会有从0到length-1的属性,结构表现的很像数组。constarrlike={1:'a',4:'d',length:9};Array.isArray(arrlike)//false从底层来看,这个对象的原型链上没有Array.prototype,因此我们不能在Array.prototype上使用特定于Array的方法,例如forEach和map。关于原型链,可以看我的这篇文章:《如何用原型链的方式实现一个 JS 继承?》如果强制类数组对象使用forEach方法,会出现类型错误。functionf(a,b){arguments.forEach(item=>console.log(item));}//UncaughtTypeError:arguments.forEachisnotafunction除了手动创建类数组对象外,还有以下公共类数组对象:普通数组中的参数对象。请注意,此对象在箭头函数中不存在。一些获取Dom集合的方法,如document.querySelectorAll()、document.getElementsByClassName、document.getElementsByTagName()也返回类似数组的对象。让我们看看我们有哪些方法可以将类数组转换为数组。Array.prototyle.slice.call()我们可以使用Array.prototyle.slice内置方法。Array.prototype.slice.call(obj);[].slice.call(obj);[]空数组和Array.prototype效果一样,因为空数组本身没有slice方法,会去通过原型链得到Array.prototype方法。除了更短之外,写一个空数组没有任何优势。然后call来自Function.prototype,可以使用指定的this值来调用一个函数,这里是Array.prototype.slice。我们没有将开始和结束位置参数传递给slice方法,因此默认情况下将采用整个范围。Slice迭代会跳过不存在的索引属性,所以你会看到empty的特殊值,它与undefined有点不同,你可以认为它是未初始化的。forEach、map等内置方法会跳过不执行的回调函数。一个例子:constarrlike={1:'a',4:'d',length:9};constarr=Array.prototype.slice.call(arrlike);控制台日志(arr);原理是什么?因为slice是用来复制返回一个新的子数组,只需要操作的对象有length属性即可。下面是Array.prototype.slice的核心实现,默认开始和结束都在长度范围内。Array.prototype.mySlice=function(start,end){if(start==undefined)start=0;if(end==undefined)end=this.length;constcloned=newArray(end-start);for(leti=0;i