JavaScript에서 임의 길이의 배열을 만들고 채우는 방법 소개(코드 포함)-JS 튜토리얼-php.cn

이 글은 자바스크립트에서 임의 길이의 배열을 생성하고 채우는 방법을 소개합니다.(코드 포함) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

배열을 만드는 가장 좋은 방법은 말 그대로

const arr = [0,0,0];

로그인 후 복사

입니다. 하지만 이는 대규모 배열을 만들어야 하는 경우와 같은 장기적인 솔루션이 아닙니다. 이 블로그 게시물에서는 이러한 상황에서 수행할 작업을 살펴봅니다.

구멍이 없는 배열은 더 나은 성능을 발휘하는 경향이 있습니다.

대부분의 프로그래밍 언어에서 배열은 연속적인 값 시퀀스입니다. JavaScript에서 배열은 인덱스를 요소에 매핑하는 사전입니다. holes - 0과 요소에 매핑되지 않은 배열 길이 사이의 인덱스("누락된 인덱스")를 가질 수 있습니다. 예를 들어 다음 배열에는 인덱스 1에 구멍이 있습니다.

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

로그인 후 복사

구멍이 없는 배열을 dense 또는 packed라고도 합니다. 조밀한 배열은 연속적으로(내부적으로) 저장할 수 있기 때문에 성능이 더 좋은 경향이 있습니다. 구멍이 발생하면 내부 표현이 변경되어야 합니다.

사전의 두 가지 옵션이 있습니다. 검색에는 더 많은 시간이 걸리고 스토리지 오버헤드도 더 커집니다.
구멍을 표시하는 연속 데이터 구조입니다. 그런 다음 해당 값이 추가 시간이 필요한 구멍인지 확인하십시오.

두 경우 모두 엔진이 구멍을 발견하면 undefine을 반환할 수 없으며 프로토타입 체인을 순회하고 "hole index"라는 속성을 검색해야 합니다. 더 많은 시간. 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)
→ [ , , ,]
V8과 같은 일부 엔진에서는 성능이 떨어지는 데이터 구조로 전환하면 변경 사항이 영구적으로 적용됩니다. 구멍이 모두 채워져도 다시 전환되지 않습니다. 🎜🎜V8이 배열을 나타내는 방법에 대한 자세한 내용은 Mathias Bynens의 기사 "V8의 요소 유형"을 참조하세요. 🎜
배열 생성

배열 생성자
🎜주어진 길이의 배열을 생성하려는 경우 일반적인 방법은 Array 생성자: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Array(LEN)</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜이 방법은 매우 편리하지만 두 가지 단점이 있습니다. 🎜🎜🎜🎜나중에 배열을 값으로 완전히 채우더라도 이 구멍으로 인해 이 Array가 약간 느려집니다. 🎜🎜🎜🎜구멍의 기본값은 일반적으로 요소의 초기 "값"이 아닙니다. 일반적인 기본값은 0입니다. 🎜🎜🎜<h3> <code>배열 생성자 뒤에 .fill() 메서드를 추가하세요.🎜.fill() 메서드가 변경됩니다. 현재 배열을 지정하고 지정된 값으로 채웁니다. 이는 new Array()를 사용하여 배열을 만든 후 초기화하는 데 도움이 됩니다. 🎜
```
new Array(LEN).fill(0)
```
로그인 후 복사
로그인 후 복사
🎜경고: 객체를 .fill( ) 배열, 모든 요소는 동일한 인스턴스를 참조합니다(즉, 이 객체는 여러 번 복제되지 않습니다): 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Array.from({length: LEN}, () => ({}))</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜나중에 접하게 될 채우기 방법( <code>Array.from() )에는 이 문제가 없습니다. 🎜
.push() 메서드
```
Array.from({length: END-START}, (x, i) => i+START)
```
로그인 후 복사
로그인 후 복사
🎜 이번에는 구멍 없이 배열을 만들고 채웠습니다. 따라서 이 배열을 조작하는 것은 생성자를 사용하여 생성하는 것보다 더 빠릅니다. 그러나 배열이 커짐에 따라 엔진이 연속 메모리를 여러 번 재할당해야 할 수 있으므로 배열을 🎜만들기🎜하는 것은 더 느립니다. 🎜
정의되지 않은
으로 배열 채우기 🎜Array.from() 반복 가능 항목과 유사 배열 값을 배열로 변환하여 구멍을 로 처리 >정의되지 않음 요소. 이는 각 구멍을 정의되지 않은으로 변환하는 데 사용할 수 있습니다. 🎜rrreee🎜매개변수 {length: 3}는 Hollow만 포함하는 길이 3의 배열과 유사한 객체입니다. new Array(3)를 사용할 수도 있지만 일반적으로 이렇게 하면 더 큰 객체가 생성됩니다.
다음 메서드는 반복 가능한 값에만 적용되며 Array.from()과 비슷한 효과가 있습니다. 🎜rrreee🎜그러나 Array.from()Create new Array() 를 통한 결과이므로 얻는 것은 여전히 희소 배열입니다. 🎜
매핑에 Array.from() 사용
🎜두 번째 매개변수로 매핑 함수를 제공하는 경우 Array.from()을 사용할 수 있습니다. 매핑을 수행합니다. 🎜
값으로 배열 채우기
🎜🎜🎜작은 정수를 사용하여 배열 만들기: 🎜rrreee🎜🎜🎜고유한(비공유) 객체를 사용하여 배열 만들기: 🎜rrreee🎜🎜
다음을 기반으로 만들기 값 범위🎜🎜🎜오름차순 정수로 배열 만들기: 🎜rrreee🎜🎜🎜임의의 정수 범위로 만들기: 🎜rrreee🎜🎜🎜오름차순 정수 배열을 만드는 또 다른 방법은 다음과 같습니다. 홀을 정의되지 않은 요소로 처리하는 .keys()를 사용하세요. 🎜rrreee🎜.keys() 반복 가능한 시퀀스를 반환합니다. 이를 확장하고 배열로 변환합니다. 🎜
빠른 메모: 배열 만들기
🎜구멍으로 채우기 또는 정의되지 않음: 🎜🎜🎜🎜새 배열(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]