Heim > Artikel > Web-Frontend > Grundlagen von Array-Operationen in JavaScript

Grundlagen von Array-Operationen in JavaScript

小云云Original: 2017-12-18 16:10:001333Durchsuche

Dieser Artikel vermittelt Ihnen hauptsächlich die Grundlagen von Array-Operationen in JavaScript. Verwenden Sie nicht for_in, um das Array zu durchlaufen. Dies ist ein häufiges Missverständnis unter JavaScript-Anfängern. for_in wird zum Durchlaufen aller aufzählbaren (aufzählbaren) Schlüssel im Objekt einschließlich der Prototypenkette verwendet. Es existiert ursprünglich nicht zum Durchlaufen von Arrays.

Es gibt drei Probleme bei der Verwendung von for_in zum Durchlaufen eines Arrays:

Die Durchlaufreihenfolge ist nicht festgelegt

Die JavaScript-Engine garantiert nicht die Durchlaufreihenfolge von Objekten. Beim Durchlaufen eines Arrays als normales Objekt ist die Indexreihenfolge der Durchquerung ebenfalls nicht garantiert.

durchläuft die Werte in der Objektprototypkette.

Wenn Sie das Prototypobjekt des Arrays (z. B. Polyfill) ändern, ohne es auf <code>enumerable: falseenumerable: false, for_in wird diese Dinge durchlaufen.

Ineffizienter Betrieb.

Obwohl JavaScript theoretisch die Form von Objekten zum Speichern von Arrays verwendet, optimiert die JavaScript-Engine dennoch Arrays, ein sehr häufig verwendetes integriertes Objekt. https://jsperf.com/for-in-vs-...
Sie können sehen, dass die Verwendung von for_in zum Durchlaufen des Arrays mehr als 50-mal langsamer ist als die Verwendung von Indizes zum Durchlaufen des Arrays

PS: Möglicherweise suchen Sie nach for_of

Verwenden Sie kein JSON.parse(JSON.stringify()) Deep Copy Array

Jemand verwendet JSON. Eine mitteltiefe Kopie eines Objekts oder Arrays. Obwohl dies in den meisten Fällen eine einfache und bequeme Methode ist, kann sie auch unbekannte Fehler verursachen, da

einige spezifische Werte in nullnull

NaN, undefiniert, Infinity Diese Werte, die in JSON nicht unterstützt werden, werden bei der Serialisierung von JSON konvertiert null. Nach der Deserialisierung ist es natürlich null

und das Schlüssel-Wert-Paar mit undefiniertem Wert geht verloren

Schlüssel mit undefinierten Werten werden während der JSON-Serialisierung ignoriert und gehen nach der Deserialisierung verloren.

ersetzt Convert the Objekt in einen String

JSON unterstützt keine Objekttypen. Das Date-Objekt in JS wird durch Konvertierung in einen String im ISO8601-Format verarbeitet. Bei der Deserialisierung wird die Zeitformatzeichenfolge jedoch nicht in ein Datumsobjekt

konvertiert, was ineffizient ist.

als native Funktion, JSON.stringifyJSON.stringifyJSON.parse und JSON.parse

Die Geschwindigkeit der Verarbeitung von JSON-Strings allein ist sehr hoch. Es ist jedoch völlig unnötig, das Objekt in JSON zu serialisieren und wieder zu deserialisieren, um das Array tief zu kopieren.

Ich habe einige Zeit damit verbracht, eine einfache Deep-Copy-Funktion eines Arrays oder Objekts zu schreiben. Der Test ergab übrigens, dass die Ausführungsgeschwindigkeit fast sechsmal so hoch ist wie bei der Verwendung von JSON Unterstützt auch TypedArray und das Kopieren von RegExp-Objekten

https://jsperf.com/deep-clone...

Verwenden Sie nicht arr. find statt arr .someArray.prototype.find<code>Array.prototype.someArray.prototype.find ist eine neue Array-Suchfunktion in ES2015, die identisch ist mit

Array.prototype.someArray.prototype.find ist ähnlich, aber kein Ersatz für Letzteres. ifArray.prototype.find

Gibt den ersten qualifizierten Wert zurück. Verwenden Sie diesen Wert direkt als arr.find  ifarr.some Bestimmen Sie, ob er existiert. Was passiert, wenn dieser qualifizierte Wert zufällig 0 ist?

arr.find dient dazu, den Wert im Array zu finden und ihn dann weiterzuverarbeiten. Wird im Allgemeinen verwendet Objektarray; arr.some wird verwendet, um die Existenz der beiden zu überprüfen;

Verwenden Sie nicht arr.map anstelle von arr.forEach

ist auch ein Fehler, den JavaScript-Anfänger oft machen. Sie unterscheiden oft nicht zwischen <code>Array.prototype.mapDie eigentliche Bedeutung von Array.prototype.map und Array.prototype.forEachArray.prototype.forEach

mapKarte映射 Chinesisch heißt

Karte

forEach, Leiten Sie eine neue Sequenz ab, indem Sie nacheinander eine Funktion für eine Sequenz ausführen. Diese Funktion hat normalerweise keine Nebenwirkungen und verändert das ursprüngliche Array nicht (sog. reine Funktion). forEachforEachforEach Es gibt nicht viel zu sagen, es verarbeitet einfach alle Elemente im Array mit einer bestimmten Funktion. Da forEach

