es6 Array.from() 方法将两类对象转为真正的数组
用法:用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象(包含ES6新增的数据结构Set和Map);
说明:1)只要是部署了Iterator接口的数据结构,Array.from都能将其转化为数组
  2)如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。
  3)扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过  Array.from方法转为数组,而此时扩展运算符就无法转换。
注意:对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代
  const toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj);
  })

例:
  let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2':'c',
    length: 3
  };
  //es5的写法
  var arr1 = [].slice.call(arrayLike);
  //es6写法
  var arr2 = Array.from(arrayLike);

例2:dom返回的NodeList集合和函数内部的arguments对象
  //NodeList对象
  let ps = document.querySelectorAll('p');
  Array.from(ps).filter(p => {
    return p.textContent.length > 100;
  })
  //arguments对象
  function foo() {
    var args = Array.from(arguments);
  }
例3:
  Array.from({ length: 3 });
  // [ undefined, undefined, undefined ]

Array.from可以接受第二个参数 作用类似数组的map方法

例3:
  Array.from(arrayLike, x => x * x);
  Array.from(arrayLike).map(x => x * x);
  Array.from([1, 2, 3], (x) => x * x);

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

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. ES5对Array增强的9个API

    为了更方便的对Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.indexOf ...

  3. JavaScript Array对象

    介绍Js的Array 数组对象. 目录 1. 介绍:介绍 Array 数组对象的说明.定义方式以及属性. 2. 实例方法:介绍 Array 对象的实例方法:concat.every.filter.fo ...

  4. 了解PHP中的Array数组和foreach

    1. 了解数组 PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.详细的解释可参见:PHP.net中的Array数组    . 2.例子:一般的数组 这里,我 ...

  5. 关于面试题 Array.indexof() 方法的实现及思考

    这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...

  6. javascript之活灵活现的Array

    前言 就如同标题一样,这篇文章将会灵活的运行Array对象的一些方法来实现看上去较复杂的应用. 大家都知道Array实例有这四个方法:push.pop.shift.unshift.大家也都知道 pus ...

  7. 5.2 Array类型的方法汇总

    所有对象都具有toString(),toLocaleString(),valueOf()方法. 1.数组转化为字符串 toString(),toLocaleString() ,数组调用这些方法,则返回 ...

  8. OpenGL ES: Array Texture初体验

    [TOC] Array Texture这个东西的意思是,一个纹理对象,可以存储不止一张图片信息,就是说是是一个数组,每个元素都是一张图片.这样免了频繁地去切换当前需要bind的纹理,而且可以节省系统资 ...

  9. Merge Sorted Array

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...

  10. C++ std::array

    std::array template < class T, size_t N > class array; Code Example #include <iostream> ...

随机推荐

  1. 吴恩达深度学习笔记(deeplearning.ai)之卷积神经网络(一)

    Padding 在卷积操作中,过滤器(又称核)的大小通常为奇数,如3x3,5x5.这样的好处有两点: 在特征图(二维卷积)中就会存在一个中心像素点.有一个中心像素点会十分方便,便于指出过滤器的位置. ...

  2. 洛谷 [P1402] 酒店之王

    有两个约束条件的二分图匹配 我们回忆一下二分图匹配的匈牙利算法的具体流程,它是通过寻找增广路来判断最大匹配数的,我们再观察一下题目中的两个条件,只有两个条件都满足,才算找到一条增广路,所以我们可以分别 ...

  3. 洛谷 [P1119] 灾后重建

    我们发现每次询问都是对于任意两点的,所以这是一道多源最短路径的题,多源最短路径,我们首先想到floyd,因为询问的时间是不降的,所以对于每次询问,我们将还没有进行松弛操作的的点k操作. #includ ...

  4. BZOJ 3209: 花神的数论题 [数位DP]

    3209: 花神的数论题 题意:求\(1到n\le 10^{15}\)二进制1的个数的乘积,取模1e7+7 二进制最多50位,我们统计每种1的个数的数的个数,快速幂再乘起来就行了 裸数位DP..\(f ...

  5. BZOJ 1856: [Scoi2010]字符串 [Catalan数]

    1856: [Scoi2010]字符串 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1418  Solved: 790[Submit][Status][ ...

  6. BZOJ 3926: [Zjoi2015]诸神眷顾的幻想乡 [广义后缀自动机 Trie]

    3926: [Zjoi2015]诸神眷顾的幻想乡 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1124  Solved: 660[Submit][S ...

  7. 孤立的SQL用户

    问题 最近公司很多数据库在上云,也有一部分在下云.这期间出现了很多问题,其中一个比较恶心的问题就是"孤立用户".当数据库备份还原以后用以前的用户发现不能登录.一开始以为是登录账号没 ...

  8. LocalMaxima_NOI导刊2009提高(1)

    先打表,发现\(ans=\sum_{i=1}^n\frac{1}{i}\) 对于小数据可以直接打表 数据很大时,精度相对就比较宽松 欧拉-马斯刻若尼常数=调和级数-自然对数 调和级数为:\(\sum_ ...

  9. MySQL中的内置系统函数

    一.字符串函数  1. CONCAT(S1,S2....SN): 把传入的参数连接成一个字符串  2. INSERT(str, x, y, insert): 将字符串 X位置开始,y个字符串长度替换为 ...

  10. 重绘(redraw或repaint),重排(reflow)

    浏览器运行机制图: 浏览器的运行机制:layout:布局: 1.构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树(Co ...