ES6 Array.from()和Array.of()的用法（附带实例）

Array.from()和Array.of()都是 ES6 及后续标准添加的数组的扩展，本节将详细讲解它们的用法。

ES6 Array.from()

Array.from() 方法用于将两类对象转换为真正的数组，分别是类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

下面是一个类似数组的对象，Array.from() 将它转换为真正的数组。所谓类似数组的对象，本质特征只有一点，即必须有 length 属性：

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

在实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象。Array.from() 都可以将它们转换为真正的数组。

【实例】元素集合转换为数组。

<ul>
  <li>全选<input type='checkbox' id='all'></li>
  <li>Java<input type='checkbox' class='item'></li>
  <li>JavaScript<input type='checkbox' class='item'></li>
</ul>
<script>
  var all = document.querySelector('#all')
  var options = Array.from(document.querySelectorAll('.item'));
  all.onchange = function () {
    options.forEach(function (x) {
      x.checked = all.checked
    })
  }
</script>

querySelectorAll() 方法返回的是一个类似数组的对象。实例程序中，第 8 行代码使用 Array.from() 方法将获取的复选框元素集合转换为数组。因此，第 10 行代码可以使用数组的 forEach 方法遍历复选框的集合，使每一个复选框的状态和全选保持一致。

提示，扩展运算符（...）也可以将 DOM 操作返回的 NodeList 集合转换为数组。

ES6 Array.of()

Array.of() 方法用于将一组值转换为数组。

Array.of(3, 11, 8) // [3, 11, 8]
Array.of(3) // [3]

这个方法的主要目的是弥补数组构造函数 Array() 的不足，因为参数个数的不同会导致 Array() 的行为有差异。

Array() // []
Array(3) // [, , ]
Array(3, 11, 8) // [3, 11, 8]

上面代码中，Array() 方法没有参数、有 1 个参数、有 3 个参数时，返回的结果都不一样。只有当参数个数不少于 2 个时，Array() 才会返回由参数组成的新数组。参数只有一个正整数时，实际上是指定数组的长度。

Array.of() 基本上可以用来替代 Array() 或 new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of() 总是返回由参数值组成的数组。如果没有参数，就返回一个空数组。