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. C++队列和链表

    1.什么是队列[queue] 队列是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表. 关于队列 ...

  2. Core Data 的使用

    一.概念 1.Core Data 是数据持久化存储的最佳方式 2.数据最终的存储类型可以是:SQLite数据库,XML,二进制,内存里,或自定义数据类型 在Mac OS X 10.5Leopard及以 ...

  3. 最新 网易java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易.京东.去哪儿等10家互联网公司的校招Offer,因为某些自身原因最终选择了网易.6.7月主要是做系统复习.项目复盘.LeetCode与牛客刷题 ...

  4. AMD, CMD, CommonJS和UMD

    我的Github(https://github.com/tonyzheng1990/tonyzheng1990.github.io/issues),欢迎star 今天由于项目中引入的echarts的文 ...

  5. controller中获取当前项目物理绝对路径

    用HttpServletRequest request获取 request.getSession().getServletContext().getRealPath(""); 上面 ...

  6. SQLSever--基础学习--创建登录用户&创建数据库用户&分配权限

    如题,本文简记一下SQL Sever里面登录用户(login)的创建,数据库用户(DBUser)的创建,以及给数据库用户分配权限(Grant). 数据库有三层保护机制: 第一层:登录用户以及登录密码的 ...

  7. SQL入门经典(第四版)学习记录——SQL语法(二)

    一.创建表 create table 表里包含什么类型的数据 表的名称是什么 主键 列的名称是什么 每一列的数据类型是什么 每一列的长度是多少 表里哪些列可以是空的 语法: create table ...

  8. Centos安装 k8s

    ### 一. 安装docker 1.安装依赖包```shellsudo yum install -y yum-utils device-mapper-persistent-data lvm2 ``` ...

  9. 十一、三星平台framebuffer驱动

    和总线设备驱动模型类似,framebuffer分为核心层.驱动层和设备层. 核心层:就是上一章分析的fbmem.c文件 驱动层(控制器层):一般由芯片原厂提供,实现了LCD控制器通用的操作接口和配置接 ...

  10. go if 判断 完成随机分数的评级

    1 go中 所有的大括号要跟在 当前语句的后面不能换行 例如: if a>0  { func getUser(){ for { 2关于随机分数的生成 种子的设置放到循环中会是重复的数字,这是可以 ...