keinen Rückgabewert hat (undefiniert zurückgibt), enthält seine Rückruffunktion normalerweise Nebenwirkungen, andernfalls ist dies forEach map ist bedeutungslos. forEachIn der Tat ist mapmapmap besser als forEachforEach

ist leistungsfähiger, aber

`map`

erstellt ein neues Array und belegt Speicher. Wenn Sie nicht den Rückgabewert von

mapArray.prototype.forEach verwenden, sollten Sie forEach

verwenden. Code>

Ergänzung: forEach und break

ES6 Früher gab es zwei Hauptmethoden zum Durchlaufen von Arrays: handgeschriebene Schleifen mit Indizes zum Iterieren und mit return Array.prototype.forEachcontinue. Ersteres ist vielseitig und am effizientesten, aber das Schreiben ist umständlicher – es kann die Werte im Array nicht direkt abrufen. breakLetzteres gefällt dem Autor persönlich: Sie können den Index und den Wert der Iteration sowie den Funktionsstil direkt erhalten (beachten Sie, dass sich FP auf unveränderliche Datenstrukturen konzentriert und forEach von Natur aus a ist Es gibt einen Nebeneffekt, daher gibt es nur die Form von FP, aber keinen Gott. Es ist sehr erfrischend zu schreiben. Aber! Ich frage mich, ob einer von euch Schülern bemerkt hat: Sobald forEach einmal gestartet ist, kann es nicht mehr gestoppt werden. . . breakforEach akzeptiert eine Rückruffunktion. Sie können im Voraus

<pre class="brush:php;toolbar:false">&lt;span style=&quot;font-size: 14px;&quot;&gt;[1, 2, 3, 4, 5].forEach(x =&gt; {&lt;br&gt;  console.log(x);&lt;br&gt;  if (x === 3) {&lt;br&gt;    break;  // SyntaxError: Illegal break statement&lt;br&gt;  }&lt;br&gt;});&lt;br&gt;&lt;/span&gt;</pre>zurückkehren<p></p>

, was weiterscala. Aber Sie können nicht brechen
– weil es in der Rückruffunktion keine Schleife gibt, die Sie brechen: Grundlagen von Array-Operationen in JavaScript

Grundlagen von Array-Operationen in JavaScript

Es gibt noch Lösungen. Bei anderen funktionalen Programmiersprachen wie <code>arr.forEachscala sind ähnliche Probleme aufgetreten. Es bietet eine breakFunktionsunterbrechung , die dies tut Löst eine Ausnahme aus.

<span style="font-size: 14px;">try {<br>  [1, 2, 3, 4, 5].forEach(x => {<br>    console.log(x);<br>    if (x === 3) {<br>      throw 'break';<br>    }<br>  });<br>} catch (e) {<br>  if (e !== 'break') throw e; // 不要勿吞异常。。。<br>}<br></span>

<code>Array.prototype.someArray.prototype.forEachWir können diesem Ansatz folgen, um arr.forEach

sPausesome:trueEin widerliches Paar falsch. Es gibt andere Methoden, wie zum Beispiel die Verwendung von breakArray.prototype.some anstelle von

Array.prototype.forEach. Berücksichtigen Sie die Eigenschaften von Array.prototype.some, wenn <code>some einen qualifizierten Wert findet (Rückruf). die Funktion gibt true zurück, sie wird sofort die Schleife beenden. Diese Funktion kann verwendet werden, um Pause：

<span style="font-size: 14px;">[1, 2, 3, 4, 5].some(x => {<br>  console.log(x);<br>  if (x === 3) {<br>    return true; // break<br>  }<br>  // return undefined; 相当于 false<br>});<br></span>

some 的返回值被忽略掉了，它已经脱离了判断数组中是否有元素符合给出的条件这一原始的含义。

在 ES6 前，笔者主要使用该法（其实因为 Babel 代码膨胀的缘故，现在也偶尔使用），ES6 不一样了，我们有了 for...of。for...of 是真正的循环，可以 break：

<span style="font-size: 14px;">for (const x of [1, 2, 3, 4, 5]) {<br>  console.log(x);<br>  if (x === 3) {<br>    break;<br>  }<br>}<br></span>

但是有个问题，for...of 似乎拿不到循环的下标。其实 JavaScript 语言制定者想到了这个问题，可以如下解决：

<span style="font-size: 14px;">for (const [index, value] of [1, 2, 3, 4, 5].entries()) {<br>  console.log(`arr[${index}] = ${value}`);<br>}<br></span>

Array.prototype.entries

for...of 和 forEach 的性能测试：https://jsperf.com/array-fore... Chrome 中 for...of 要快一些哦

Das obige ist der detaillierte Inhalt vonGrundlagen von Array-Operationen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Die umfassendste Erklärung von JavaScript-ModulenNächster Artikel：Die umfassendste Erklärung von JavaScript-Modulen

In Verbindung stehende Artikel

Mehr sehen

Grundlagen von Array-Operationen in JavaScript

Verwenden Sie kein JSON.parse(JSON.stringify()) Deep Copy Array

https://jsperf.com/deep-clone...

Verwenden Sie nicht arr.map anstelle von arr.forEach

<span style="font-size: 14px;">map</span>

In Verbindung stehende Artikel

`<span style="font-size: 14px;">map</span>`