ES6，Array.from()函数的用法
2018-06-24 00:01:30来源：未知 阅读 ()
ES6为Array增加了from函数用来将其他对象转换成数组。
当然，其他对象也是有要求，也不是所有的，可以将两种对象转换成数组。
1.部署了Iterator接口的对象，比如：Set，Map，Array。
2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。
const map1 = new Map(); map1.set('k1', 1); map1.set('k2', 2); map1.set('k3', 3); console.log('%s', Array.from(map1))
结果：
k1,1,k2,2,k3,3
将Set对象的元素转换成一个数组。
const set1 = new Set(); set1.add(1).add(2).add(3) console.log('%s', Array.from(set1))
结果
1,2,3
console.log('%s', Array.from('hello world'))
console.log('%s', Array.from('\u767d\u8272\u7684\u6d77'))
结果：
h,e,l,l,o, ,w,o,r,l,d
白,色,的,海
console.log('%s', Array.from({
0: '0',
1: '1',
3: '3',
length:4
}))
结果：
0,1,,3
如果对象不带length属性，那么转出来就是空数组。
console.log('%s', Array.from({
0: 0,
1: 1
}))
结果就是空数组。
对象的属性名不能转换成索引号时。
console.log('%s', Array.from({
a: '1',
b: '2',
length:2
}))
结果也是空数组
Array.from可以接受三个参数
我们看定义：
Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike：被转换的的对象。
mapFn：map函数。
thisArg：map函数中this指向的对象。
第二个参数，map函数
用来对转换中，每一个元素进行加工，并将加工后的结果作为结果数组的元素值。
console.log('%s', Array.from([1, 2, 3, 4, 5], (n) => n + 1))
结果：
上面的map函数实际上是给数组中的每个数值加了1。
2,3,4,5,6
第三个参数，map函数中this指向的对象
该参数是非常有用的，我们可以将被处理的数据和处理对象分离，将各种不同的处理数据的方法封装到不同的的对象中去，处理方法采用相同的名字。
在调用Array.from对数据对象进行转换时，可以将不同的处理对象按实际情况进行注入，以得到不同的结果，适合解耦。
这种做法是模板设计模式的应用，有点类似于依赖注入。
let diObj = { handle: function(n){ return n + 2 } }
console.log('%s', Array.from( [1, 2, 3, 4, 5], function (x){ return this.handle(x) }, diObj))
结果：
3,4,5,6,7
End
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：Vue可复用过渡和动态过渡
下一篇：面向对象笔记1
- JavaScript函数表达式详解及实例 2020-03-25
- 带你了解JavaScript中的函数 2020-03-08
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- 详谈构造函数加括号与不加括号的区别 2020-01-17
- JavaScript匿名函数与委托使用示例 2020-01-07
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
