Zusammenfassung von 7 häufig verwendeten iterativen Verarbeitungsmethoden für Arrays in JavaScript

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich verwandte Themen zu den 7 häufig verwendeten iterativen Verarbeitungsmethoden von Arrays in JavaScript vor. Ich hoffe, dass er für alle hilfreich ist.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

1.map()-Methode

1.1 Anwendungsszenario: Verwenden Sie eine bestimmte Regel, um ein neues Array zuzuordnen (durchlaufen Sie jedes Element in

Zum Beispiel: +1 für jedes Element im Array

 let arr = [10, 20, 30, 40, 50]
 //item数组每一项的值,index数组的下标
 let newArr = arr.map((item, index) => {
      return item + 1
    })
    console.log(newArr)//[11, 21, 31, 41, 51]

1.2 Hinweis:

(1) Die Anzahl der Ausführungen der Rückruffunktion ist gleich zur Array-Länge

(2). Die Länge des neuen Arrays, die von der Map-Funktion zurückgegeben wird, ist gleich der Länge des ursprünglichen Arrays

(3). Was zurückgegeben wird, ist der Wert des aktuell durchlaufenen Elements. Alle Elemente des neuen Arrays sind undefiniert

2.2 Hinweise:

(1) Die Anzahl der Ausführungen der Callback-Funktion entspricht der Array-Länge

(2). Die forEach-Funktion hat keinen Rückgabewert

(3). Selbst wenn es manuell zurückgegeben wird, wird die Schleife nicht beendet die geraden Zahlen im Array

 let arr = [10, 20, 30, 40, 50]
    arr.forEach((item, index) => {
      console.log(`下标为${index}的元素是${item}`)
    })
 //控制台打印结果
 //下标为0的元素是10
 //下标为1的元素是20
 //下标为2的元素是30
 //下标为3的元素是40
 //下标为4的元素是50

3.2 Hinweis:

(1) Die Anzahl der Ausführungen der Callback-Funktion ist gleich der Länge des Arrays

(2) Die Länge des neuen Arrays, das von der Filterfunktion zurückgegeben wird ist nicht gleich der Länge des ursprünglichen Arrays

(3). Wenn der Rückgabewert wahr ist, werden die aktuell durchlaufenen Elemente zum neuen Array hinzugefügt Der Wert ist falsch, er wird nicht zum neuen Array hinzugefügt

4.some()-Methode

4.1 Anwendungsszenario: Wird verwendet, um zu bestimmen, ob Elemente im Array vorhanden sind, die die Bedingungen erfüllen

Zum Beispiel: Bestimmen Sie, ob es welche gibt eine Zahl größer als 100 im Array (Existiert, der Rückgabewert ist wahr, existiert nicht, der Rückgabewert ist falsch)

 let arr = [1, 2, 3, 4, 5, 6, 7, 8]
 let newArr = arr.filter((item, index) => {
 	//return一个布尔值
      return item % 2 == 0
    })
    console.log(newArr)//[2,4,6,8]

4.2 Hinweise:

(1) Die Anzahl der Ausführungen der Rückruffunktion ist nicht gleich zur Array-Länge (2). Der Rückgabewert einiger Funktionen ist ein boolescher Wert (3). Wenn der Rückgabewert wahr ist, wird der Durchlauf beendet , und der Rückgabewert einer Funktion ist falsch, der Durchlauf wird fortgesetzt, und der Rückgabewert einer bestimmten Funktion ist falsch Bestimmen Sie, ob alle Elemente im Array die Bedingungen erfüllen (Schalteridee), haben ähnliche Funktionen wie die Methode some() und können verglichen und verstanden werden

Zum Beispiel: Bestimmen Sie, ob alle Elemente im Array größer als 100 sind (alle sind größer als 100 ist der Rückgabewert wahr, solange ein Element kleiner als 100 ist, ist der Rückgabewert falsch)

let arr = [10, 50, 150, 200, 60, 30]
let bol = arr.some((item, index) => {
      return item > 100
    })
    console.log(bol)//true

5.2 Hinweis:

(1).Callback Die Anzahl der Ausführungen der Funktion ist nicht gleich die Array-Länge (2). Der Rückgabewert jeder Funktion ist ein boolescher Wert (3). Wenn der Rückgabewert wahr ist, wird der Durchlauf fortgesetzt Der Rückgabewert jeder Funktion ist wahr. Wenn der Rückgabewert falsch ist, wird er weiterhin beendet und der Rückgabewert jeder Funktion ist falsch

6.findIndex()-Methode

6.1 Anwendungsszenario: Geeignet für Objekte in der Array, in dem die Elemente vom Typ sind, effizienter als die herkömmliche for-Schleife Ist der Wert wahr, endet der Durchlauf. Der Rückgabewert der Methode findIndex ist der aktuelle Indexwert. Wenn der Rückgabewert falsch ist, wird der Durchlauf fortgesetzt. Wenn nach allen Durchläufen des Arrays nicht wahr zurückgegeben wird, lautet der Rückgabewert der Methode findIndex -1

7.reduce()-Methode

7.1 Anwendungsszenario: Array-Summe/Durchschnitt/Maximal-/Minimalwert

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

let arr = [10, 50, 150, 200, 60, 30]
let bol = arr.every((item, index) => {
      return item > 100
    })
    console.log(bol)//false

7.2 Hinweise:

(1). Es ist am besten, einen Anfangswert anzugeben, um leere Array-Fehler zu vermeiden. Dabei ist besonders darauf zu achten, dass der Summenwert jeder Runde der Rückgabewert der vorherigen Runde ist. Zusammenfassung Beispiel:

arr.

reduce

( function(sum,value,index,arr){}) Methode

reduce() Methode empfängt eine Funktion als Akkumulator. Jeder Wert im Array (von links nach rechts) beginnt reduziert und schließlich auf einen Wert berechnet werden.

reduce() kann als Funktion höherer Ordnung zum Zusammenstellen von Funktionen verwendet werden.

Hinweis: Reduce() führt die Rückruffunktion nicht für leere Arrays aus.

参数	详情
sum第一个参数	第一次为数组的第一个数组元素的值（下标为0），依次往后是返回计算结果的值
value 第二个参数	开始为数组元素第二个的值（下标为1），依次往后循环
index第三个参数	依次为数组元素的下标
arr第四个参数	为数组的整体
initialValue	为第一参数的默认值，设置的话，第一个参数的默认值为initialValue的值，则 第二个参数则将使用数组第一个元素（下标为0 ），没有设置的话，第一个参数将使用数组第一个元素，而 第二个参数 将使用数组第二个元素。

function sum(arr){
    return arr.reduce(function(sum,value,index,arr){
    	console.log(sum);
        console.log(value);
        console.log(index);
        console.log("~~")
        console.log(arr)
        return sum+y    },initialValue)}console.log(sum([1,2,3,4,5]))

arr.every(function(value,index,arr){})

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

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

function sum(arr){
    return arr.every(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.some(function(value,index,arr){})

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

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

function sum(arr){
    return arr.some(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.filter(function(value,index,arr){})

filter()方法过滤查找全部，对数组元素进行判断，满足条件的会组成一个新的数组返回
注意:如果都不符合条件，会得到一个空数组
注意：如果所有元素都符合条件，会得到一个包含所有元素的新数组它与原数组进行===或==比较会得到false

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

function sum(arr){
    return arr.filter(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=5
    })}console.log(sum([1,2,3,4,5]))

arr.map(function(value,index,arr){})

map对数组元素进行循环，有返回值，返回值会组成一个新的数组
注意：map可以处理一对一的元素映射

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

const source = [1,2,3,4]const target = source.map(n=>({id:n,label:`label${n}`}))console.log(target)

function sum(arr){
    return arr.map(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.forEach(function(value,index,arr){})

forEach()方法对数组元素进行循环，没有返回值和for循环的功能一样，但是不能使用break和countinue
注意：map和forEach的区别：map有返回值，forEach没有返回值

参数	详情
value	数组元素
index	数组下标
arr	当前数组的整体

function sum(arr){
    return arr.forEach(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

【相关推荐：javascript视频教程、web前端】

Das obige ist der detaillierte Inhalt vonZusammenfassung von 7 häufig verwendeten iterativen Verarbeitungsmethoden für Arrays in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!