Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

  那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。

  1、将类数组对象转换为真正数组:

1
2
3
4
5
6
7
8
9
let arrayLike = {
    0: 'tom'
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

  

  那么,如果将上面代码中length属性去掉呢?实践证明,答案会是一个长度为0的空数组。

  这里将代码再改一下,就是具有length属性,但是对象的属性名不再是数字类型的,而是其他字符串型的,代码如下:

1
2
3
4
5
6
7
8
9
let arrayLike = {
    'name''tom'
    'age''65',
    'sex''男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

  会发现结果是长度为4,元素均为undefined的数组

  由此可见,要将一个类数组对象转换为一个真正的数组,必须具备以下条件:

  1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

  2、该类数组对象的属性名必须为数值型或字符串型的数字

  ps: 该类数组对象的属性名可以加引号,也可以不加引号

  2、将Set结构的数据转换为真正的数组: 

1
2
3
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

  

  Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。如下:

1
2
3
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

  

  3、将字符串转换为数组:

1
2
let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

  

  4、Array.from参数是一个真正的数组:

1
console.log(Array.from([12,45,47,56,213,4654,154]))

  像这种情况,Array.from会返回一个一模一样的新数组

2.1 用...扩展运算符也是可以的

let arr3 = [...oli];

console.log(arr3); //(5) [li, li, li, li, li]

es6中Array.from()的更多相关文章

  1. ES6 中 Array.from() 不能得到的数组元素是 undefined 或是空数组

    本文地址:http://www.cnblogs.com/veinyin/p/7944072.html  正确格式 let json = { '0': 'Waaaa~', '1': 'Hello,', ...

  2. 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数

    有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...

  3. ES6中的Array.from()函数的用法

    ES6为Array增加了from函数用来将其他对象转换成数组. 当然,其他对象也是有要求,也不是所有的,可以将两种对象转换成数组. 1.部署了Iterator(迭代器)接口的对象,比如:Set,Map ...

  4. 利用ES6中的Array.find/ Array.findIndex来判断数组中已存在某个对象

    前端开发过程中,我们会经常遇到这样的情景:比如选中某个指标obj,将其加入到数组checkedArr中({id: 1234, name: 'zzz', ...}),但是在将其选中之前要校验该指标是否已 ...

  5. ES6中Arguments和Parameters用法解析

    原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参 ...

  6. ES6中的Class

    对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重 ...

  7. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  8. ES6中的Symbol类型

    前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...

  9. ES6中的Set和Map集合

    前面的话 在ES6标准制定以前,由于可选的集合类型有限,数组使用的又是数值型索引,因而经常被用于创建队列和栈.如果需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集 ...

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_04-新增课程-数据字典

    课程的等级是个单选按钮 2.3 数据字典 2.3.1介绍 在新增课程界面需要选择课程等级.课程状态等,这些信息统一采用数据字典管理的方式. 本项目对一些业务的分类配置信息,比如:课程等级.课程状态.用 ...

  2. SpringCloud学习成长之路七 高可用配置中心

    上一篇文章讲述了一个服务如何从配置中心读取文件,配置中心如何从远程git读取配置文件,当服务实例很多时,都从配置中心读取文件,这时可以考虑将配置中心做成一个微服务,将其集群化,从而达到高可用,架构图如 ...

  3. DN创建

    1. 参考采购订单创建DN : BAPI_OUTB_DELIVERY_CREATE_STO FUNCTION zmmfm0202. *"--------------------------- ...

  4. Delphi ADOQuery的速度优化

    今天终于把纠缠了几天的问题改完了,说到底只是一个很小的问题,就是ADOQuery的一个小属性. 把控件DBGridEh的一列的checkbox设为true,将其绑定DataSource和ADOQuer ...

  5. ORM连表操作

    连表操作分为以下三种情景: 一对多:models.ForeignKey(其他表) 多对多:models.ManyToManyField(其他表) 一对一:models.OneToOneField(其他 ...

  6. python __name__ == ‘__main__’详细解释(27)

    学习过C语言或者Java语言的盆友应该都知道程序运行必然有主程序入口main函数,而python却不同,即便没有主程序入口,程序一样可以自上而下对代码块依次运行,然后python不少开源项目或者模块中 ...

  7. opencv轮廓外接矩形

    1.寻找轮廓 api void cv::findContours( InputOutputArray image, OutputArrayOfArrays contours, OutputArray ...

  8. React native 禁止手势触摸 pointerEvents

    碰到一个需求是做个轮播图带自动播放的,UED那边给轮播的底部加了阴影渐变,如下红色区域. 这样会导致一个问题,手触摸在红色区域会被这层View挡住,导致不能手动滑动切换. 原先采取过的方法是在对应的触 ...

  9. oracle多表关联查询和子查询

    oracle多表关联查询和子查询 一.多表关联查询 例子: SQL> create table student1 ( sid ), sname ), sage )); Table created ...

  10. Yii错误异常处理

    目录 背景 web错误处理 console错误处理 背景 当程序中出现不可预期的错误,比如说除0异常,yii会给我们扔出这个异常信息,由于现在都是读写分离,客户端调你的api,都是协商好的数据格式,如 ...