关闭

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

时间: 2019-03-03阅读: 2660标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

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

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

JS取出两个数组中的不同或相同元素

concat() 方法:用于连接两个或多个数组。Array filter() 方法:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。indexOf() 方法:可返回某个指定的字符串值在字符串中首次出现的位置。

arguments转化成Array数组的方法

简单说一下arguments,arguments 就是函数内一个內建对象,它包含函数接收到的所有变量;所以,在实际开发中,我们使用arguments可以很方便的获取到所有的实参,并且也需要对其使用是写数组的方法

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

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

js中reduce的用法,如何使用reduce函数

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组

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

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

js实现一维数组转换为树形结构数组

在设计树形结构的数据时候,数据库一般为:id,name,parent...如果后端不处理直接返给前端,前端就需要把这个一维数组转换为树形结构数组。下面整理了下如何通过js实现一维数组转换为树形结构数组。

在JavaScript中为什么应该用map和filter替换forEach?

当你需要拷贝一个数组的全部或者部分到一个新数组的时候,优先使用map和filter而不是forEach。使用map和filter有很多好处,比如关注点分离、易于测试、可读性和异步编程的支持,因此这是一个明智的选择。

认识array method的reduce

reduce属于javascript「synchronize同步」的array method,他就是把一整个array的所有内容,有顺序性的挤压squeeze最后变成一个值

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

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

点击更多...

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