Vuejs對象常用操作之取對應(yīng)的值、取key和value值、轉(zhuǎn)數(shù)組及合并等
1. 取得某一個屬性的值
let obj = {'name':'lxc','age':26}方法一：點號操作符 obj.name
方法二：方括號操作符：obj[name]
方法三：解構(gòu)賦值 let {name} = obj
...
2.取得對象的key和value值
let obj = {'name':'lxc','age':26}取Object key值
方法一：Object.keys(obj) //['name','age'] 返回一個字符串?dāng)?shù)組
方法二：for in
for(let i in obj){
console.log(i); //name,age
}
...Object value值
方法一：Object.value(obj) //['lxc',26] 返回一個字符串?dāng)?shù)組
方法二：for in
for(let i in obj){
console.log(obj[i]); //lxc,26
}方法三：map
Object.keys(obj).map((key)=>{ console.log(obj[key])}) //lxc,263.對象合并(會將key值相同的進行覆蓋去重操作）
方法一：Object.assign
const a = { a: 1, b: 4 }
const b = { b: 2, c: 3 }
console.log(Object.assign(a, b));
方法二：擴展運算符
console.log({ ...a, ...b });
注：展開運算符的只進行淺拷貝，不支持深拷貝。Object.assign()方法會修改目標對象。如果不希望修改原對象，需要提供一個空對象作為目標對象。此外，Object.assign()方法只能合并頂層的屬性，不支持遞歸地合并嵌套對象。
4.對象轉(zhuǎn)為數(shù)組
方法一：只需要對象的key或value轉(zhuǎn)化為數(shù)組
通過上面的Object.key、value等方法實現(xiàn)
方法二：通過for in 整理成想要的數(shù)組
方法三：object.entries
總結(jié)
到此這篇關(guān)于Vuejs對象常用操作之取對應(yīng)的值、取key和value值、轉(zhuǎn)數(shù)組及合并等的文章就介紹到這了,更多相關(guān)Vuejs對象常用操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3實現(xiàn)手寫簽名之Vue3-signature的快速應(yīng)用實例
簽名組件在許多應(yīng)用場景中都非常有用,比如在線合同簽署、電子表格簽名等,這篇文章主要介紹了Vue3實現(xiàn)手寫簽名之Vue3-signature的快速應(yīng)用的相關(guān)資料,需要的朋友可以參考下2026-04-04
這篇文章主要為大家介紹了Vue開發(fā)實例探究key的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
在Vue中,有兩種常用的CSS選擇器,用于修改組件樣式：scoped?和?/deep/（或?::v-deep）,它們都是為了實現(xiàn)樣式的作用域,本文小編就來分別給大家介紹一下這兩種選擇器的原理,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
淺析vue3響應(yīng)式數(shù)據(jù)與watch屬性
這篇文章主要介紹了vue3響應(yīng)式數(shù)據(jù)與watch屬性的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了nuxt 路由、過渡特效、中間件的實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue中使用Datav如何完成大屏基本布局問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
詳解keep-alive + vuex 讓緩存的頁面靈活起來
這篇文章主要介紹了keep-alive + vuex 讓緩存的頁面靈活起來，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
詳解從vue-loader源碼分析CSS Scoped的實現(xiàn)
這篇文章主要介紹了詳解從vue-loader源碼分析CSS Scoped的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue自定義指令實現(xiàn)彈窗拖拽四邊拉伸及對角線拉伸效果
小編最近在做一個vue前端項目，需要實現(xiàn)彈窗的拖拽，四邊拉伸及對角線拉伸，以及彈窗邊界處理功能，本文通過實例代碼給大家分享我的實現(xiàn)過程及遇到問題解決方法，感興趣的朋友一起看看吧2021-08-08