JS Array.from()将伪数组转换成数组的方法示例
Array.from方法用于将两类对象转换为真正的数组:
1、类似数组的对象,可以理解为“伪数组”
2、可遍历对象(比如字符串)
什么是伪数组?
伪数组都有一个基本的特点:必须有length属性。
letarrayLike={ "0":"a", "1":"b", "2":"c", "length":3 }
像上面的arrayLike对象,有length属性,key也是有序序列。
所以可以遍历,也可以查询长度。但却不能调用数组的方法。比如push、pop等方法。
在ES6之前,还有一个常见的伪数组:arguments。
arguments看上去也很像一个数组,但它没有数组的方法。
比如arguments.push(1),这样做一定会报错。
ES5的做法
在ES6问世之前,开发者通常需要用以下的方法把伪数组转换成数组。
方法1:遍历 //通过makeArray方法,把数组转成伪数组 functionmakeArray(arrayLike){ letresult=[]; for(leti=0,len=arrayLike.length;i这个方法虽然有效,但要多写很多代码。
方法2:Array.prototype.slice.call
functiondoSomething(){ letargs=Array.prototype.slice.call(arguments); console.log(args); } doSomething(1,2,3); //输出:[1,2,3]这个方法的功能和方法1是一样的,虽然代码量减少了,但不能很直观的让其他开发者觉得这是在转换。
ES6的做法
直到ES6提供了Array.from方法完美解决以上问题。
functiondoSomething(){ letargs=Array.from(arguments); console.log(args); } doSomething('一','二','三'); //输出:['一','二','三']Array.from的主要作用就是把伪数组和可遍历对象转换成数组的。
说“主要作用”的原因是因为Array.from还提供了2个参数可传。这样可以延伸很多种小玩法。
Array.from的第二个参数是一个函数,类似map遍历方法。用来遍历的。
Array.from的第三个参数接受一个this对象,用来改变this指向。
第三个参数的用法(不常用)
lethelper={ diff:1, add(value){ returnvalue+this.diff;//注意这里有个this } }; functiontranslate(){ returnArray.from(arguments,helper.add,helper); } letnumbers=translate(1,2,3); console.log(numbers);//2,3,4其他玩法
创建长度为5的数组,且初始化数组每个元素都是1
letarray=Array.from({length:5},()=>1) console.log(array) //输出:[1,1,1,1,1]第二个参数的作用和map遍历差不多的,所以map遍历有什么玩法,这里也可以做相同的功能。就不多赘述了。
把字符串转成数组
letmsg='hello'; letmsgArr=Array.from(msg); console.log(msgArr); //输出:["h","e","l","l","o"]最后一个问题:如果传一个真正的数组给Array.from会返回什么结果?
答案是:会返回一个一模一样的数组。
到此这篇关于JSArray.from()将伪数组转换成数组的方法示例的文章就介绍到这了,更多相关JSArray.from伪数组转换成数组内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!