Heim > Web-Frontend > js-Tutorial > JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen

JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen

青灯夜游
Freigeben: 2021-08-25 17:55:42
Original
2067 Leute haben es durchsucht

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)
Nach dem Login kopieren

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);
Nach dem Login kopieren

JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen

示例2:将数组值进行累加求和

var a = [10, 11, 12], sum = 0;
function f(value) {
	sum += value;
}

a.forEach(f);
console.log(sum);
Nach dem Login kopieren

JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen

示例3:将数组值连接成字符串

var a = ['ab', 'cd', 'ef'], str = "";
function f(value) {
	// str=str + value;
	str=str.concat(value);
}

a.forEach(f);
console.log(str);
Nach dem Login kopieren

JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen

方法2、使用reduce() 方法

reduce() 方法可对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。

语法:

array.reduce(function callbackfn(previousValue, currentVaule, currentIndex, array), initialValue)
Nach dem Login kopieren

function callbackfn(previousValue, currentVaule, currentIndex, array):必需参数,指定回调函数,最多可以接收4个参数:

  • previousValue:通过上一次调用回调函数获得的值。如果向 reduce() 方法提供 initialValue,则在首次调用函数时,previousValue 为 initialValue。

  • currentVaule:当前元素数组的值。

  • currentIndex:当前数组元素的数字索引。

  • array:包含该元素的数组对象。

initialValue

  • Wert: Der Wert des Array-Elements.

  • index: Numerischer Index des Array-Elements.

  • array: das Array-Objekt, das das Element enthält.

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);
Nach dem Login kopieren
JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu ZeichenfolgenJS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen

Beispiel 2: Akkumulieren und Summieren von Array-Werten

JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen

36
Nach dem Login kopieren

JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen

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);
Nach dem Login kopieren
🎜JS-Array-Lernen: Durchlaufen Sie Arrays, berechnen Sie die Summe der Elemente und verketten Sie Werte zu Zeichenfolgen🎜🎜🎜🎜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);
Nach dem Login kopieren
🎜function callbackfn( previousValue, currentVaule, currentIndex, array): erforderliche Parameter, geben Sie die Rückruffunktion an, die bis zu 4 Parameter empfangen kann: 🎜
  • 🎜 previousValue: Der Wert, der durch den letzten Aufruf der Rückruffunktion erhalten wurde. Wenn initialValue für die Methode Reduce() bereitgestellt wird, ist previousValue initialValue, wenn die Funktion zum ersten Mal aufgerufen wird. 🎜
  • 🎜currentValue: Der Wert des aktuellen Elementarrays. 🎜
  • 🎜currentIndex: Der numerische Index des aktuellen Array-Elements. 🎜
  • 🎜array: das Array-Objekt, das das Element enthält. 🎜
  • 🎜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!

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage