es6之Array.of()和Array.from()

es6新增了二种方法：Array.of()和Array.from()，它们有什么用途呢？在平时的开发中能给我们带来什么方便呢？本篇将从一个创建数组的小问题开始，逐步揭开它们的面纱。

一个问题

首先，我们来看一个问题，我需要创建一个共81项的数组，有9行，每行9个数（从1-9），在页面上进行展示，如下：

怎么做呢？可以这样：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr = arr.concat(arr)
arr = arr.concat(arr)
arr = arr.concat(arr)
arr = arr.concat([1, 2, 3, 4, 5, 6, 7, 8, 9])

console.table(arr)

真的不优雅！一看就是菜鸡程序员写的，但不管怎么样，的确实现了功能。那规模加大，需要的是810项的数组呢？那就需要换一种实现方式了，如下：

let arr = Array.apply(null, { length: 810 })
  .forEach((item, index) => {
    return {
      id: index,
      number: index % 9 + 1
    }
  })

看上去是不错，但容易让人困惑，阅读起来也不直观，又是apply，又是null的，有点让人抓狂。可能有人会说，用es6的Array.from()来做啊：

let arr = Array.from({ length: 810 }, (item, index) => ({
  id: index,
  number: index % 9 + 1
}))

不错哦，代码量变少了。更重要的是，代码意图也直观：数组长度810，每一项按照约定的规则进行初始化。

看完了问题，接下来具体说说这二个方法的诞生背景和用法，先来看Array.of

Array.of

es6之前，最常用的创建数组有如下两种方式，一种是字面量方式，还一种是new Array()方式：

var arr1 = [1, 3, 5]
var arr2 = new Array(1, 3, 5)

这里要重点提一下new Array()方式，因为它有一个缺陷，如果要用这种方式创建一个数组，其中就只有一个数字3，它居然无法做到！

var arr = new Array(3)

上面只会得到一个长度为3的数组（各项都是empty），而不是一个长度为1的数组（其中的项为数字3）。
我给你一个数字3，让你给我存到数组中，你给我一个长度为3的数组？惊不惊喜，意不意外？

还好，ES6引入了Array.of()方法来解决这个问题。

let arr = Array.of(3)

上面代码创建了一个长度为1的数组（其中的项为数字3）。
相比new Array()这种方式，Array.of()的方式显得更明了，我需要存什么，扔给它，它就给我存到数组中，不会给我意外和惊吓。

Array.from

可能会有人问，既然已经新增了Array.of()这种方式，还需要Array.from()方式吗？他们有区别呢？

简单点说，Array.from()适用于将非数组对象转换为数组的场景，它的初衷就是为了解决将非数组对象转换为数组的问题。

我们来看一个例子：

function makeArray() {
  return Array.from(arguments);
}
let arr = makeArray('a', 'b', 'c');

我们我们知道，JS函数中有一个arguments对象，arguments是一个类数组对象。

上面代码中，用Array.from()将arguments转换成真正的数组并返回。多方便啊，就一个方法搞定。
而在es6之前，如果要将arguments转换为数组，你得自己写一个类似的转换方法，多麻烦啊。

Array.from()的强大不止于此，它还能接受一个映射函数：

function cube() {
  return Array.from(arguments, value => value ** 3);
}
let arr = cube(1, 3, 5);

上面代码中，arguments被直接传递给Array.from()方法，从而将它包含的值转换成了数组。映射函数对每个数都进行了立方运算，因此目标数组的内容就是[ 1, 27, 125 ]，Array.from()不仅能够将非数组对象转换为数组，还能按照我们想要的方式进行转换，强大！

注意：Array.from()方法不仅可用于类数组对象，也可用于可迭代对象，更多请参考Array.from()

总结

准准确来说，Array.from()并不能算创建数组的一种方式，毕竟它的初衷是为了解决将非数组对象转换为数组的问题。但话说回来，既然它能将非数组对象转换为数组，所以也可以说，它算创建数组的一种方式。恭喜！读完本篇，你知道了至少四种创建数组的方式了。

来自：https://segmentfault.com/a/1190000018365814

链接: https://fly63.com/article/detial/2190