• 技术文章 >web前端 >js教程

    JS数组学习之迭代数组计算元素总和、将值连接成字符串

    青灯夜游青灯夜游2021-08-25 17:55:42原创205
    在之前的文章《JS数组学习之怎么拼接全部元素,返回一个字符串》中,我们了解了将数组转为字符串的方法,有需要的朋友可以学习了解一下~

    本篇文章带大家聊聊数组的迭代操作,介绍两种计算元素总和、将值链接成字符串的方法。

    方法1、使用forEach()方法

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

    语法:

    array.forEach(funtion callbackfn(value, index, array), thisValue)

    funtion callbackfn(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);

    1.png

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

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

    3.png

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

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

    2.png

    方法2、使用reduce() 方法

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

    语法:

    array.reduce(function callbackfn(previousValue, currentVaule, currentIndex, array), initialValue)

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

    initialValue:可省略的参数,传递给函数的初始值。

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

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

    var a = [11, 12, 13], sum = 0;
    function f(pre,curr) {
    	sum=pre+curr;
    	return sum;
    }
    
    a.reduce(f);
    console.log(sum);

    输出结果:

    36

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

    var a = [11, 12, 13], str = '';
    function f(pre,curr) {
    	str=pre+''+curr;
    	return str;
    }
    
    a.reduce(f);
    console.log(str);

    4.png

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

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

    5.png

    好了,就说到这里了,有需要的可以看:javascript高级教程

    以上就是JS数组学习之迭代数组计算元素总和、将值连接成字符串的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:JS字符串学习之将字符串分割成子串并传给数组 下一篇:怎么将Nodejs中的buffer转为JSON格式和UTF-8字符串?
    线上培训班

    相关文章推荐

    • JS数组学习之根据数组下标添加元素• JS数组学习之怎么去除头部或尾部元素• JS数组学习之如何根据数组下标删除任意元素• JS数组学习之怎么拼接全部元素,返回一个字符串

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网