白话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
    }
  })

看上去是不错，但容易让人有些困惑，阅读起来也不那么直观。

可能有人会说，用es6的Array.from()来做啊：

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

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

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是一个类数组对象，上例中将arguments传入Array.from()，生成了对应的数组并返回。在es6之前，如果要将 非数组对象 转换为数组，你得自己写一个类似的转换方法，多麻烦啊。

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()并不能算创建数组的一种方式，毕竟它存在的初衷是为了解决将 非数组对象 转换为数组的问题。

但话说回来，既然它能将 非数组对象 转换为数组，所以也可以说，它算创建数组的一种方式。

恭喜恭喜！读完本篇，你已经学会了 四种 创建数组的方式了，有没有觉得突然变厉害了呢？