Utilisation itérative de Array en JavaScript

Itération de tableau

J'aime étudier JavaScript, ce qui est bien plus intéressant que de regarder HTML et CSS. Sans plus tarder, présentons de manière exhaustive les cinq méthodes d’itération du type tableau de JavaScript. Nous nous efforçons d'être complets, avec des exemples simples et complexes pour chaque méthode.

• méthode Every(), chaque élément renvoie true, renvoie true

• méthode some(), un élément renvoie vrai, renvoie vrai

• méthode filter(), renvoie un tableau, chaque élément renvoie vrai

• La méthode

  map() renvoie un tableau, chaque élément est le résultat de l'appel de la fonction

• la méthode forEach(), ne renvoie pas de résultats , chaque élément exécute une fonction spécifique

---

Pourquoi utiliser ces itérations Je suis juste paresseux et n'aime pas écrire des boucles For. être fait en utilisant pour. La force motrice générée par la technologie est donc la paresse. J'aime l'itération pour rendre le code génial. J'ai récemment examiné la syntaxe d'ES6, qui s'appelle simplicité, et c'est presque comme une bible. Cependant, cela augmente également la difficulté de lecture du code. Parmi les cinq méthodes ci-dessus, les plus couramment utilisées sont map() et forEach().

1. forEach()

Cette chose est juste une boucle for. Mettez simplement ce que vous voulez faire entre parenthèses et cela ne retournera aucun résultat. Jetez un œil à la définition :

Définition : La méthode forEach() est utilisée pour appeler chaque élément du tableau et transmettre l'élément à la fonction de rappel.

 语法：
array.forEach(function(currentValue, index, arr), thisValue)

Remarque :

• forEach() n'exécutera pas la fonction de rappel pour un tableau vide

• ne renvoie pas de résultat. S'il est récupéré, il ne sera pas défini. Essayez ci-dessous

• En fin de compte, le tableau d'origine ne sera pas modifié

<. 🎜>

Cela prend beaucoup de temps à expliquer, il suffit d'encapsuler la boucle for. Tous les langages n'ont pas de méthodes similaires. PHP a également une méthode similaire appelée foreach.

        var num = [1, 2, 3, 4, 5];
        num.forEach((value) => {            
        console.log(value);
        });

Parcourt le tableau et imprime chaque élément. Ce qu'il fait n'est pas différent de for. Une fonction anonyme est utilisée ici (fonction flèche ES6, juste une fonction), puis une fonction est écrite pour être appelée explicitement, et la position est également transmise.

        function myFunc(item, index) {
            console.log(index, item);
        }        var num = [1, 2, 3, 4, 5];
        num.forEach(myFunc);

Le recto est la position et le verso est la valeur Il n'y a rien à expliquer dans le code. Un paramètre est le thisValue facultatif. Pour le dire franchement, il spécifie ce qu'est this dans la fonction appelée. La valeur par défaut n'est pas définie.

thisValue Facultatif. La valeur transmise à la fonction utilise généralement la valeur « this ». Si ce paramètre est vide, "undefined" sera passé à la valeur "this".

C'est plus clair pour donner un exemple, le code explique tout.

        function myFunc(item, index) {
            console.log(this.value, index, item);
        }        var num = [1, 2, 3, 4, 5];        
        var obj = {value: '就是一个对象而已'};
        num.forEach(myFunc, obj);

Un morceau de code très idiot qui utilise simplement la valeur de l'objet entrant à chaque itération. Ceci dans la fonction est l'objet obj transmis. Tout ce qui doit être expliqué a été expliqué. Encore une chose, ce produit peut remplacer for, mais ce n'est pas absolu, la boucle for est quand même plus rapide que cela, comme mentionné dans l'essence du langage JavaScript. n'entrerons pas dans les détails ici.

2. map()

Ce produit est bien plus utile que le précédent On peut le voir dans de nombreux frameworks JS, comme React et Redux, c'est le cas. requis pour retourner Un nouvel objet d'état ne peut pas modifier l'objet d'état d'origine, utilisez-le simplement pour revenir.

