vue 中常用操作数组的方法(forEach()和reduce())
更新时间：2025年03月21日 09:51:05 作者：COLDEHY
文章介绍了JavaScript中常用的操作数组方法,包括forEach()和reduce(),forEach()用于遍历数组并对每个元素执行操作,而reduce()则用于遍历数组并进行累加等迭代操作,感兴趣的朋友一起看看吧
操作数组方法
记录一下自己常用到的操作数组的方法
1.forEach()
遍历数组 在回调函数中对原数组的每个成员进行修改（不用 return）
方法接收一个回调函数 回调函数接收两个参数 第一个是遍历的当前元素 第二个是元素的索引
const arr = [
{
name: '张三'
},
{
name: '李四'
},
{
name: '王五'
}
]
//遍历 arr 数组然后给每个对象元素中添加一个 id 属性 值为索引值
arr.forEach((item, index) => {
item.id = index
})
console.log(arr);2.reduce().reduce()
遍历数组中每个元素进行迭代操作，累加、累乘之类（在回调中需要 return 每次迭代完成的值 为下一次迭代使用）
方法接收两个参数 第一个是回调函数 第二个是迭代的初始值
回调中接收两个参数 第一个是每次迭代完成的值 第二个是遍历的当前元素
const arr = [
{
name: '张三',
num: 1
},
{
name: '李四',
num: 2
},
{
name: '王五',
num: 3
}
]
//遍历 arr 数组根据每个对象元素中中的 num 属性 进行累加迭代
const finaltotal = arr.reduce((total, item) => {
return total + item.num
}, 0)
console.log(finaltotal);到此这篇关于vue 中常用操作数组的方法的文章就介绍到这了,更多相关vue 操作数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近公司新启动了个项目，用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
Vue是一款非常流行的JavaScript框架,它提供了许多方便开发者的功能,本文将介绍如何通过Vue路由改变地址栏的参数,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了vue 地图可视化 maptalks 篇，本文分步骤通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue高德地图绘制行政区边界功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-03-03
这篇文章主要给大家介绍了关于vue.js中Vue-router 2.0基础实践的相关资料，其中包括vue-router 2.0的基础用法、动态路由匹配、嵌套路由、编程式路由、命名路由以及命名视图等相关知识，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
这篇文章主要为大家详细介绍了vue实现价格日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了vue使用canvas手写输入识别中文，工作时遇到一些项目如：系统上的输入法使用不方便，客户要求做一个嵌入web网页的手写输入法。下面我们来看看文章得具体描述吧2021-11-11
Vuex是一个专门为Vue.js应用程序开发的状态管理模式，这篇文章主要介绍了Vuex的基本概念、项目搭建以及入坑点，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了vue webpack多页面构建的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-09-09
最新评论