脚本宝典收集整理的这篇文章主要介绍了白话es6系列一：Array.of()和Array.from()，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

      

      
      ITle="" data-original-title="复制">
      
      
let arr = Array.apply(null, { length: 810 })
  .map((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()的强大不止于此，它还能接受一个映射函数：

      

      
      ube(1, 3, 5);" title="" data-original-title="复制">
      
      
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()并不能算创建数组的一种方式，毕竟它的初衷是为了解决将非数组对象转换为数组的问题。
但话说回来，既然它能将非数组对象转换为数组，所以也可以说，它算创建数组的一种方式。
恭喜！读完本篇，你知道了至少四种创建数组的方式了。????
脚本宝典总结
       
以上是脚本宝典为你收集整理的白话es6系列一：Array.of()和Array.from()全部内容，希望文章能够帮你解决白话es6系列一：Array.of()和Array.from()所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。