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. selenium WebDriver 清空input的方式

    做自动测试时,经常会出现某些文本框带有默认值的形式,此时我们为了输入我们预期的数据,就需要我们对默认值清楚后做处理.本文章提供四种方法 //方法1 public static void setElem ...

  2. osgText::Text osg字体

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  3. osgViewer::Viewer::Windows

    osg自带窗口去掉边框 #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #incl ...

  4. 一百四十四:CMS系统之评论布局和功能二

    在base页加一个登录标识符 给加页面两个id,方便取值 js $(function () { //初始化ueditor var ue = UE.getEditor('editor', { 'serv ...

  5. iOS的多线程技术

    iOS的三种多线程技术 1.NSThread 每个NSThread对象对应一个线程,量级较轻(真正的多线程) 2.以下两点是苹果专门开发的“并发”技术,使得程序员可以不再去关心线程的具体使用问题 ØN ...

  6. 如何去除PATH里的重复项并排序

    注意sed的用法,linux和Mac os不同,linux是Gnu的,Mac是BSD的 PATH排序去掉重复内容 mac和linux的换行符替换方法不一样,如下是Mac下的操作 export PATH ...

  7. DLT(Direct Linear Transform)算法

    1.DLT定义            DLT是一个 用于解决包含尺度问题的最小二乘问题 的算法.           DLT解决问题的标准形式为:                            ...

  8. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

  9. python不定长参数 *argc,**kargcs(19)

    在 python函数的声明和调用 中我们简单的了解了函数的相关使用,然而在函数传递参数的时候,我们埋下了一个坑,关于不定长参数的传递我们还没有讲,今天这篇文章主要就是讲解这个问题. 一.函数不定长参数 ...

  10. 自定义Hive函数

    7. 函数 7.1 系统内置函数 查看系统自带的函数:show functions; 显示自带的函数的用法:desc function upper(函数名); 详细显示自带的函数的用法:desc fu ...