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

更新日期: 2019-03-03阅读量: 3312标签: Array

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


一个问题

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

怎么做呢?可以这样:

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


站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

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

原生js获取数组中的最大值max和最小值min的方法总结

JavaScript获取数组中的最大值和最小值:方法一:传统循环遍历,方法二:利用Math.max和Math.min,方式三.利用sort排序...

原生js数组扁平化方法总汇,JavaScript多维数组如何实现扁平化处理返回一维数组

js数组扁平化就是指将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。 JavaScript方法包括 递归、es5 Array 的reduce函数用法、toString方法、ES6扩展运算符...

数组去重_原生js对普通数组去重算法的7种方法总结

JavaScript实现普通数组去重,讲解各种算法的思想和改进方法,已经他们的优缺点...利用数组的reduce方法,使用了filter方法,利用ES6去重,相对来说更为简单

如何快速的创建一个包含100个元素的数组

如何快速的创建一个包含100个元素的数组, 最初见到的问题是如何创建100个为元素为0 的数组,研究了一系列的方法,包含Es6 新的API ,不得不说, ES6 好强大!

js中数组创建的多种方式,数组中常用方法总汇

javascript创建数组的几种方式:1、字面量形式直接创建数组,2、Array构造函数创建数组。js数组常用的方法有哪些:join(),push()和pop(),shift() 和 unshift(),sort(),reverse(),concat()等

Array的 every、some、filter、map的区别,以及和reduce的区别

every、some、filter、map这几个方法有时候总是傻傻分不清,尤其map,总是一下子有点懵逼记不清和其他方法的区别,每次都需要查一下API,他们的相同点都是需要遍历数组中的每一项,重点是他们的区别.

从非数组对象转数组方法小结

从非数组对象转数组方法:Array.prototype.slice.call(obj、Array.from(obj)、[…obj]、Object.values(obj)等

JS实现遍历不规则多维数组的方法

这篇文章主要介绍了JS实现遍历不规则多维数组的方法,涉及javascript数组递归遍历相关实现与使用技巧,需要的朋友可以参考下

JavaScript数组中的22个常用方法

数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍

js中split()和join() 的使用_数组对象和字符串的相互转换

在前端开发中,相信大家都遇到过数组和字符串相互转换的情况 ,JavaScript提供了split()和join()这2个函数来进行转换,下面就介绍数组对象和字符串的相互转换。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!