Comment utiliser forEach(), Array.map() et Array.filter() ? (exemple de code)-js tutoriel-php.cn

Comment utiliser forEach(), Array.map() et Array.filter() ? (exemple de code)

青灯夜游

Libérer： 2019-11-28 17:01:48

avant

2101 Les gens l'ont consulté

Cet article vous présentera l'utilisation de forEach(), Array.map() et Array.filter(). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comment utiliser forEach(), Array.map() et Array.filter() ? (exemple de code)

Array.forEach()

la méthode forEach() appelle la fonction une fois pour chaque élément du tableau (fonction de rappel). [Recommandations de cours associées : Tutoriel vidéo JavaScript]

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

Copier après la connexion

Veuillez noter que cette fonction a 3 paramètres :

● Valeur de l'élément

● Index de l'élément

● Le tableau lui-même

L'exemple ci-dessus utilise uniquement le paramètre value. L'exemple peut être réécrit comme :

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

Copier après la connexion

Array.map()

La méthode map() fonctionne en exécutant une fonction sur chaque tableau element Créer un nouveau tableau. La méthode map() est une fonction qui n'exécute pas les éléments du tableau sans valeurs. La méthode map() ne modifie pas le tableau d'origine.

Cet exemple multiplie chaque valeur du tableau par 2 :

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

Copier après la connexion

Notez que cette fonction a 3 paramètres :

● Valeur de l'élément

● Indice de l'élément

　Quantity Le tableau lui-même

Lorsque la fonction de rappel utilise uniquement le paramètre value, les paramètres index et array peuvent être omis :

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

Copier après la connexion

Array.filter( )

La méthode filter() crée un nouveau tableau contenant les éléments du tableau qui ont réussi le test. Cet exemple crée un nouveau tableau à partir d'éléments avec des valeurs supérieures à 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>

Copier après la connexion

Veuillez noter que cette fonction a 3 paramètres :

● Valeur de l'élément

● Index de l'élément

Quantity　Le tableau lui-même

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

Copier après la connexion

Cet article provient de la colonne Tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!