视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScriptES6中关于Array.from的用法
2020-11-27 20:13:57 责编:小采
文档

ES6为Array增加了from函数用来将其他对象转换成数组。

当然,其他对象也是有要求,也不是所有的,可以将两种对象转换成数组。

1.部署了Iterator接口的对象,比如:Set,Map,Array。

2.类数组对象,什么叫类数组对象,就是一个对象必须有length属性,没有length,转出来的就是空数组。

转换map

将Map对象的键值对转换成一个一维数组。

实际上转换出来的数组元素的序列是key1,value1,key2,value2,key3,value3.....

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

将Set对象的元素转换成一个数组。

const set1 = new Set();
set1.add(1).add(2).add(3)
console.log('%s', Array.from(set1))

结果

1,2,3

转换字符串

可以吧ascii的字符串拆解成一个数据,也可以准确的将unicode字符串拆解成数组。

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
白,色,的,海

类数组对象

一个类数组对象必须要有length,他们的元素属性名必须是数值或者可以转换成数值的字符。

注意:属性名代表了数组的索引号,如果没有这个索引号,转出来的数组中对应的元素就为空。

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 = n + 2'%s'1, 2, 3, 4, 5

结果:

3,4,5,6,7

下载本文
显示全文
专题