Welche Methoden gibt es zum Iterieren von Arrays in es6?

Iterationsmethode: 1. Karte, die zum Zuordnen von Arrays gemäß bestimmten Regeln verwendet wird, um nach der Zuordnung ein neues Array zu erhalten; 2. Filter, zum Filtern von Elementen basierend auf Beurteilungsbedingungen; 3. forEach, was der Verwendung einer for-Schleife entspricht; 4. some, wird verwendet, um zu bestimmen, ob es Elemente im Array gibt, die die Bedingungen erfüllen. 5. every, wird verwendet, um zu bestimmen, ob alle Elemente im Array die Bedingungen erfüllen. 6. findIndex, wird verwendet, um den Elementindex zu finden ; 7. Reduzieren, das die Array-Elemente durchlaufen und die Rückruffunktion einmal für jedes Element ausführen kann.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Array sollte der am häufigsten verwendete Typ in es6 sein. Wie Arrays in anderen Sprachen handelt es sich auch hier um einen Satz geordneter Daten, der Unterschied besteht jedoch darin, dass jeder Slot des Arrays im ECMAscript-Array jede Art von Daten speichern kann bedeutet, dass wir im ersten Slot einen String, im zweiten einen Wert und im dritten ein Objekt speichern können. Die am häufigsten verwendete Methode in ECMAscript-Arrays ist die Iterationsmethode. Lassen Sie mich sie im Folgenden ausführlich vorstellen. 7 Iterationsmethoden für ES6-Arrays

Funktion: Ordnen Sie das Array gemäß einer bestimmten Regel zu, um nach der Zuordnung das neue Array zu erhalten.Anwendungsszenarien:

(1) Alle Elemente im Array * 0,8 (2) Konvertieren Sie die js-Objekte in das Array, Zuordnung zu HTML-String

Beispiel:

 const arr = [10,20,30,40,50]
  // 完整写法
  // let res = arr.map((item,index)=>{
  //     return item * 0.8
  //   })
  // 熟练写法
   let res = arr.map(item=>item*0.8)
    console.log(res)
  // 返回处理后的新数组   [8, 16, 24, 32, 40]

• 2, filter()-Methode

• übergibt die laufende Funktion an jedes Element des Arrays und die Elemente, die die Funktion als wahr zurückgibt wird ein Array bilden und zurückgeben.

Funktion: Filtern Sie basierend auf den beurteilten Bedingungen.

Anwendungsszenarien:

(1) Gerade Zahlen im Array filtern (2) Produktpreise filtern

Beispiel:

 //需求： 筛选数组里的偶数
    const arr = [10,20,33,44,55]
    // let res =  arr.filter(item=>{
    //   if(item % 2 == 0){
    //     return true
    //   } else{
    //     return false
    //   }
    // })
    // console.log(res)
    let res1 = arr.filter(item => item % 2==0)
    console.log(res1) // [10, 20, 44]

• 3. forEach () Methode

• Übergeben Sie jedes Element des Arrays an die laufende Funktion und es gibt keinen Rückgabewert.

Funktion: Äquivalent zu einer anderen Art, eine for-Schleife zu schreiben

Anwendungsszenario: Durchlaufen eines Arrays

Beispiel:

 // 类似for循环遍历
      const arr = [13,22,10,55,60]
      arr.forEach((item,index)=>{
        console.log(item,index)
        // item->数组里每一个元素
        // index->对应的下标
      })

4. some()-Methode

übergibt jedes Element des Arrays und führt die Funktion aus. Wenn eine Funktion „true“ zurückgibt, gibt diese Methode „true“ zurück.

Funktion: Bestimmen Sie, ob es Elemente im Array gibt, die die Bedingungen erfüllen (logisches ODER ||, jedes davon kann erfüllt werden)

Anwendungsszenarien:

(1) Bestimmen Sie, ob ungerade Zahlen im Array vorhanden sind Array

(2) Nicht leeres Urteil: Bestimmen Sie, ob es ein Element mit leerem Wert im Formulararray gibt. Beispiel: Bestimmen Sie, ob es eine ungerade Zahl in der laufenden Funktion gibt Diese Methode ist wahr. Funktion: Bestimmen, ob alle Elemente im Array die Bedingungen erfüllen (logisches &&, alle erfüllt)

Anwendungsszenarien:

(1) Bestimmen, ob alle Elemente im Array gerade Zahlen sind
( 2) Idee wechseln: Ob alle Warenkörbe ausgewählt sind
Beispiel: Bestimmen, ob alle gerade Zahlen sind

 // 判断是否有奇数
    const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.some(item =>item % 2 == 1)
    console.log(res)
   //  true: 有满足条件的元素
   //  false: 没有满足条件的元素

6. findIndex()-MethodeFunktion:

Elementindex suchen

Anwendungsszenario:

(1) Wenn das Array ein Werttyp ist, suchen Sie den Elementindex: arr.indexOf(element)
(2) Wenn das Array ein Referenztyp ist, suchen Sie das Element Index: arr. findIndex( )
Beispiel:

 // 判断是否全是偶数
      const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.every(item =>item % 2 == 0)
    console.log(res)
   // true: 所有满足都满足条件
   // false: 有元素不满足条件

7, Reduce()-Methode

Funktion: Durchlaufen der Array-Elemente und Ausführen einer Rückruffunktion für jedes Element

Anwendungsszenario: Array-Summierung/Durchschnitt/Maximum/Minimum

Beispiel:

 const arr = [10,20,30,40,50]
   let res =  arr.reduce((sum,item,index)=>{
      return sum + item
      // console.log(sum,item,index)
    },0)

方法的区别与细节

every()和some()

这些方法中，every()和some()是最相似的，都是从数组中搜素符合某个条件的元素。对every()来说，传入的参数必须对每一项都返回true，它才会返回true。而对于some()来说，只要有一项让传入的函数返回true，它就返回true，下面举个例子：

let numbers = [2,1,4,3,5,4,3];

let everyResult = numbers.every((item,index,array) => item >2);
console.log(everyResult);  // false

let someResult = numbers.some((item,index,array) => item >2);
console.log(someResult);  // true

filter()方法

这个方法基于给定的函数来决定每一项是否应该包含在它返回的数组中。例如：

let numbers = [2,1,4,3,5,4,3];
let filterResult = numbers.filter((item,index,array) => item >2);
console.log(filterResult);  // 4,3,5,4,3

这里filter返回的数组包含了4,3,5,4,3，因为只有对这些项传入的函数才返回 true，这个方法非常适合从数组中筛选满足给定条件的元素，也是非常常用的迭代方法。

map()

map()方法也是返回一个数组。这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果，例如，可以将数组中的每一项都乘以2，并返回包含所有结果的数组，如下：

let numbers = [2,1,4,3];
let mapResult = numbers.map((item,index,array) => item *2);
console.log(mapResult);  // 4,2,8,6

这个方法返回的数组包含了原始数组中每给数值乘以2的结果。这个方法很适应于创建一个与原数组一一对应的新数组。

forEach()

最后看一看forEach这个方法，这个方法只会对每一项运行传入的函数，没有返回值。其实，本质上，forEach()方法相当于使用for循环遍历数组。例如：

let numbers = [2,1,4,3];
numbers.forEach((item,index,array) => {
console.log(item)
}); // 2,1,4,3

【相关推荐：javascript视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Iterieren von Arrays in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!