ES6中新增Array.from()函数的用法详解

简介: ES6中新增Array.from()函数的用法详解

ES6为Array增加了from函数用来将其他对象转换成数组。当然,其他对象也是有要求,也不是所有的,可以将两种对象转换成数组。

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

image.png


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

image.png


Map对象的转换

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

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

image.png


输出结果:

image.png

Set对象的转换

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

image.png


输出结果:

image.png

字符串的转换

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

image.png

输出结果:

image.png

类数组对象的转换

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

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

image.png

输出结果:

image.png

如果对象不带length属性,那么转出来就是空数组。

image.png

输出结果就是空数组:

image.png

对象的属性名不能转换成索引号时,转出来的结果也是空数组。

image.png

输出结果也是空数组:

image.png

Array.from可以接受三个参数

image.png

我们看定义:

image.png

arrayLike:被转换的的对象。

mapFn:map函数。

thisArg:map函数中this指向的对象。

第一个参数,被转换的的对象

第二个参数,map函数

用来对转换中,每一个元素进行加工,并将加工后的结果作为结果数组的元素值。

image.png

输出结果:

上面的map函数实际上是给数组中的每个数值加了1。

image.png

第三个参数,map函数中this指向的对象

 

该参数是非常有用的,我们可以将被处理的数据和处理对象分离,将各种不同的处理数据的方法封装到不同的的对象中去,处理方法采用相同的名字。

 

在调用Array.from对数据对象进行转换时,可以将不同的处理对象按实际情况进行注入,以得到不同的结果,适合解耦。

 

这种做法是模板设计模式的应用,有点类似于依赖注入。

image.png

输出结果:

image.png

目录
相关文章
|
7月前
|
Python
使用array()函数创建数组
使用array()函数创建数组。
137 3
|
2月前
|
Python
Numpy学习笔记(一):array()、range()、arange()用法
这篇文章是关于NumPy库中array()、range()和arange()函数的用法和区别的介绍。
57 6
Numpy学习笔记(一):array()、range()、arange()用法
|
4月前
|
JavaScript 前端开发 PHP
|
4月前
|
存储 关系型数据库 MySQL
|
7月前
|
JSON 数据格式 C++
C++ JSON库 nlohmann::basic_json::array 的用法
C++ JSON库 nlohmann::basic_json::array 的用法
520 1
|
数据可视化 数据处理
解决 FAILED: UDFArgumentException explode() takes an array or a map as a parameter 并理解炸裂函数和侧视图
解决 FAILED: UDFArgumentException explode() takes an array or a map as a parameter 并理解炸裂函数和侧视图
96 0
|
存储 容器
2023-3-3-std::array的用法
2023-3-3-std::array的用法
95 0
|
PHP
php函数基础学习:array_chunk() 函数把一个数组分割为新的数组块
php函数基础学习:array_chunk() 函数把一个数组分割为新的数组块
62 0
Array.prototype.includes() 原型调用用法案例讲解
Array.prototype.includes() 原型调用用法案例讲解
120 2