Heim > Web-Frontend > js-Tutorial > Die „Loch'-Wahrheit: Die spärlichen Arrays und unerwarteten Verhaltensweisen von JavaScript verstehen

Die „Loch'-Wahrheit: Die spärlichen Arrays und unerwarteten Verhaltensweisen von JavaScript verstehen

Barbara Streisand
Freigeben: 2025-01-13 08:45:43
Original
449 Leute haben es durchsucht

The

Ich habe kürzlich meine Fähigkeiten im Bereich Datenstrukturen und Algorithmen aufgefrischt, insbesondere Sortieralgorithmen; und ich befand mich in einer interessanten Situation.

Wie erstelle ich ein zufälliges Array mit Werten der Länge n, um meinen Sortieralgorithmus zu testen? Man könnte sagen, das ist einfach, und das ist es wirklich. In deinem Kopf ist dir wahrscheinlich so etwas eingefallen:

function randomArray(n) {
    const arrToReturn = [];

    for (let i = 0; i < n; i++) {
        arrToReturn.push(Math.floor(Math.random() * 10));
    }
    return arrToReturn;
}

Nach dem Login kopieren

Das funktioniert definitiv wie beabsichtigt. Aber ich suchte nach etwas viel einfacherem. Am besten ein Einzeiler. Nun, der erste Gedanke, der mir in den Sinn kam, war die Verwendung von new Array().

const randomArray = (n) => new Array(n).map(() => Math.floor(Math.random() * 10));

console.log(randomArray(5))
Nach dem Login kopieren

Was erwarten Sie, dass dies protokolliert wird?

Nun, ich hatte erwartet, dass dadurch ein Array von zufälligen 5 Werten protokolliert wird. Wenn nicht, dann Prost! Du weißt, was ich gleich besprechen werde :)

Zu meiner Überraschung ist das nicht der Fall. Dies wird in Knoten 20 protokolliert:
[ <5 leere Elemente> ]

Hmmm ... Rätselhaft!

Interessanterweise protokolliert console.log(randomArray(5).length) 5.

Also, warum passiert das? Lassen Sie uns über Sparse Arrays in Javascript sprechen!

Sparse-Arrays

Sparse-Arrays sind Arrays, die einen oder mehrere leere Slots enthalten. Zum Beispiel:

new Array(2)
// [<2 empty items>]

[1, , , 3]
// [1, <2 empty items>, 3]
Nach dem Login kopieren

Also, wie funktioniert das?

Nun, wenn Sie in JS mit new Array(5) ein Array erstellen, wird ein Array mit 5 nicht initialisierten Slots erstellt. Das bedeutet, dass sie nichts enthalten; nicht null, nicht undefiniert.

Okay, das verstehe ich! Aber können Sie .map nicht auf diesen „Slots“ aufrufen?

Nun, wenn Sie iterative Methoden wie forEach, Map, Reduce und Filter usw. in einem Array mit geringer Dichte aufrufen, werden diese leeren Slots übersprungen.

Schauen wir uns noch einmal unsere Funktion randomArray an.

const randomArray = (n) => new Array(n).map(() => Math.floor(Math.random() * 10));
Nach dem Login kopieren

Wir erstellen ein Array der Länge n mit new Array(n), das ein spärliches Array [<5 leere Elemente>] zurückgibt. Dann rufen wir Map für dieses Array auf. Da alle Slots leer sind, wurden sie alle übersprungen. Daher das Ergebnis, das wir erhalten haben!

Warum gibt der Aufruf von .length für ein Array mit geringer Dichte dann einen Wert zurück?

Dies liegt an der Art und Weise, wie die .length-Array-Methode in JS implementiert wird. Um den Längenwert zu erhalten, nehmen wir den größten Index und addieren einfach 1. Und da spärliche Arrays indiziert sind, erhalten wir den erwarteten Längenwert. Mehr können Sie hier lesen.

Lassen Sie uns unsere fehlerhafte randomArray-Funktion oben beheben

Da Sparse-Arrays leere oder nicht initialisierte Slots enthalten und daher nicht iterierbar sind, können wir dies beheben, indem wir diese Slots mit einigen Werten füllen. Dies können wir erreichen, indem wir die Array-Methode .fill verwenden:

const randomArray = (n) => new Array(n).fill().map(() => Math.floor(Math.random() * 10));

console.log(randomArray(5))
Nach dem Login kopieren

Und jetzt kann es losgehen!

Das obige ist der detaillierte Inhalt vonDie „Loch'-Wahrheit: Die spärlichen Arrays und unerwarteten Verhaltensweisen von JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage