当前位置: 首页 > Web前端 > HTML5

数组扩展

时间:2023-04-05 23:52:07 HTML5

1。Array.from(likeArrObj,[valueHandleFn],[thisObj])Array.from()用于将以下两类对象转换为真正的数组:类数组对象(array-likeobject,即对象本身具有length属性)可遍历对象(原型链上带有[Symbol.iterator]方法的对象,即具有iterator接口的可迭代对象)它接受三个参数:likeArrObj:需要转换的对象[valueHandleFn]:一个遍历函数,用来处理对象中的每一个值,类似于map(),这个参数是可选的。[thisObj]:用于在[valueHandleFn]中绑定this,即只有使用了[valueHandleFn]才会起作用。它返回的是对象转换成功后得到的数组。1.1代码示例letlikeArrObj={'0':0,'1':1,'2':2,length:3,}//ES5写法(两种)vararr_es5_01=Array.prototype.slice.call(likeArrObj)vararr_es5_02=[].prototypr.slice.call(likeArrObj)//ES6写法(两种)letarr_es6_01=Array.from(likeArrObj)letarr_es6_02=[...likeArrObj]1.1.1代码说明:Array.prototype.slice(startNum,endNum)可以浅拷贝数组元素的一部分,从startNum开始,到(endNum-1)结束。浅拷贝是指只拷贝数组元素的内容,而不管内容是否指向另一个值。通俗地说,就是复制了一层数据。深拷贝对应浅拷贝,它不仅会拷贝数组元素的内容,还会分析其内容是否为“指针”类型的值,如对象、函数、数组等。如果是“指针”类型的值,则继续复制该值下的所有内容。contents中的所有内容将被复制,直到内容为undefined、null、Boolean、Number、String、Symbolkind之一。Function.prototype.call(thisObj,arg1,arg2,...,argn)用于在运行时指定函数的this绑定对象thisObj为要绑定的对象arg1,arg2,...,argn为函数名为Function.prototype.apply(thisObj,argArr)的参数与该方法的功能一致,只是在参数传递上,使用了数组形式[...likeArrObj]。[...likeArrObj]中的...是展开运算符,通过调用likeArrObj的[Symbol.iterator]方法将其分解成独立的量,最后用[]合成一个新的数组,所以在使用这个方法的时候,一定要保证likeArrObj有[Symbol.iterator]方法。1.2应用场景其常见的应用场景:将document.querySelectorAll(str)返回的NodeList集合转换为真正的数组将arguments对象转换为真正的数组后,可以使用Array.prototype.forEach()方法来操作对象。