首页 > web前端 > js教程 > 正文

JavaScript中创建和填充任意长度的数组方法介绍(附代码)

不言
发布: 2019-02-25 10:18:53
转载
14383人浏览过

本篇文章给大家带来的内容是关于JavaScript中创建和填充任意长度的数组方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

const arr = [0,0,0];
登录后复制

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

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

在大多数编程语言中,数组是连续的值序列。在 JavaScript 中,Array 是一个将索引映射到元素的字典。它可以存在空洞(holes) —— 零和数组长度之间的索引没有映射到元素(“缺失索引”)。例如,下面的 Array 在索引 1 处有一个空洞:

> Object.keys(['a',, 'c'])
[ '0', '2' ]
登录后复制

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

  • 字典。查找时会消耗更多时间,而且存储开销更大。

    立即学习Java免费学习笔记(深入)”;

  • 连续的数据结构,对空洞进行标记。然后检查对应的值是否是一个空洞,这也需要额外的时间。

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

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

关于 V8 是如何表示数组的,请参阅Mathias Bynens的文章“V8中的元素类型”。

创建数组

Array 构造函数

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

const LEN = 3;
const arr = new Array(LEN);
assert.equal(arr.length, LEN);
// arr only has holes in it
assert.deepEqual(Object.keys(arr), []);
登录后复制

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

  • 即便你稍后再用值把数组完全填满,这种空洞也会使这个 Array 略微变慢。

  • 空洞的默认值一般不会是元素的初始“值”。常见的默认值是零。

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

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

const LEN = 3;
const arr = new Array(LEN).fill(0);
assert.deepEqual(arr, [0, 0, 0]);
登录后复制

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

const LEN = 3;
const obj = {};

const arr = new Array(LEN).fill(obj);
assert.deepEqual(arr, [{}, {}, {}]);

obj.prop = true;
assert.deepEqual(arr,
  [ {prop:true}, {prop:true}, {prop:true} ]);
登录后复制

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

.push() 方法

const LEN = 3;
const arr = [];
for (let i=0; i < LEN; i++) {
  arr.push(0);
}
assert.deepEqual(arr, [0, 0, 0]);
登录后复制

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

使用 undefined 填充数组

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

> Array.from({length: 3})
[ undefined, undefined, undefined ]
登录后复制

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

> [...new Array(3)]
[ undefined, undefined, undefined ]
登录后复制

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

使用  Array.from()  进行映射

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

用值填充数组

  • 使用小整数创建数组:

    > Array.from({length: 3}, () => 0)
    [ 0, 0, 0 ]
    登录后复制
  • 使用唯一(非共享的)对象创建数组:

    > Array.from({length: 3}, () => ({}))
    [ {}, {}, {} ]
    登录后复制

按照数值范围进行创建

  • 用升序整数数列创建数组:

    > Array.from({length: 3}, (x, i) => i)
    [ 0, 1, 2 ]
    登录后复制
  • 用任意范围的整数进行创建:

    > const START=2, END=5;
    > Array.from({length: END-START}, (x, i) => i+START)
    [ 2, 3, 4 ]
    登录后复制

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

> [...new Array(3).keys()]
[ 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→ [0, 0, 0]

  • new Array(3).fill(0)
    → [0, 0, 0]

  • Array.from({length: 3}, () => ({}))
    → [{}, {}, {}] (唯一对象)

用整数范围填充:

  • Array.from({length: 3}, (x, i) => i)
    → [0, 1, 2]

  • const START=2, END=5; Array.from({length: END-START}, (x, i) => i+START)
    → [2, 3, 4]

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

推荐的模式

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

  • 你是否需要创建一个空的数组,以后将会完全填充?

    new Array(LEN)
    登录后复制
  • 你需要创建一个用原始值初始化的数组吗?

    new Array(LEN).fill(0)
    登录后复制
  • 你需要创建一个用对象初始化的数组吗?

    Array.from({length: LEN}, () => ({}))
    登录后复制
  • 你需要创建一系列整数吗?

    Array.from({length: END-START}, (x, i) => i+START)
    登录后复制

如果你正在处理整数或浮点数的数组,请考虑Typed Arrays —— 它就是为这个目的而设计的。它们不能存在空洞,并且总是用零进行初始化。

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

  • 对于大多数情况,我不会过分担心性能。即使是带空洞的数组也很快。使代码易于理解更有意义。

  • 另外引擎优化的方式和位置也会发生变化。今天最快的方案可能明天就不是了。

以上就是JavaScript中创建和填充任意长度的数组方法介绍(附代码)的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号