Définition : La méthode map() renvoie un nouveau tableau, et les éléments du tableau sont les valeurs des éléments du tableau d'origine après avoir appelé la fonction. La méthode map() traite les éléments séquentiellement dans l’ordre d’origine des éléments du tableau.

 语法：
array.map(function(currentValue,index,arr), thisValue)

Remarque :

• map() ne détectera pas les tableaux vides.

• map() ne modifie pas le tableau d'origine.

Ce type a fait beaucoup de choses que je veux faire. Ce qui précède est un exemple d'état dans React. Quoi qu'il en soit, il sera fréquemment utilisé. Selon une certaine condition, chaque élément du tableau exécute la fonction correspondante, ce qui correspond à peu près à ce que cela signifie. Les exemples sur Internet génèrent tous un tableau, chaque élément est le double de l'original, remplacez-le par un nouveau, s'il s'agit d'un nombre impair, # est affiché, et s'il s'agit d'un nombre pair, * est affiché.

        var num = [1, 2, 3, 4, 5];        
        var newNum = num.map((item) => {            
        if(item%2) {                
        return '#';
            } else {                
            return '*';
            }
        });        console.log(newNum);

Quant à l'utilisation du paramètre facultatif

thisValue, elle est similaire à l'exemple ci-dessus, donc je ne l'écrirai plus . Parmi les cinq, celui-ci est le plus pratique et apparaît le plus.

3.filter()

C'est également une méthode plus utile, utilisée lors du filtrage d'un tableau.

Définition : La méthode filter() crée un nouveau tableau. Les éléments du nouveau tableau sont vérifiés pour tous les éléments du tableau spécifié qui remplissent les conditions.

 语法：
array.filter(function(currentValue,index,arr), thisValue)

Remarque :

• filter() ne détectera pas les tableaux vides.

• filter() ne modifie pas le tableau d'origine.

举个比较复杂的例子，在Todo的例子，很多框架都会用这个例子来展示自己这个框架的好处。Todo应用里有很多事项，有完成的，也未完成的，那么把完成的或未完成的筛选出来就需要用到这个了。

        var todos = [
            {name: 'todo1', completed: false}, 
            {name: 'todo2', completed: true},
            {name: 'todo3', completed: false}
        ];        var todosCompleted = todos.filter((todo) => {            
        return todo.completed;
        });        console.log(todosCompleted);

直截了当，比在for循环里写if判断简洁多了。

4.every()和some()

最后两个一起说，这两是兄弟，大的叫且(&&)，小的叫或(||)，给出定义也能看明白：

定义： every() 方法用于检测数组所有元素是否都符

合指定条件（通过函数提供）。every() 方法使用指定函数检测数组中的所有元素：
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。

定义：some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。some() 方法会依次执行数组的每个元素：
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素，则返回false。

注意的点：

• 都不会对空数组进行检测。

• 不会改变原始数组。

很少在项目中会想到这两兄弟，用for循环加上if判断，break退出循环就可以实现。用迭代方法就是要少写几行代码，js有一个库underscore，那更简洁。Backbone框架就依赖了这个库来实现对model和collection的便捷操作。最后一个例子结束这一讲，判断数组里的数字是否都是奇数（every），是否有偶数（some）。

        var num = [1, 3, 5, 6];        
        console.log(num.every((value) => {    // flase            
        return value%2;
        }));        
        console.log(num.some((value) => {     // true
            return !(value%2);
        }));

这两个方法比较聪明，对于every()方法，只要有一个结果是false，就直接返回false，后面的就不检测了。同理对于some()方法，只有出现返回true的结果，也就直接返回true，后面就不检测了。这个就不具体测试了，这样做就是为了提高效率，就是一个break的事。

总结

讲了五种Array的迭代方法，就是程序员偷懒搞的，还有更懒的方法，ES6里面的语法就更像天书了，比如箭头函数（=>）就是为了省写function这个单词，还有一个很牛逼的扩展操作符…，直接看呆。以后有机会慢慢来写这些看不懂的符号，这一次讲的迭代是后面的基础，常用的也就是forEach和map方法，多用就记住了。

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!