Einführung in Methoden zum Erstellen und Füllen von Arrays beliebiger Länge in JavaScript (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die Methode zum Erstellen und Füllen von Arrays beliebiger Länge (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Der beste Weg, ein Array zu erstellen, ist wörtlich:

const arr = [0,0,0];

Aber das ist keine langfristige Lösung, etwa wenn wir ein großes Array erstellen müssen. In diesem Blogbeitrag wird untersucht, was in dieser Situation zu tun ist.

Arrays ohne Lücken weisen tendenziell eine bessere Leistung auf

In den meisten Programmiersprachen ist ein Array eine kontinuierliche Folge von Werten. In JavaScript ist ein Array ein Wörterbuch, das Indizes Elementen zuordnet. Es kann Löcher haben – Indizes zwischen Null und der Länge des Arrays, die keinen Elementen zugeordnet sind („fehlende Indizes“). Das folgende Array hat beispielsweise ein Loch an Index 1:

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

Ein Array ohne Löcher wird auch dicht oder gepackt genannt. Dichte Arrays weisen tendenziell eine bessere Leistung auf, da sie zusammenhängend (intern) gespeichert werden können. Sobald ein Loch auftritt, muss sich die interne Darstellung ändern. Wir haben zwei Möglichkeiten:

• Wörterbuch. Die Suche wird mehr Zeit in Anspruch nehmen und der Speicheraufwand wird größer sein.

• Kontinuierliche Datenstruktur zur Markierung von Löchern. Überprüfen Sie dann, ob es sich bei dem entsprechenden Wert um ein Loch handelt, was ebenfalls zusätzliche Zeit erfordert.

Wenn die Engine in beiden Fällen auf ein Loch stößt, kann sie nicht einfach zurückkehren undefined, sie muss die Prototypenkette durchlaufen und nach einer Eigenschaft namens „Lochindex“ suchen. , Das dauert länger.

Wenn Sie bei einigen Engines, wie z. B. V8, zu einer weniger leistungsstarken Datenstruktur wechseln, ist die Änderung dauerhaft. Selbst wenn alle Löcher gefüllt sind, wird nicht wieder zurückgeschaltet.

Weitere Informationen darüber, wie V8 Arrays darstellt, finden Sie im Artikel „Elementtypen in V8“ von Mathias Bynens.

Array erstellen

Array Konstruktor

Wenn Sie ein Array mit einer bestimmten Länge erstellen möchten, verwenden Sie häufig den Konstruktor 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), []);

Diese Methode ist sehr praktisch, hat aber zwei Nachteile:

• Selbst wenn Sie das Array später vollständig mit Werten füllen, wird das Array durch diese Lücke etwas anders . langsam.

• Der Standardwert eines Lochs ist im Allgemeinen nicht der anfängliche „Wert“ des Elements. Ein üblicher Standardwert ist Null.

Fügen Sie die Methode Array nach dem Konstruktor .fill() hinzu. Die Methode

.fill() ändert das aktuelle Array und füllt es mit dem angegebenen Wert. Dies hilft bei der Initialisierung eines Arrays nach der Erstellung mit new Array():

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

Warnung: Wenn Sie ein Objekt als Argument an ein Array übergeben, verweisen alle Elemente auf dieselbe Instanz (das Das heißt, dieses Objekt wurde nicht mehrfach geklont): .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} ]);

Eine Füllmethode (

), auf die wir später noch stoßen werden, hat dieses Problem nicht. Array.from()

Methode .push()

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

Dieses Mal erstellen und füllen wir ein Array ohne Löcher darin. Daher sollte die Bearbeitung dieses Arrays schneller sein als die Erstellung mit dem Konstruktor. Das

Erstellen von Arrays ist jedoch langsamer, da die Engine zusammenhängenden Speicher möglicherweise mehrmals neu zuweisen muss, wenn das Array wächst.

Füllen Sie ein Array mit

undefined

Konvertieren Sie iterierbare Werte und Array-ähnliche Werte in Arrays , wodurch Löcher als Array.from()-Elemente behandelt werden. Dies kann verwendet werden, um jedes Loch in ein undefined umzuwandeln: undefined

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

Der Parameter

ist ein Array-ähnliches Objekt der Länge 3, das nur Löcher enthält. Sie können auch {length：3} verwenden, aber dadurch wird im Allgemeinen ein größeres Objekt erstellt. new Array(3)Das Folgende funktioniert nur mit iterierbaren Werten und hat einen ähnlichen Effekt wie
: Array.from()

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

Allerdings erstellt

sein Ergebnis über Array.from(), sodass Sie immer noch ein spärliches Array erhalten. new Array()

Verwenden Sie

für die Zuordnung. Array.from()

Wenn eine Zuordnungsfunktion als zweites Argument bereitgestellt wird, können Sie

für die Zuordnung verwenden. Array.from()

Füllen Sie das Array mit Werten

• Erstellen Sie ein Array mit kleinen Ganzzahlen:

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

• Erstellen Sie es mit einem eindeutigen (nicht- shared) Objekt-Array:

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

Erstellen Sie entsprechend dem numerischen Bereich

• Erstellen Sie ein Array mit einem aufsteigenden Ganzzahl-Array:

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

• Erstellen Sie mit einem beliebigen Bereich von Ganzzahlen:

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

Eine andere Möglichkeit, ein aufsteigendes Array von Ganzzahlen zu erstellen, ist mit

, das Löcher ebenfalls als Elemente: .keys()

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

undefinedGibt eine iterierbare Sequenz zurück. Wir erweitern es und konvertieren es in ein Array.

.keys() Kurzer Spickzettel: Erstellen Sie ein Array

gefüllt mit Löchern oder

:

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]

推荐的模式

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

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

  new Array(LEN)

• 你需要创建一个用原始值初始化的数组吗？

  new Array(LEN).fill(0)

• 你需要创建一个用对象初始化的数组吗？

  Array.from({length: LEN}, () => ({}))

• 你需要创建一系列整数吗？

  Array.from({length: END-START}, (x, i) => i+START)

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

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

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

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

Das obige ist der detaillierte Inhalt vonEinführung in Methoden zum Erstellen und Füllen von Arrays beliebiger Länge in JavaScript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!