Heim >Web-Frontend >js-Tutorial >Grundlagen von Array-Operationen in JavaScript

Grundlagen von Array-Operationen in JavaScript

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

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:

  1. 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.

  1. durchläuft die Werte in der Objektprototypkette.

Wenn Sie das Prototypobjekt des Arrays (z. B. Polyfill) ändern, ohne es auf <code><span style="font-size: 14px;">enumerable: false</span>enumerable: false, for_in wird diese Dinge durchlaufen.

  1. 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

  1. einige spezifische Werte in <span style="font-size: 14px;">null</span>null

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

  1. 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.

  1. 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

  1. konvertiert, was ineffizient ist.

als native Funktion, <span style="font-size: 14px;">JSON.stringify</span><span style="font-size: 14px;">JSON.stringify</span><span style="font-size: 14px;">JSON.parse</span> 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 .some<span style="font-size: 14px;">Array.prototype.find</span><code><span style="font-size: 14px;">Array.prototype.some</span>Array.prototype.find ist eine neue Array-Suchfunktion in ES2015, die identisch ist mit

Array.prototype.some<span style="font-size: 14px;">Array.prototype.find</span>

ist ähnlich, aber kein Ersatz für Letzteres. <span style="font-size: 14px;">if</span>Array.prototype.find

Gibt den ersten qualifizierten Wert zurück. Verwenden Sie diesen Wert direkt als <span style="font-size: 14px;">arr.find</span> <span style="font-size: 14px;"> if</span><span style="font-size: 14px;">arr.some</span> 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><span style="font-size: 14px;">Array.prototype.map</span>Die eigentliche Bedeutung von Array.prototype.map und <span style="font-size: 14px;">Array.prototype.forEach</span><span style="font-size: 14px;">Array.prototype.forEach</span>

.

<span style="font-size: 14px;">map</span>Karte<span style="font-size: 14px;">映射</span> Chinesisch heißt

Karte

<span style="font-size: 14px;">forEach</span>, 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). <span style="font-size: 14px;">forEach</span><span style="font-size: 14px;">forEach</span><span style="font-size: 14px;">forEach</span> 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 <span style="font-size: 14px;">map</span> ist bedeutungslos. <span style="font-size: 14px;">forEach</span>In der Tat ist <span style="font-size: 14px;">map</span><span style="font-size: 14px;">map</span><span style="font-size: 14px;">map</span> besser als forEach<span style="font-size: 14px;">forEach</span>

ist leistungsfähiger, aber

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

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

<span style="font-size: 14px;">map</span><span style="font-size: 14px;">Array.prototype.forEach</span> 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 <span style="font-size: 14px;">return</span> <span style="font-size: 14px;">Array.prototype.forEach</span><span style="font-size: 14px;">continue</span>. Ersteres ist vielseitig und am effizientesten, aber das Schreiben ist umständlicher – es kann die Werte im Array nicht direkt abrufen. <span style="font-size: 14px;">break</span>Letzteres 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. . . <span style="font-size: 14px;">break</span>forEach 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 weiter<span style="font-size: 14px;">scala</span>. Aber Sie können nicht brechen
– weil es in der Rückruffunktion keine Schleife gibt, die Sie <p>brechen</p>: Grundlagen von Array-Operationen in JavaScript

Es gibt noch Lösungen. Bei anderen funktionalen Programmiersprachen wie <code><span style="font-size: 14px;">arr.forEach</span>scala sind ähnliche Probleme aufgetreten. Es bietet eine <span style="font-size: 14px;">break</span>Funktionsunterbrechung , 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><span style="font-size: 14px;">Array.prototype.some</span><span style="font-size: 14px;">Array.prototype.forEach</span>Wir können diesem Ansatz folgen, um arr.forEach

sPause<span style="font-size: 14px;">some</span>:<span style="font-size: 14px;">true</span>Ein widerliches Paar falsch. Es gibt andere Methoden, wie zum Beispiel die Verwendung von <span style="font-size: 14px;">break</span>Array.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>

<span style="font-size: 14px;">some</span> 的返回值被忽略掉了,它已经脱离了判断数组中是否有元素符合给出的条件这一原始的含义。

在 ES6 前,笔者主要使用该法(其实因为 Babel 代码膨胀的缘故,现在也偶尔使用),ES6 不一样了,我们有了 for...of。<span style="font-size: 14px;">for...of</span> 是真正的循环,可以 <span style="font-size: 14px;">break</span>

<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>

但是有个问题,<span style="font-size: 14px;">for...of</span> 似乎拿不到循环的下标。其实 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

<span style="font-size: 14px;">for...of</span><span style="font-size: 14px;">forEach</span> 的性能测试:https://jsperf.com/array-fore... Chrome 中 <span style="font-size: 14px;">for...of</span> 要快一些哦

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