白话es6系列一：Array.of()和Array.from()

newtrek 发布于2019-08-23 15:36 / 2556人阅读

摘要：更重要的是，代码意图也直观数组长度，每一项按照约定的规则进行初始化。上面代码创建了一个长度为的数组其中的项为数字。的强大不止于此，它还能接受一个映射函数上面代码中，被直接传递给方法，从而将它包含的值转换成了数组。

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 })
  .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()的强大不止于此，它还能接受一个映射函数：

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

云服务器 GPU云服务器 es6-系列白话大数据和机器学习系列一云服务器产品系列和价格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102299.html

JS的内置对象系列：Array（一）

摘要：日常开发过程中，发现自己对很多原生方法都不知道，有些早已实现的方法，却傻乎乎自己去实现，因此萌生了总结和练习内置对象方法的想法。日常开发过程中，发现自己对很多原生方法都不知道，有些早已实现的方法，却傻乎乎自己去实现，因此萌生了总结和练习JS内置对象方法的想法。以下内容可能并不有趣，请谨慎观看?，参考自MDN Array对象的属性 Array.length 这个大家都再熟悉不过啦...

张红新 2019-08-20 14:35 评论0 收藏0
ES6 旧瓶新酒

摘要：本文是系列的第二篇，前一篇走马观花概要介绍了，这一篇标题之所以叫旧瓶新酒，是想介绍那些原来就被广泛使用的对象，例如，对这些对象扩展了一些很有用的新方法。用于监听取消监听数组的变化，指定回调函数。在中已被建议撤销。本文是 ES6 系列的第二篇，前一篇《ES6 走马观花》概要介绍了ES6，这一篇标题之所以叫旧瓶新酒，是想介绍那些原来就被广泛使用的JS对象，例如String、Array，E...

未东兴 2019-08-21 10:48 评论0 收藏0
重读《学习JavaScript数据结构与算法-第三版》- 第3章数组（二）

摘要：定场诗守法朝朝忧闷，强梁夜夜欢歌损人利己骑马骡，正值公平挨饿修桥补路瞎眼，杀人放火儿多我到西天问我佛，佛说我也没辙前言读学习数据结构与算法第章数组，本小节将继续为各位小伙伴分享数组的相关知识数组的新功能。定场诗守法朝朝忧闷，强梁夜夜欢歌；损人利己骑马骡，正值公平挨饿；修桥补路瞎眼，杀人放火儿多；我到西天问我佛，佛说：我也没辙！前言读《学习JavaScript数据结构与算法...

William_Sang 2019-08-26 14:01 评论0 收藏0
【重温基础】10.数组

摘要：本文是重温基础系列文章的第十篇。返回一个由回调函数的返回值组成的新数组。返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。回调函数接收三个参数，当前值当前位置和原数组。本文是重温基础系列文章的第十篇。今日感受：平安夜，多棒。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型【重温基础】2.流程控制和错误...

DangoSky 2019-08-23 14:19 评论0 收藏0
ES6数组 - 新增的创建数组的方法

摘要：它主要用在以类数组对象和可迭代对象为蓝本，创建对应的数组。类数组对象我们最熟悉的类数组对象，应该就是的对象了。在ES6之前，创建数组的方式有2种：一: 通过数组字面量 let array = [1,2,3]; console.log(array);//[1,2,3] 二: 通过new Array()创建数组 let array = new Array(1, 2, 3); conso...

e10101 2019-08-26 10:28 评论0 收藏0