Wie verwende ich forEach(), Array.map() und Array.filter()? (Codebeispiel)-js-Tutorial-php.cn

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

青灯夜游

Freigeben： 2019-11-28 17:01:48

nach vorne

2098 Leute haben es durchsucht

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.

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!