Array.from()

Posted 麦芽无心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Array.from()相关的知识,希望对你有一定的参考价值。

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()的主要内容,如果未能解决你的问题,请参考以下文章

理解Array.prototype.fill和Array.from

数组对象新增方法Array.from()Array.of()

javascript Array.of和Array.from

javascript Array.from()和Array.of()

Array.from() 与传播语法

javascript Array.from polyfill(另请参阅https://github.com/mathiasbynens/Array.from)