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

栏目: JavaScript · 发布时间: 4年前

内容简介:es6新增了二种方法:Array.of()和Array.from(),它们有什么用途呢?在平时的开发中能给我们带来什么方便呢?本篇将从一个创建数组的小难题开始,逐步揭开它们的面纱。首先,我们来看一个问题,我需要创建一个共81项的数组,有9行,每行9个数(从1-9),在页面上进行展示,如下:

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

一个问题

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

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

真的不优雅!一看就是菜鸡 程序员 写的,但不管怎么样,的确实现了功能。

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

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

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java核心技术·卷1:基础知识(原书第9版)

Java核心技术·卷1:基础知识(原书第9版)

(美)Cay S. Horstmann、(美)Gary Cornell / 周立新、陈波、叶乃文、邝劲筠、杜永萍 / 机械工业出版社 / 2013-11-1 / 119.00

Java领域最有影响力和价值的著作之一,拥有20多年教学与研究经验的资深Java技术专家撰写(获Jolt大奖),与《Java编程思想》齐名,10余年全球畅销不衰,广受好评。第9版根据JavaSE7全面更新,同时修正了第8版中的不足,系统全面讲解Java语言的核心概念、语法、重要特性和开发方法,包含大量案例,实践性强。 《Java核心技术·卷1:基础知识》共14章。第1章概述了Java语言与其......一起来看看 《Java核心技术·卷1:基础知识(原书第9版)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具