Iterationsverwendung von Array in JavaScript

Array-Iteration

Ich lerne gerne JavaScript, was viel interessanter ist als der Blick auf HTML und CSS. Lassen Sie uns ohne weiteres die fünf Iterationsmethoden des Array-Typs von JavaScript umfassend vorstellen. Wir bemühen uns um eine umfassende Darstellung mit einfachen und komplexen Beispielen für jede Methode.

• every() Methode, jedes Element gibt true zurück, gibt true zurück

• some() Methode, ein Element gibt true zurück, gibt true zurück

• Filter()-Methode, gibt ein Array zurück, jedes Element gibt true zurück

• map()-Methode gibt ein Array zurück, jedes Element ist das Ergebnis des Funktionsaufrufs

• forEach( )-Methode, gibt keine Ergebnisse zurück , jedes Element führt eine bestimmte Funktion aus

---

Warum bin ich einfach faul und schreibe nicht gerne for-Schleifen? Das kann jede Methode Dies kann mit for erfolgen. Die treibende Kraft der Technologie ist also Faulheit. Ich mag Iteration, damit der Code großartig aussieht. Ich habe mir kürzlich die Syntax von ES6 angesehen, die als Einfachheit bezeichnet wird, und sie ist fast wie eine Bibel. Allerdings erhöht es auch die Schwierigkeit, den Code zu lesen. Von den oben genannten fünf Methoden sind map() und forEach() die am häufigsten verwendeten.

1. forEach()

Dieses Ding ist nur eine for-Schleife. Setzen Sie einfach das, was Sie tun möchten, in Klammern und es werden keine Ergebnisse zurückgegeben. Schauen Sie sich die Definition an:

Definition: Die Methode forEach() wird verwendet, um jedes Element des Arrays aufzurufen und das Element an die Callback-Funktion zu übergeben.

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

Hinweis:

• forEach() führt die Callback-Funktion für ein leeres Array nicht aus

• gibt kein Ergebnis zurück, es ist undefiniert.

• Am Ende wird das ursprüngliche Array nicht geändert

Die Erklärung dauert lange. Kapseln Sie einfach die for-Schleife. Nicht alle Sprachen haben ähnliche Methoden. PHP hat auch eine ähnliche Methode namens foreach.

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

Durchläuft das Array und druckt jedes Element. Was es tut, unterscheidet sich nicht von for. Hier wird eine anonyme Funktion verwendet (ES6-Pfeilfunktion, nur eine Funktion), und dann wird eine Funktion geschrieben, die explizit aufgerufen wird, und die Position wird ebenfalls übergeben.

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

Die Vorderseite ist die Position und die Rückseite ist der Wert. Im Code gibt es nichts zu erklären. Ein Parameter ist der optionale thisValue. Er gibt an, um welchen Wert es sich bei der aufgerufenen Funktion handelt. Der Standardwert ist undefiniert.

dieserWert Optional. Der an die Funktion übergebene Wert verwendet im Allgemeinen den Wert „this“. Wenn dieser Parameter leer ist, wird „undefiniert“ an den „this“-Wert übergeben.

Es ist klarer, ein Beispiel zu geben, der Code erklärt alles.

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

Ein sehr alberner Code, der einfach den Wert des eingehenden Objekts in jeder Iteration verwendet. Dies in der Funktion ist das übergebene Objekt obj. Alles, was erklärt werden muss, ist noch eine Sache, die dieses Produkt ersetzen kann, aber in Bezug auf die Effizienz ist die for-Schleife immer noch schneller als sie Ich werde hier nicht näher darauf eingehen.

2. map()

Dieses Produkt ist viel nützlicher als das vorherige. Es ist in vielen JS-Frameworks wie React und Redux zu sehen Für die Rückgabe ist ein neues Statusobjekt erforderlich. Das ursprüngliche Statusobjekt kann nicht geändert werden. Verwenden Sie es einfach zum Zurückgeben.

Definition: Die Methode map() gibt ein neues Array zurück, und die Elemente im Array sind die Werte der ursprünglichen Array-Elemente nach dem Aufruf der Funktion. Die Methode „map()“ verarbeitet Elemente nacheinander in der ursprünglichen Reihenfolge der Array-Elemente.

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

Hinweis:

• map() erkennt keine leeren Arrays.

• map() ändert das ursprüngliche Array nicht.

Dieser Typ hat viele Dinge getan, die ich tun möchte. Das Obige ist ein Beispiel für den Zustand in React. Es wird jedoch häufig verwendet. Unter einer bestimmten Bedingung führt jedes Element im Array die entsprechende Funktion aus, was im Wesentlichen auch der Fall ist. Die Beispiele im Internet geben alle ein Array aus, jedes Element ist doppelt so groß wie das Original, ändert es in ein neues, wenn es eine ungerade Zahl ist, wird # ausgegeben, und wenn es eine gerade Zahl ist, wird * ausgegeben.

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

Die Verwendung des optionalen Parameters thisValue ähnelt dem obigen Beispiel, daher werde ich es nicht noch einmal schreiben . Von den fünf ist dieses das praktischste und sieht am besten aus.

3.filter()

Dies ist auch eine nützlichere Methode, die beim Filtern eines Arrays verwendet wird.

Definition: Die Methode filter() erstellt ein neues Array. Die Elemente im neuen Array werden auf alle Elemente im angegebenen Array überprüft, die die Bedingungen erfüllen.

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

Hinweis:

• filter() erkennt keine leeren Arrays.

• filter() ändert das ursprüngliche Array nicht.

举个比较复杂的例子，在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方法，多用就记住了。

Das obige ist der detaillierte Inhalt vonIterationsverwendung von Array in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!