专栏首页京程一灯怎样在JavaScript中创建和填充任意长度的数组 [每日前端夜话0x29]

怎样在JavaScript中创建和填充任意长度的数组 [每日前端夜话0x29]

每日前端夜话0x29

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:4012 字 1 图

预计阅读时间: 11 分钟

翻译:疯狂的技术宅 原文: http://2ality.com/2018/12/creating-arrays.html

创建数组的最佳方法是通过字面方式:

1const arr = [0,0,0];

不过这并不是长久之计,比如当我们需要创建大型数组时。这篇博文探讨了在这种情况下应该怎么做。

没有空洞的数组往往表现得更好

在大多数编程语言中,数组是连续的值序列。在 JavaScript 中,Array 是一个将索引映射到元素的字典。它可以存在空洞(holes) 【请参见:http://exploringjs.com/es6/ch_arrays.html#sec_array-holes】—— 零和数组长度之间的索引没有映射到元素(“缺失索引”)。例如,下面的 Array 在索引 1 处有一个空洞:

1> Object.keys(['a',, 'c'])
2[ '0', '2' ]

没有空洞的数组也称为 dense packed。密集数组往往表现更好,因为它们可以连续存储(内部)。一旦出现了空洞,内部表示就必须改变。我们有两种选择:

  • 字典。查找时会消耗更多时间,而且存储开销更大。
  • 连续的数据结构,对空洞进行标记。然后检查对应的值是否是一个空洞,这也需要额外的时间。

不管是哪种情况,如果引擎遇到一个空洞,它不能只返回 undefined,它必须遍历原型链并搜索一个名称为“空洞索引”的属性,这需要花费更多时间。

在某些引擎中,例如V8,如果切换到性能较低的数据结构,这种改变将会是永久性的。即使所有空洞都被填补,它们也不会再切换回来了。

关于 V8 是如何表示数组的,请参阅Mathias Bynens的文章“V8中的元素类型”【https://v8.dev/blog/elements-kinds】。

创建数组

`Array` 构造函数

如果要创建具有给定长度的 Array,常用的方法是使用 Array 构造函数 :

1const LEN = 3;
2const arr = new Array(LEN);
3assert.equal(arr.length, LEN);
4// arr only has holes in it
5assert.deepEqual(Object.keys(arr), []);

这种方法很方便,但是有两个缺点:

  • 即便你稍后再用值把数组完全填满,这种空洞也会使这个 Array 略微变慢。
  • 空洞的默认值一般不会是元素的初始“值”。常见的默认值是零。

在 `Array` 构造函数后面加上 `.fill()` 方法

.fill()方法会更改当前的 Array 并使用指定的值去填充它。这有助于在用 new Array() 创建数组后对其进行初始化:

1const LEN = 3;
2const arr = new Array(LEN).fill(0);
3assert.deepEqual(arr, [0, 0, 0]);

警告:如果你用对象作为参数去 .fill() 一个数组,所有元素都会引用同一个实例(也就是这个对象没有被克隆多份):

1const LEN = 3;
2const obj = {};
3
4const arr = new Array(LEN).fill(obj);
5assert.deepEqual(arr, [{}, {}, {}]);
6
7obj.prop = true;
8assert.deepEqual(arr,
9  [ {prop:true}, {prop:true}, {prop:true} ]);

稍后我们会遇到的一种填充方法( Array.from() )则没有这个问题。

`.push()` 方法

1const LEN = 3;
2const arr = [];
3for (let i=0; i < LEN; i++) {
4  arr.push(0);
5}
6assert.deepEqual(arr, [0, 0, 0]);

这一次,我们创建并填充了一个数组,同时里面没有出现漏洞。所以操作这个数组时应该比用构造函数创建的更快。不过 创建 数组的速度比较慢,因为引擎可能需要随着数组的增长多次重新分配连续的内存。

使用 `undefined` 填充数组

Array.from() 将 iterables 和类似数组的值转换为 Arrays ,它将空洞视为 undefined 元素。这样可以用它将每个空洞都转换为 undefined

1> Array.from({length: 3})
2[ undefined, undefined, undefined ]

参数 {length:3} 是一个长度为 3 的类似 Array 的对象,其中只包含空洞。也可以使用 new Array(3),但这样一般会创建更大的对象。 下面这种方式仅适用于可迭代的值,并且与 Array.from()具有类似的效果:

1> [...new Array(3)]
2[ undefined, undefined, undefined ]

不过 Array.from()通过 new Array() 创建它的结果,所以你得到的仍然是一个稀疏数组。

使用 `Array.from()` 进行映射

如果提供映射函数作为其第二个参数,则可以使用 Array.from() 进行映射。

用值填充数组

  • 使用小整数创建数组:
1> Array.from({length: 3}, () => 0)
2  [ 0, 0, 0 ]
  • 使用唯一(非共享的)对象创建数组:
