Maison > Article > interface Web > Comment utiliser forEach(), Array.map() et Array.filter() ? (exemple de code)

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

青灯夜游avant: 2019-11-28 17:01:481961parcourir

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.

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>

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>

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>

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>

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>

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>

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!

JavaScript Array foreach Filter 回调函数 map JS

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Une brève discussion sur l'utilisation du tableau JSArrayArticle suivant：Une brève discussion sur l'utilisation du tableau JSArray

Articles Liés

Voir plus