vue 中常用操作數(shù)組的方法(forEach()和reduce())
更新時間：2025年03月21日 09:51:05 作者：COLDEHY
文章介紹了JavaScript中常用的操作數(shù)組方法,包括forEach()和reduce(),forEach()用于遍歷數(shù)組并對每個元素執(zhí)行操作,而reduce()則用于遍歷數(shù)組并進(jìn)行累加等迭代操作,感興趣的朋友一起看看吧
操作數(shù)組方法
記錄一下自己常用到的操作數(shù)組的方法
1.forEach()
遍歷數(shù)組 在回調(diào)函數(shù)中對原數(shù)組的每個成員進(jìn)行修改（不用 return）
方法接收一個回調(diào)函數(shù) 回調(diào)函數(shù)接收兩個參數(shù) 第一個是遍歷的當(dāng)前元素 第二個是元素的索引
const arr = [
{
name: '張三'
},
{
name: '李四'
},
{
name: '王五'
}
]
//遍歷 arr 數(shù)組然后給每個對象元素中添加一個 id 屬性 值為索引值
arr.forEach((item, index) => {
item.id = index
})
console.log(arr);2.reduce().reduce()
遍歷數(shù)組中每個元素進(jìn)行迭代操作，累加、累乘之類（在回調(diào)中需要 return 每次迭代完成的值 為下一次迭代使用）
方法接收兩個參數(shù) 第一個是回調(diào)函數(shù) 第二個是迭代的初始值
回調(diào)中接收兩個參數(shù) 第一個是每次迭代完成的值 第二個是遍歷的當(dāng)前元素
const arr = [
{
name: '張三',
num: 1
},
{
name: '李四',
num: 2
},
{
name: '王五',
num: 3
}
]
//遍歷 arr 數(shù)組根據(jù)每個對象元素中中的 num 屬性 進(jìn)行累加迭代
const finaltotal = arr.reduce((total, item) => {
return total + item.num
}, 0)
console.log(finaltotal);到此這篇關(guān)于vue 中常用操作數(shù)組的方法的文章就介紹到這了,更多相關(guān)vue 操作數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue前端登錄token信息驗(yàn)證功能實(shí)現(xiàn)
最近公司新啟動了個項(xiàng)目，用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)token登錄驗(yàn)證的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue是一款非常流行的JavaScript框架,它提供了許多方便開發(fā)者的功能,本文將介紹如何通過Vue路由改變地址欄的參數(shù),感興趣的朋友跟隨小編一起看看吧2023-10-10
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐教程
這篇文章主要給大家介紹了關(guān)于vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐的相關(guān)資料，其中包括vue-router 2.0的基礎(chǔ)用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)價格日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了vue使用canvas手寫輸入識別中文，工作時遇到一些項(xiàng)目如：系統(tǒng)上的輸入法使用不方便，客戶要求做一個嵌入web網(wǎng)頁的手寫輸入法。下面我們來看看文章得具體描述吧2021-11-11
Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)
Vuex是一個專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue webpack多頁面構(gòu)建的實(shí)例代碼
這篇文章主要介紹了vue webpack多頁面構(gòu)建的實(shí)例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09