1> Array.from({length: 3}, () => ({}))
2[ {}, {}, {} ]

按照数值范围进行创建

  • 用升序整数数列创建数组:
1> Array.from({length: 3}, (x, i) => i)
2[ 0, 1, 2 ]
  • 用任意范围的整数进行创建:
1  > const START=2, END=5;
2  > Array.from({length: END-START}, (x, i) => i+START)
3  [ 2, 3, 4 ]

另一种创建升序整数数组的方法是用 .keys(),它也将空洞看作是 undefined 元素:

1> [...new Array(3).keys()]
2[ 0, 1, 2 ]

.keys()返回一个可迭代的序列。我们将其展开并转换为数组。

备忘速查:创建数组

用空洞或 undefined填充:

  • new Array(3)[ , , ,]
  • Array.from({length: 2})[undefined, undefined]
  • […new Array(2)][undefined, undefined]

填充任意值:

  • const a=[]; for (let i=0; i&lt;3; i++) a.push(0);[0, 0, 0]
  • new Array(3).fill(0)[0, 0, 0]
  • Array.from({length: 3}, () =&gt; ({}))[{}, {}, {}] (唯一对象)

用整数范围填充:

  • Array.from({length: 3}, (x, i) =&gt; i)[0, 1, 2]
  • const START=2, END=5; Array.from({length: END-START}, (x, i) =&gt; i+START)[2, 3, 4]
  • […new Array(3).keys()][0, 1, 2]

推荐的模式

我更喜欢下面的方法。我的侧重点是可读性,而不是性能。

  • 你是否需要创建一个空的数组,以后将会完全填充? 1new Array(LEN)
  • 你需要创建一个用原始值初始化的数组吗? 1new Array(LEN).fill(0)
  • 你需要创建一个用对象初始化的数组吗? 1Array.from({length: LEN}, () => ({}))
  • 你需要创建一系列整数吗? 1Array.from({length: END-START}, (x, i) => i+START)

如果你正在处理整数或浮点数的数组,请考虑Typed Arrays —— 它就是为这个目的而设计的。它们不能存在空洞,并且总是用零进行初始化【http://exploringjs.com/es6/ch_typed-arrays.html】。

提示:一般来说数组的性能无关紧要

  • 对于大多数情况,我不会过分担心性能。即使是带空洞的数组也很快。使代码易于理解更有意义。
  • 另外引擎优化的方式和位置也会发生变化。今天最快的方案可能明天就不是了。

致谢

  • 感谢 Mathias Bynens 和 Benedikt Meurer 帮我了解 V8 的详细信息。

扩展阅读

  • Chapter “Typed Arrays” in “Exploring ES6”

【http://exploringjs.com/es6/ch_typed-arrays.html】

  • Sect. “ES6 and holes in Arrays” in “Exploring ES6”

【http://exploringjs.com/es6/ch_arrays.html#sec_array-holes】

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)

    博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)...

    Enjoy233
  • SpringBoot集成Thymeleaf模板引擎

    简单介绍 目前在JavaEE领域有几中比较常用的模板引擎,分别是Jsp、Velocity、Freemarker、Thymeleaf,对Freemark语法不是...

    用户1208223
  • 【前端】HTML属性

    属性规定元素的行内样式 属性将覆盖任何全局的样式设定,例如在 <style> 标签或在外部样式表中规定的样式。

    Gavin-ZYX
  • 【前端】初识HTML

    刚开始接触HTML的时候,对一些名词多少会有点疑问。在学习之前,不如先弄清楚它们是什么,以及他们之间的关系。

    Gavin-ZYX
  • editormd实现文章详情页面预览

    继之前博客写了editmd.js(国内开源的一款前端Markdown框架)实现的写文章功能之后,本博客介绍使用editormd实现文章预览功能

    用户1208223
  • 告别 hash 路由,迎接 history 路由

    在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~

    柳醉梦声
  • 【前端】HTML标签

    本文主要在初学HTML时,对常用标签做一些记录。主要是标签的使用,以及效果展示。目的在于有个大概的认识:有什么标签?能做什么?

    Gavin-ZYX
  • 2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案基础篇(项目功能演示--Wi-Fi )1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系

    这节演示 STM32采集的温湿度数据通过WIFI模块传给手机APP,APP上有个开关按钮,发指令给WIFI模块,然后发给STM32.

    杨奉武
  • 【前端】从0.1开始,创建第一个项目

    作为一名Android程序员,学习前端知识是很有必要的(近期任务较少,准备跟H5抢饭碗)。之前在上学的时候也学过一点,太久没用忘得差不多了。

    Gavin-ZYX
  • 网络通信

    1.他是一个网络通信的工具,调用操作系统内核 创建的时候,可以选择tcp通讯,“三次握手,四次挥手”,也可以选择udp通信,一次通信

    DC童生

扫码关注云+社区

领取腾讯云代金券