Heim > Artikel > Web-Frontend > Wie verwende ich forEach(), Array.map() und Array.filter()? (Codebeispiel)

Wie verwende ich forEach(), Array.map() und Array.filter()? (Codebeispiel)

青灯夜游nach vorne: 2019-11-28 17:01:482021Durchsuche

In diesem Artikel wird Ihnen die Verwendung von forEach(), Array.map() und Array.filter() vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Array.forEach()

Die Methode forEach() ruft die Funktion einmal für jedes Array-Element auf (Rückruffunktion). [Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.forEach()</title>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>为每个数组元素调用一次函数。</p>
<p id="demo"></p>
<script>
    var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);
    document.getElementById("demo").innerHTML = txt;

    function myFunction(value, index, array) {
        txt = txt + value + "<br>";
    }
</script>
</body>
</html>

Bitte beachten Sie, dass diese Funktion 3 Parameter hat:

● Elementwert

● Elementindex

● Das Array selbst

Das obige Beispiel verwendet nur den Wertparameter. Das Beispiel kann wie folgt umgeschrieben werden:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.forEach()</title>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>为每个数组元素调用一次函数。</p>
<p id="demo"></p>
<script>
    var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);
    document.getElementById("demo").innerHTML = txt;

    function myFunction(value) {
        txt = txt + value + "<br>";
    }
</script>
</body>
</html>

Array.map()

Die Methode map() führt eine Funktion für jedes Array aus Element Neues Array erstellen. Die Methode map() ist eine Funktion, die keine Array-Elemente ohne Werte ausführt. Die Methode map() ändert das ursprüngliche Array nicht.

In diesem Beispiel wird jeder Array-Wert mit 2 multipliziert:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.map()</title>
<body>
<h2>JavaScript Array.map()</h2>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo"></p>
<script>
    var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(myFunction);
    document.getElementById("demo").innerHTML = numbers2;
    function myFunction(value, index, array) {
        return value * 2;
    }
</script>
</body>
</html>

Beachten Sie, dass diese Funktion drei Parameter hat:

● Elementwert

● Elementindex

　● Das Array selbst

Wenn die Rückruffunktion nur den Wertparameter verwendet, können die Index- und Array-Parameter weggelassen werden:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo"></p>
<script>
    var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(myFunction);
    document.getElementById("demo").innerHTML = numbers2;
    function myFunction(value) {
        return value * 2;
    }
</script>
</body>
</html>

Array.filter( )

Die Methode filter() erstellt ein neues Array, das die Array-Elemente des bestandenen Tests enthält. Dieses Beispiel erstellt ein neues Array aus Elementen mit Werten größer als 18:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.filter()</title>
<body>
<h2>JavaScript Array.filter()</h2>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p>
<script>
    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);

    document.getElementById("demo").innerHTML = over18;

    function myFunction(value, index, array) {
        return value > 18;
    }
</script>
</body>
</html>

Bitte beachten Sie, dass diese Funktion 3 Parameter hat:

● Elementwert

● Elementindex

●　Das Array selbst

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.filter()</title>
<body>
<h2>JavaScript Array.filter()</h2>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p>
<script>
    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);
    document.getElementById("demo").innerHTML = over18;
    function myFunction(value) {
        return value > 18;
    }
</script>
</body>
</html>

Dieser Artikel stammt aus der Spalte JS-Tutorial, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonWie verwende ich forEach(), Array.map() und Array.filter()? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript Array foreach Filter 回调函数 map JS

Stellungnahme：

Dieser Artikel ist reproduziert unter:51cto.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Eine kurze Diskussion über die Verwendung von JS-Array-ArraysNächster Artikel：Eine kurze Diskussion über die Verwendung von JS-Array-Arrays

In Verbindung stehende Artikel

Mehr sehen