JS迭代数组计算元素总和并将值链接成字符串的方法(JS,web开发)

方法1、使用forEach()方法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

语法：

array.forEach(funtioncallbackfn(value,index,array),thisValue)

funtion callbackfn(value, index, array)：必需参数，指定回调函数，最多可以接收三个参数：

• value：数组元素的值。

• index：数组元素的数字索引。

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

thisValue：可省略的参数，回调函数中的 this 可引用的对象。如果省略 thisArg，则 this 的值为 undefined。

下面通过代码示例来具体了解一下：

示例1：输出数组元素

functionf(value,index,array){console.log("a["+index+"]="+value);}vara=['a','b','c'];a.forEach(f);

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

vara=[10,11,12],sum=0;functionf(value){ sum+=value;}a.forEach(f);console.log(sum);

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

vara=['ab','cd','ef'],str="";functionf(value){ //str=str+value; str=str.concat(value);}a.forEach(f);console.log(str);

方法2、使用reduce() 方法

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

语法：

array.reduce(functioncallbackfn(previousValue,currentVaule,currentIndex,array),initialValue)

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

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

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

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

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

initialValue：可省略的参数，传递给函数的初始值。

下面通过代码示例来具体了解一下：

示例1：将数组值进行累加求和

vara=[11,12,13],sum=0;functionf(pre,curr){ sum=pre+curr; returnsum;}a.reduce(f);console.log(sum);

输出结果：

36

示例2：将数组值连接成字符串

vara=[11,12,13],str='';functionf(pre,curr){ str=pre+''+curr; returnstr;}a.reduce(f);console.log(str);

如果想要使用分隔符来分隔每个数组元素，可将回调函数中两个“+”运算符间的空字符串变为指定分隔符：

vara=[11,12,13],str='';functionf(pre,curr){ str=pre+'-'+curr; returnstr;}a.reduce(f);console.log(str);