Heim > Artikel > Web-Frontend > JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen
Im vorherigen Artikel „JS-Array-Lernen: Wie man alle Elemente zusammenfügt und einen String zurückgibt“ haben wir etwas über die Methode zum Konvertieren eines Arrays in einen String gelernt ~
Dieser Artikel Lass uns reden über die iterative Operation von Arrays und stellen zwei Methoden zur Berechnung der Summe von Elementen und zur Verknüpfung von Werten in Strings vor.
Methode 1. Verwenden Sie die Methode forEach()
Die Methode forEach() wird verwendet, um jedes Element des Arrays aufzurufen und das Element an die Rückruffunktion zu übergeben.
Syntax:
array.forEach(funtion callbackfn(value, index, array), thisValue)
funtion callbackfn(value, index, array)
: erforderliche Parameter, geben Sie die Callback-Funktion an, die bis zu drei Parameter empfangen kann: funtion callbackfn(value, index, array)
:必需参数,指定回调函数,最多可以接收三个参数:
value:数组元素的值。
index:数组元素的数字索引。
array:包含该元素的数组对象。
thisValue
:可省略的参数,回调函数中的 this 可引用的对象。如果省略 thisArg,则 this 的值为 undefined。
下面通过代码示例来具体了解一下:
示例1:输出数组元素
function f(value,index,array) { console.log("a[" + index + "] = " + value); } var a = ['a', 'b', 'c']; a.forEach(f);
示例2:将数组值进行累加求和
var a = [10, 11, 12], sum = 0; function f(value) { sum += value; } a.forEach(f); console.log(sum);
示例3:将数组值连接成字符串
var a = ['ab', 'cd', 'ef'], str = ""; function f(value) { // str=str + value; str=str.concat(value); } a.forEach(f); console.log(str);
方法2、使用reduce() 方法
reduce() 方法可对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。
语法:
array.reduce(function callbackfn(previousValue, currentVaule, currentIndex, array), initialValue)
function callbackfn(previousValue, currentVaule, currentIndex, array)
:必需参数,指定回调函数,最多可以接收4个参数:
previousValue:通过上一次调用回调函数获得的值。如果向 reduce() 方法提供 initialValue,则在首次调用函数时,previousValue 为 initialValue。
currentVaule:当前元素数组的值。
currentIndex:当前数组元素的数字索引。
array:包含该元素的数组对象。
initialValue
thisValue
: ein ausgelassener Parameter, ein Objekt, auf das in der Callback-Funktion durch this verwiesen werden kann. Wenn thisArg weggelassen wird, ist der Wert von this undefiniert. Lassen Sie uns anhand von Codebeispielen mehr darüber erfahren: Beispiel 1: Array-Elemente ausgeben
var a = [11, 12, 13], sum = 0; function f(pre,curr) { sum=pre+curr; return sum; } a.reduce(f); console.log(sum);Beispiel 2: Akkumulieren und Summieren von Array-Werten
36
Beispiel 3: Array-Werte zu String verketten
🎜var a = [11, 12, 13], str = ''; function f(pre,curr) { str=pre+''+curr; return str; } a.reduce(f); console.log(str);🎜🎜🎜🎜🎜Methode 2. Verwenden Sie die Methode „reduce()“🎜🎜🎜🎜reduce()-Methode zum Aufrufen der angegebenen Rückruffunktion für alle Elemente im Array. Der Rückgabewert dieser Rückruffunktion ist das kumulative Ergebnis, und dieser Rückgabewert wird beim nächsten Aufruf der Rückruffunktion als Parameter bereitgestellt. 🎜🎜🎜Syntax: 🎜
var a = [11, 12, 13], str = ''; function f(pre,curr) { str=pre+'-'+curr; return str; } a.reduce(f); console.log(str);🎜
function callbackfn( previousValue, currentVaule, currentIndex, array)
: erforderliche Parameter, geben Sie die Rückruffunktion an, die bis zu 4 Parameter empfangen kann: 🎜initialValue
: ein weggelassener Parameter, der an die Funktion übergebene Anfangswert. 🎜🎜 Lassen Sie uns anhand von Codebeispielen mehr darüber erfahren: 🎜🎜🎜Beispiel 1: Akkumulieren und summieren Sie die Array-Werte 🎜🎜rrreee🎜Ausgabeergebnis: 🎜rrreee🎜🎜Beispiel 2: Verketten Sie die Array-Werte zu einer Zeichenfolge 🎜🎜 rrreee🎜🎜 🎜🎜Wenn Sie ein Trennzeichen verwenden möchten, um jedes Array-Element zu trennen, können Sie die leere Zeichenfolge zwischen den beiden „+“-Operatoren in der Callback-Funktion in das angegebene Trennzeichen ändern: 🎜rrreee🎜🎜🎜🎜Okay, das war's Hier ist es, Sie können es lesen, wenn Sie es brauchen: 🎜Javascript-Tutorial für Fortgeschrittene🎜🎜Das obige ist der detaillierte Inhalt vonJS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!