JavaScript实现数组元素累加的三种常用方法
作者:木棉时间:2026-10-30 21:36:37浏览:206
本文介绍了JavaScript中实现数组元素累加的三种常见且实用的方法。通过具体的代码示例,详细讲解了如何使用for循环、Array.prototype.reduce以及forEach遍历来实现数值累加,并附带了对象数组去重及数据叠加的进阶案例,帮助开发者掌握不同场景下的数组处理技巧。
如何实现数组中所有数值的累加?这里总结了三种基础且常用的实现方式。如果您有其他更好的方法,欢迎分享交流。
第一种方案:利用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')上述三种方法是实践中较为常见且实用的解决方案。
补充案例:JavaScript实现对象数组的去重与数据累加
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实现数组内值累加的三种常见方法介绍到此结束。如需了解更多相关内容,建议查阅本站往期文章或继续阅读后续章节。感谢大家的支持!
作者最新文章
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
相关标签:
