Detaillierte Erläuterung der JavaScript-Arrays und Schleifen_Javascript-Fähigkeiten-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Detaillierte Erläuterung der JavaScript-Arrays und Schleifen_Javascript-Fähigkeiten

May 16, 2016 pm 04:02 PM

javascript 循环数组

Ein Array ist eine geordnete Kombination von Elementen. In JavaScript können Arrays mithilfe der formalen Objektnotation erstellt oder mithilfe der Literalnotation initialisiert werden.

Code kopieren Der Code lautet wie folgt:

var arrObject = new Array("val1", "val2"); // Array als Objekt

var arrLiteral = ["val1", "val2"]; // Array-Literal

Für Entwickler gibt es keinen Unterschied: Eine Array-Methode kann sowohl für Literale als auch für Objekte aufgerufen werden. Für die JavaScript-Engine muss ein Array-Literal bei jedem Zugriff neu interpretiert werden, insbesondere wenn es innerhalb einer Funktion verwendet wird.

Verwenden Sie den neuen Operator, um ein neues Array-Objekt zu erstellen:

Code kopieren Der Code lautet wie folgt:

var arrObject = new Array();

Sie können auch ein neues Array mit bestimmten Werten erstellen:

Code kopieren Der Code lautet wie folgt:

var arrObject = new Array("val1", "val2");

Arrays in JavaScript werden ab 0 indiziert, was bedeutet, dass der Index des ersten Elements 0 ist und das letzte Element die Länge des Arrays minus 1 hat.

1. Durchlaufen Sie das Array

Problem: Sie möchten problemlos auf alle Elemente eines Arrays zugreifen.

Lösung:

Um auf ein Array zuzugreifen, verwendet man am häufigsten eine for-Schleife:

Code kopieren Der Code lautet wie folgt:

<script type="text/javascript">

var Animals = new Array("cat", "dog", "whale", "seal");

var animalString = "";

for (var i = 0; i < Animals.length - 1; i ) {

animalString = Animals[i] " ";

}

alarm(animalString);

</script>

Diskussion:

Mit der for-Schleife kann auf jedes Element des Arrays zugegriffen werden. Das Array beginnt bei 0 und die Länge der Array-Eigenschaft wird verwendet, um das Ende der Schleife festzulegen.

2. Werte in der Reihenfolge speichern und abrufen

Problem: Sie möchten Werte so speichern, dass auf sie nacheinander zugegriffen werden kann, so wie sie gespeichert sind

Lösung:

Um Werte in der Reihenfolge ihres Eingangs zu speichern und darauf zuzugreifen, erstellen Sie eine First-In-First-Out-Warteschlange (FIFO). Verwenden Sie die Push-Methode des JavaScript-Array-Objekts, um Elemente zur Warteschlange hinzuzufügen, und verwenden Sie die Umschalttaste, um die Elemente abzurufen:

Code kopieren Der Code lautet wie folgt:

Queue.push("first");
Queue.push("second");
Queue.push("third");

// Zwei Einträge erhalten

alarm(queue.shift());
alarm(queue.shift());
Warnung(Warteschlange);
</script>

Diskussion:

Die Array-Push-Methode erstellt ein neues Array-Element und fügt es am Ende des Arrays hinzu:

Code kopieren Der Code lautet wie folgt:

queue.push("first");

Jedes Mal, wenn ein Element verschoben wird, wird die Anzahl der Array-Elemente erhöht.
Die Array-Shift-Methode extrahiert ein Array-Element vom Anfang des Arrays, löscht es aus dem Array und gibt das Element zurück:

Code kopieren Der Code lautet wie folgt:

var elem = queue.shift();

Für jedes Element der Schiebeoperation wird das Array-Element dekrementiert, da die Verschiebung nicht nur das Element zurückgibt, sondern auch das Array ändert.

3. Werte in umgekehrter Reihenfolge speichern und abrufen

Problem: Ich möchte Werte so speichern, dass auf die Werte in umgekehrter Reihenfolge zugegriffen wird und zuerst auf den zuletzt gespeicherten Wert zugegriffen wird. Dies ist ein LIFO-Stack (Last-In-First-Out).

Lösung:

Um Werte in umgekehrter Reihenfolge zu speichern, erstellen Sie einen LIFO-Stack. Verwenden Sie die Push-Methode des JavaScript-Array-Objekts, um Elemente zum Stapel hinzuzufügen, und die Pop-Methode, um Elemente abzurufen:

Code kopieren Der Code lautet wie folgt:

// 3 Elemente drücken
stack.push("first");
stack.push("second");
stack.push("third");

// Zwei Elemente anzeigen
alarm(stack.pop()); // Das dritte Element zurückgeben
alarm(stack.pop()); // Das zweite Element zurückgeben
alert(stack); // Das erste Element zurückgeben
</script>

Diskussion:

Der Stapel ist ebenfalls ein Array, bei dem sich jedes neu hinzugefügte Element oben im Stapel befindet und in der Reihenfolge „Last-in-first-out“ abgerufen wird.

Die Array-Push-Methode erstellt ein neues Element und fügt es am Ende des Arrays hinzu:

Code kopieren Der Code lautet wie folgt:

stack.push("first");

Jedes Mal, wenn ein Element verschoben wird, wird die Anzahl der Array-Elemente erhöht.

Die Array-Pop-Methode extrahiert ein Array-Element aus dem Ende des Arrays, entfernt es aus dem Array und gibt das Element zurück:

Code kopieren Der Code lautet wie folgt:

var elem = stack.pop();

Jedes Mal, wenn ein Element entfernt wird, wird die Anzahl der Array-Elemente verringert, da durch das Entfernen auch das Array geändert wird.

