ES6中的Array.from()函数的用法
ES6为Array增加了from函数用来将其他对象转换成数组。
当然,其他对象也是有要求,也不是所有的,可以将两种对象转换成数组。
1.部署了Iterator(迭代器)接口的对象,比如:Set,Map,Array。 2.类数组对象,什么叫类数组对象,就是一个对象必须有length属性,没有length,转出来的就是空数组。
具体用法
Array.from可以接受三个参数
我们看定义:Array.from(arrayLike [, mapFn [, thisArg]])
arrayLike:被转换的的对象。 mapFn:map函数。 thisArg:map函数中this指向的对象。
第一个参数
在这里很好理解,就是要被转换的对象
第二个参数,map函数
用来对转换中的每一个元素进行加工,并将加工后的结果作为结果数组的元素值。
console.log(Array.from([1, 2, 3, 4, 5], (n) => n + 1)) // 结果[2,3,4,5,6] map函数的实际的做用是给每个元素都加了1
第三个参数,map函数中this指向的对象
该参数是非常有用的,我们可以将被处理的数据和处理对象分离,将各种不同的处理数据的方法封装到不同的的对象中去,处理方法采用相同的名字。
在调用Array.from对数据对象进行转换时,可以将不同的处理对象按实际情况进行注入,以得到不同的结果,适合解耦。
这种做法是模板设计模式的应用,有点类似于依赖注入。
const obj = { add: function (n) {
return n + 1;
}
} console.log( Array.from(
[1, 2, 3, 4, 5],
function (x){
return this.add(x)
},
obj)) //结果 [2,3,4,5,6]
转换set对象
const setArr = new Set();
setArr.add(1).add(2).add("www");
console.log(Array.from(setArr));
// 结果 [1, 2, "www"] const setArr1 = new Set([1,1,12,2,3,4,5,5,6,6]);
console.log(Array.from(setArr1));
// 或者使用展开表达式 console.log([...setArr1]);
// 结果 [1, 12, 2, 3, 4, 5, 6]
// 同时不难发现set具有去重的功能
转换map对象
const mapArr = new Map();
mapArr.set('m1', 1);
mapArr.set('m2', 2);
mapArr.set('m3', 3);
console.log(Array.from(mapArr));
// 结果 [['m1', 1],['m2', 2],['m3', 3]]
console.log(Array.from(mapArr)[1]);
// 结果 ["m2", 2]
转换类数组对象
一个类数组对象必须要有length属性,他们的元素属性名必须是数值或者可以转换成数值的字符。
注意:
- 属性名代表了数组的索引号,如果没有这个索引号,转出来的数组中对应的元素就为length长度个undefined。
- 如果没有length属性,转换出来的数组也是空的;
带length
//注意看区别
console.log(Array.from({
0: 'dd',
1: 'gg',
2: 'w3',
length:3
}))
// 结果 ["dd", "gg", "w3"] console.log(Array.from({
0: 'dd',
1: 'gg',
4: 'w3',
length:3
}))
// 结果 ["dd", "gg", undefined] console.log(Array.from({
"0": 'dd',
1: 'gg',
"3": 'w3',
length:6
}))
// 结果 ["dd", "gg", undefined, "w3", undefined, undefined] //总结,生成数组的长度由length属性确定,如果相应索引位置上没有值,则为undefined
不带length
console.log( Array.from({
0: 3,
1: 12
}))
// 结果 []
对象的属性名不能转换成索引号时
console.log(Array.from({
"s": 'dd',
"ss": 'gg',
"n": 'w3',
length:3
}))
// 结果 [undefined, undefined, undefined]
补充
ES6中的Array.from()函数的用法的更多相关文章
- ES6,Array.includes()函数的用法
在ES5,Array已经提供了indexOf用来查找某个元素的位置,如果不存在就返回-1,但是这个函数在判断数组是否包含某个元素时有两个小不足,第一个是它会返回-1和元素的位置来表示是否包含,在定位方 ...
- Array.fill()函数的用法
ES6,Array.fill()函数的用法 ES6为Array增加了fill()函数,使用制定的元素填充数组,其实就是用默认内容初始化数组. 该函数有三个参数. arr.fill(value, s ...
- C++中rand()函数的用法
C++中rand()函数的用法 2011-12-30 11:03:59| 分类: C / C++|举报|字号 订阅 一.C++中不能使用random()函数 random函数不是ANSI C标准 ...
- MATLAB中“repmat”与“cat”函数的用法
MATLAB中“repmat”与“cat”函数的用法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. repmat函数 >> z=re ...
- Pytorch中randn和rand函数的用法
Pytorch中randn和rand函数的用法 randn torch.randn(*sizes, out=None) → Tensor 返回一个包含了从标准正态分布中抽取的一组随机数的张量 size ...
- ES6,Array.of()函数的用法
ES6为Array增加了of函数用已一种明确的含义将一个或多个值转换成数组. 因为,用new Array()构造数组的时候,是有二意性的. 构造时,传一个参数,表示生成多大的数组. 构造时,传多个参数 ...
- 转:随机函数 C++中rand()函数的用法
转自:http://blog.163.com/wujiaxing009@126/blog/static/719883992011113011359154/ 一.C++中不能使用random()函数 ...
- ES6中的高阶函数:如同 a => b => c 一样简单
作者:Sequoia McDowell 2016年01月16日 ES6来啦!随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6,以往被认为是"仅需了解"的ES6特性变成了 ...
- 利用ES6中的Array.find/ Array.findIndex来判断数组中已存在某个对象
前端开发过程中,我们会经常遇到这样的情景:比如选中某个指标obj,将其加入到数组checkedArr中({id: 1234, name: 'zzz', ...}),但是在将其选中之前要校验该指标是否已 ...
随机推荐
- svn 卡死住,关闭后,用CleanUp报错解决
一.问题描述: 经常用SVN的人都知道,有时候更新文件更新着更新一般,突然卡顿住,死在那边动都不动出现提示:svn cleanup failed–previous operation has not ...
- entity framework 实现按照距离排序
在做项目时,经常会遇到“离我最近”这种需求.顾名思义,它需要根据用户的经纬度和事物的经纬度计算距离,然后进行排序,最后分页(当然这些操作要在数据库中进行,否则就变成假分页了). 我们通常可以用sql语 ...
- mybatis bug之org.apache.ibatis.exceptions.PersistenceException:
详细报错信息: org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java. ...
- pdf文件下载水印添加的中文与空格问题解决
public static boolean waterMark(String inputFile, String outputFile, String waterMarkName)throws IOE ...
- Spring+MyBatis整合过程
步骤: 1.引入Spring+MyBatis开发包 >spring(ioc aop dao)开发包 >mybatis开发包,dbcp,驱动包 >mybatis-spring.jar整 ...
- 禁用了传说中的PHP危险函数之后,Laravel的定时任务不能执行了?
虽然已是 2018 年,但网上依然流传着一些「高危 PHP 函数,请一定要禁用!」的标题党文章(搜索关键字:一些需要禁用的PHP危险函数). 这些文章的内容简单直接,给出 php.ini 的 disa ...
- css控制元素 水平垂直居中
控制元素居中核心代码为 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; css: /* 容器 */ .w ...
- C# 通用单例窗体类
/// <summary> /// 通用的单例制作器 /// </summary> /// <typeparam name="T"></t ...
- 数据结构学习java(一点五)链式顺序表(链表)
java中没有将指针暴露给用户(以前做过看过一篇文章写有java中是有指针的,只是被藏起来了),所以得使用引用的方式. 何为引用请看下面这篇文章(写的很不错,当然肯定比我写的好): https://w ...
- centos7网络配置总结
centos7网络配置 --wang 一.通过配置文件 配置/etc/sysconfig/network-scripts/en.. 记忆信息量大,易出错,不推荐使用.配置多台电脑静态ip可以通过复制模 ...