JS实现数组内值累加常见的3个方法

 更新时间:2023年07月12日 10:20:29   作者:Single-Thread  
这篇文章主要给大家介绍了关于JS实现数组内值累加常见的3个方法,文中通过实例代码将3个方法介绍的非常详细,对大家学习或者使用js具有一定参考借鉴价值,需要的朋友可以参考下

怎么实现数组的每一个值进行累加呢?我只想到了三种方法,比较基础,也比较常用的,如果还有其他方法可以传授一下给我,谢谢!

一、方法一:(使用for循环)

// 1.定义一个数组
var oldArray = [1,2,3,4,5,6,7];
 
// 2.定义一个初始值 0
let result = 0;
 
// 2.for循环遍历,累加
for(let i = 0; i<oldArray.length;i++){
  result += oldArray[i]
}
 
console.log(result,'result')   //28 result

二、方法二:(使用reduce方法)

// 1.定义一个数组
var oldArray = [1,2,3,4,5,6,7];
 
// 2.定义一个新的变量接收值
let result = oldArray.reduce((a,b)=>{
  return a + b;
})
 
// 3.打印
console.log(result,'result')  // 28 result

三、方法三:(使用forEach方法)

// 1.定义一个数组
var oldArray = [1,2,3,4,5,6,7];
 
// 2.定义一个变量
let result = 0;
 
// 3.使用forEach()循环遍历和方法一类似
oldArray.forEach((item)=>{
  result += item
})
 
// // 3.打印
console.log(result,'result')

以上是我想到的比较常用且实用的方法!

附:js实现对象数组去重及数据叠加

HTML

<template>
  <div>
        <div v-for="item in list">
            id:{{item.id}} - count:{{item.count}}
        </div>
        <br />
        <div>点击按钮去重,count叠加</div>
        <button @click="getData">去重</button>
    </div>
</template>

JavaScript

<script>
export default {
  name: 'app',
  data(){
        return {
            list: [
                {
                    id: 0,
                    count: 2,
                },
                {
                    id: 1,
                    count: 2,
                },
                {
                    id: 2,
                    count: 2,
                },
                {
                    id: 3,
                    count: 2,
                },
                {
                    id: 0,
                    count: 2,
                },
                {
                    id: 2,
                    count: 2,
                },
            ]
        }
    },
    methods: {
        getData(){
            let listFilter = this.list
            // 定义map方法
            const res = new Map();
            // 过滤器过滤listFilter
            this.list = listFilter.filter((item) => {
                // res收集第一次存在的元素,如果存在,查看存在的位置,对list中的count进行叠加
                if(res.has(item.id)){
                    for(let [key,value] of res){
                        if(key==item.id){
                            this.list[key].count += item.count
                        }
                    }
                }
                // 如果不存在,则添加到res中
                return !res.has(item.id) && res.set(item.id, 1)
            });
        }
    }
}
</script>

总结

到此这篇关于JS实现数组内值累加常见的3个方法的文章就介绍到这了,更多相关JS数组内值累加内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • 编写一个javascript元循环求值器的方法

    编写一个javascript元循环求值器的方法

    这篇文章主要介绍了编写一个javascript元循环求值器的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 微信小程序网络请求封装示例

    微信小程序网络请求封装示例

    这篇文章主要介绍了微信小程序网络请求封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • JavaScript对象合并实现步骤介绍

    JavaScript对象合并实现步骤介绍

    这篇文章主要介绍了JavaScript对象合并实现步骤,为什么要合并?这是我在重构代码的时候的一个需求。简单来说,我会有若干个对象需要合并为一个对象。而这些对象为两层,如果直接展开或者赋值会涉及到深拷贝
    2023-01-01
  • 基于KO+BootStrap+MVC实现的分页控件代码分享

    基于KO+BootStrap+MVC实现的分页控件代码分享

    本段js和html两段代码实现分页控件效果,下面通过本文给大家详细介绍下基于KO+BootStrap+MVC实现的分页控件,非常不错,感兴趣的朋友一起看看吧
    2016-11-11
  • HTML+JS实现在线朗读器

    HTML+JS实现在线朗读器

    这篇文章主要介绍了利用HTML和JavaScript制作一个朗读器,可以跟着一起念着读,文中的示例代码讲解详细,感兴趣的小伙伴可以学习一下
    2022-02-02
  • 封装一个公用Echarts图表组件的3种模板代码示例

    封装一个公用Echarts图表组件的3种模板代码示例

    这篇文章主要给大家介绍了关于封装一个公用Echarts图表组件的3种模板,定义图表公共样式是为了统一同一网站各页面图表的基础样式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • JS排序算法之希尔排序与快速排序实现方法

    JS排序算法之希尔排序与快速排序实现方法

    这篇文章主要介绍了JS排序算法之希尔排序与快速排序实现方法,结合实例形式分析了希尔排序与快速排序的原理及javascript实现技巧,需要的朋友可以参考下
    2017-12-12
  • JavaScript 原型学习总结

    JavaScript 原型学习总结

    每个对像都有一个隐慝的属性用于指向到它的父对像(构造对像的函数)的原型(这里称为父原型或隐式原型),并从中继承它的属性和方法
    2010-10-10
  • 原生JS实现贪吃蛇小游戏

    原生JS实现贪吃蛇小游戏

    这篇文章主要为大家详细介绍了原生JS贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript在网页中画圆的函数arc使用方法

    JavaScript在网页中画圆的函数arc使用方法

    这篇文章主要介绍了JavaScript在网页中画圆的函数arc使用方法的相关资料,需要的朋友可以参考下
    2015-11-11

最新评论