4. Suchen Sie im Array

Frage: Ich möchte nach einem bestimmten Wert in einem Array suchen und, falls gefunden, den Index des Array-Elements erhalten.

Lösung:

Verwenden Sie die neuen (ECMAScript 5) Array-Objektmethoden indeOf und lastIndexOf:

Code kopieren Der Code lautet wie folgt:

<script type="text/javascript">

var Animals = new Array("Hund", "Katze", "Robbe", "Elefant", "Löwe");

Alert(animals.indexOf("elephant")); // 3 ausdrucken

Alert(animals.indexOf("seal", 2)); // 2
 ausdrucken
</script>

Obwohl Browser manchmal sowohl indexOf als auch lastIndexOf unterstützen, ist dies nur in der ECMAScript 5-Version formalisiert. Beide Methoden akzeptieren einen Suchwert, der dann mit jedem Element im Array verglichen wird. Wenn der Wert gefunden wird, geben beide Methoden einen Index in das Array-Element zurück. Wenn kein Wert gefunden wird, wird -1 zurückgegeben. indexOf gibt das erste gefundene Element zurück und lastIndexOf gibt das letzte gefundene Element zurück.

Siehe:

Nicht alle Browser unterstützen indexOf und lastindexOf. Die Lösung für diese Funktion:

Code kopieren Der Code lautet wie folgt:

            if (from < 0) {
                from = len;
            }

            für (; von < len; von ) {
                if (from in this && this[from] === elt) {
                    Rückkehr von;
                }
            }

            return -1;
        }
    }
</script>

5、对每个数字元素应用一个函数

　　问题：想要使用一个函数来检查一个数组值,如果满足给定的条件，就替换它.

　　解决方案：

　　使用新的ECMAScript 5 Array对象的forEach方法,来针对每个数组元素都绑定一个回调函数:

复制代码代码如下:

    var charSets = new Array("ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab");
    //对每个数组元素应用函数
    charSets.forEach(replaceElement)
    alarm(charSets); // 打印出**,bb,cd,**,cc,**,dd,**
</script>

讨论：

　　forEach方法接受一个参数,这个参数是个函数.该函数自身有3个参数:数组元素，元素的索引和数组.

　　参见：

　　大多数浏览器都支支持forEach.然而,对于那些不支持的浏览器,可以以使用Array.prototype属性来模拟forEach行为.

复制代码代码如下:

            var thisp = arguments[1];
            für (var i = 0; i < len; i ) {
                wenn (ich dabei) {
                    fun.call(thisp, this[i], i, this);
                }
            }
        };
    }
</script>

6. Erstellen Sie ein gefiltertes Array

Frage: Ich möchte die Werte von Elementen in einem Array filtern und die Ergebnisse einem neuen Array zuweisen.

Lösung:

Verwenden Sie die Filtermethode des Array-Objekts:

Code kopieren Der Code lautet wie folgt:

<script type="text/javascript">

Funktion removeChars(element, index, array) {

          Rückgabeelement !== "**";

}

var charSets = new Array("**", "bb", "cd", "**", "cc", "**", "dd", "**");

var newArray = charSets.filter(removeChars);

Alert(newArray); // bb,cd,cc,dd

</script>

Diskussion:

Die Filtermethode ist eine neu hinzugefügte Methode in ECMAScript 5, die eine Rückruffunktion auf jedes Array-Element anwendet. Die als Parameter an die Filtermethode übergebene Funktion gibt basierend auf dem Testergebnis des Array-Elements einen booleschen Wert (wahr oder falsch) zurück. Dieser Rückgabewert bestimmt, ob das Array-Element einem neuen Array hinzugefügt wird. Wenn die Funktion „true“ zurückgibt, wird es andernfalls nicht hinzugefügt.

Siehe:

Zur Simulationsimplementierung von Browsern, die die Filtermethode nicht unterstützen:

Code kopieren Der Code lautet wie folgt:

return res;

};
}
</script>

7. Überprüfen Sie den Array-Inhalt

Problem: Sie möchten sicherstellen, dass ein Array eine bestimmte Bedingung erfüllt.

Lösung:

Verwenden Sie die Methode every des Array-Objekts, um jedes Element der angegebenen Bedingung zu überprüfen.

Code kopieren Der Code lautet wie folgt:

Die every- und some-Methoden des Array-Objekts sind beide die neuesten ECMAScript 5-Array-Methoden. Der Unterschied besteht darin, dass bei Verwendung der every-Methode die Verarbeitung beendet wird und die Methode false zurückgibt . Die some-Methode testet weiterhin jedes Array-Element, bis die Rückruffunktion „true“ zurückgibt. Zu diesem Zeitpunkt werden andere Elemente nicht mehr überprüft und diese Methode gibt true zurück. Wenn die Rückruffunktion alle Elemente testet und zu keinem Zeitpunkt „true“ zurückgibt, gibt eine Methode „false“ zurück.

Siehe:

Implementierungsmethode für Browser, die nicht alle unterstützen:

Code kopieren Der Code lautet wie folgt:

für (; i < len; i ) {
Wenn (ich in diesem
&& fun.call(thisp, val, i, this)) {
Gibt true zurück
}
}

gibt false zurück;

};
}

if (!Array.prototype.every) {

         Array.prototype.every = function (fun/*, thisp*/) {
               var len = this.length >>> If (typeof fun != "function") {
                    throw new TypeError();
            }

var thisp = arguments[1];

für (var i=0; i < len; i ) {

Wenn (ich in diesem
&& fun.call(thisp, val, i, this)) {
Gibt false zurück
}
}

true zurückgeben;

};

}
</script>

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