JavaScript で任意の長さの配列を作成して埋める方法の紹介 (コード付き)

この記事では、JavaScript で任意の長さの配列を作成して埋める方法を紹介します。必要な方は参考にしていただければ幸いです。

配列を作成する最良の方法は、文字通りの手段を使用することです:

const arr = [0,0,0];

しかし、これは、大規模な配列を作成する必要がある場合など、長期的な解決策ではありません。このブログ投稿では、この状況で何をすべきかを検討します。

穴のない配列はパフォーマンスが向上する傾向があります

ほとんどのプログラミング言語では、配列は値の連続したシーケンスです。 JavaScript では、配列はインデックスを要素にマップする辞書です。 holes - 要素にマップされていない、ゼロから配列の長さまでのインデックス (「インデックスの欠落」) が含まれる場合があります。たとえば、次の配列にはインデックス 1 に穴があります:

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

穴のない配列は、dense または packed とも呼ばれます。高密度配列は連続して (内部に) 保存できるため、パフォーマンスが向上する傾向があります。ホールが発生すると、内部表現が変更される必要があります。オプションは 2 つあります:

• Dictionary。検索にはさらに時間がかかり、ストレージのオーバーヘッドが大きくなります。

• #ホールをマークするための連続データ構造。次に、対応する値がホールであるかどうかを確認します。これにも追加の時間がかかります。

どちらの場合でも、エンジンがホールに遭遇した場合、単に

unknown を返すことはできず、プロトタイプ チェーンを横断して、という名前のホール インデックスを検索する必要があります。 」プロパティの場合、さらに時間がかかります。

V8 などの一部のエンジンでは、パフォーマンスの低いデータ構造に切り替えると、その変更は永続的になります。たとえすべての穴が埋まっても、再び元に戻ることはありません。

V8 が配列を表現する方法の詳細については、Mathias Bynens の記事「V8 の要素タイプ」を参照してください。

配列の作成

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), []);

このメソッドは非常に便利ですが、2 つの欠点があります:

• 後で配列に値を完全に埋めたとしても、これはメソッドホールにより、この配列もわずかに遅くなります。

• ホールのデフォルト値は、通常、要素の初期「値」ではありません。一般的なデフォルト値はゼロです。

Array コンストラクター ## の後に .fill() メソッド

.fill()# を追加します。メソッドは現在の配列を変更し、指定された値を入力します。これは、new Array() で配列を作成した後に初期化するのに役立ちます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const LEN = 3; const arr = new Array(LEN).fill(0); assert.deepEqual(arr, [0, 0, 0]);</pre><div class="contentsignin">ログイン後にコピー</div></div>

警告:

オブジェクトをパラメータとして使用して を埋める場合。 () 配列。すべての要素は同じインスタンスを参照します (つまり、このオブジェクトは複数回複製されていません): <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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} ]);</pre><div class="contentsignin">ログイン後にコピー</div></div>後で説明する充填メソッド (

Array. from()

) にはこの問題はありません。

.push()

メソッド <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const LEN = 3; const arr = []; for (let i=0; i &lt; LEN; i++) { arr.push(0); } assert.deepEqual(arr, [0, 0, 0]);</pre><div class="contentsignin">ログイン後にコピー</div></div>今回は、穴のな​​い配列を作成して埋めました。したがって、この配列の操作は、コンストラクターを使用して作成するよりも高速になるはずです。ただし、配列が大きくなるにつれてエンジンは連続したメモリを複数回再割り当てする必要があるため、

配列の作成は遅くなります。

配列に 未定義

を入力します

Array.from()

イテラブルと配列のような値を配列に変換し、ホールを次のように扱います

未定義要素。このようにして、これを使用して各ホールを 未定義に変換できます。

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

パラメータ {長さ: 3} は、長さが次の配列のようなオブジェクトです。 3、穴だけが含まれています。

new Array(3) を使用することもできますが、これにより通常はより大きなオブジェクトが作成されます。 次のメソッドは反復可能な値にのみ適用され、Array.from() と同様の効果があります:

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

But Array.from()Createその結果は

new Array() を介して取得されるため、得られるものは依然としてスパース配列です。 マッピングには Array.from()

を使用します。

2 番目のパラメーターとしてマッピング関数を指定する場合は、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()
を使用することです。これも空に見えます。 操作は

未定義

です。 要素: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&gt; [...new Array(3).keys()] [ 0, 1, 2 ]</pre><div class="contentsignin">ログイン後にコピー</div></div>.keys()反復可能なシーケンスを返します。それを展開して配列に変換します。

簡単なメモ: 配列を作成します穴で埋めるか、

未定義

:

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]

推荐的模式

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

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

  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 中国語 Web サイトの他の関連記事を参照してください。