JavaScript中怎么创建和填充任意长度的数组

这篇文章主要介绍了JavaScript中怎么创建和填充任意长度的数组，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站建设、成都网站设计、田东网络推广、重庆小程序开发公司、田东网络营销、田东企业策划、田东品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供田东建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

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

const arr = [0,0,0];

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

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

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

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

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

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

不管是哪种情况，如果引擎遇到一个空洞，它不能只返回 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<3; i++) a.push(0);
→ [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]

JavaScript中怎么创建和填充任意长度的数组

创建数组

`Array` 构造函数

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

`.push()` 方法

使用 `undefined` 填充数组

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

用值填充数组

按照数值范围进行创建

备忘速查：创建数组

推荐的模式

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

其他资讯

JavaScript中怎么创建和填充任意长度的数组

创建数组

Array 构造函数

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

.push() 方法

使用 undefined 填充数组

使用 Array.from() 进行映射

用值填充数组

按照数值范围进行创建

备忘速查：创建数组

推荐的模式

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

其他资讯

`Array` 构造函数

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

`.push()` 方法

使用 `undefined` 填充数组

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