Vuejs對(duì)象常用操作之取對(duì)應(yīng)的值、取key和value值、轉(zhuǎn)數(shù)組及合并等
1. 取得某一個(gè)屬性的值
let obj = {'name':'lxc','age':26}方法一：點(diǎn)號(hào)操作符 obj.name
方法二：方括號(hào)操作符：obj[name]
方法三：解構(gòu)賦值 let {name} = obj
...
2.取得對(duì)象的key和value值
let obj = {'name':'lxc','age':26}取Object key值
方法一：Object.keys(obj) //['name','age'] 返回一個(gè)字符串?dāng)?shù)組
方法二：for in
for(let i in obj){
console.log(i); //name,age
}
...Object value值
方法一：Object.value(obj) //['lxc',26] 返回一個(gè)字符串?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.對(duì)象合并(會(huì)將key值相同的進(jìn)行覆蓋去重操作）
方法一：Object.assign
const a = { a: 1, b: 4 }
const b = { b: 2, c: 3 }
console.log(Object.assign(a, b));
方法二：擴(kuò)展運(yùn)算符
console.log({ ...a, ...b });
注：展開(kāi)運(yùn)算符的只進(jìn)行淺拷貝，不支持深拷貝。Object.assign()方法會(huì)修改目標(biāo)對(duì)象。如果不希望修改原對(duì)象，需要提供一個(gè)空對(duì)象作為目標(biāo)對(duì)象。此外，Object.assign()方法只能合并頂層的屬性，不支持遞歸地合并嵌套對(duì)象。
4.對(duì)象轉(zhuǎn)為數(shù)組
方法一：只需要對(duì)象的key或value轉(zhuǎn)化為數(shù)組
通過(guò)上面的Object.key、value等方法實(shí)現(xiàn)
方法二：通過(guò)for in 整理成想要的數(shù)組
方法三：object.entries
總結(jié)
到此這篇關(guān)于Vuejs對(duì)象常用操作之取對(duì)應(yīng)的值、取key和value值、轉(zhuǎn)數(shù)組及合并等的文章就介紹到這了,更多相關(guān)Vuejs對(duì)象常用操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuex 使用及簡(jiǎn)單實(shí)例(計(jì)數(shù)器)
這篇文章主要介紹了Vuex 使用及簡(jiǎn)單實(shí)例(計(jì)數(shù)器)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
VUE 直接通過(guò)JS 修改html對(duì)象的值導(dǎo)致沒(méi)有更新到數(shù)據(jù)中解決方法分析
這篇文章主要介紹了VUE 直接通過(guò)JS 修改html對(duì)象的值導(dǎo)致沒(méi)有更新到數(shù)據(jù)中解決方法,結(jié)合實(shí)例形式詳細(xì)分析了VUE使用JS修改html對(duì)象的值導(dǎo)致沒(méi)有更新到數(shù)據(jù)的原因與解決方法,需要的朋友可以參考下2019-12-12
自定義input組件如何實(shí)現(xiàn)拖拽文件上傳
這篇文章主要介紹了自定義input組件如何實(shí)現(xiàn)拖拽文件上傳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue實(shí)現(xiàn)子組件向父組件傳遞多個(gè)參數(shù)的方法
在Vue框架中,組件間的通信是一個(gè)常見(jiàn)的需求,特別是在子組件需要向父組件傳遞多個(gè)參數(shù)時(shí),合理的通信方式可以顯著提升代碼的可讀性和可維護(hù)性,本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)子組件向父組件傳遞多個(gè)參數(shù),需要的朋友可以參考下2024-10-10
vue arco.design錨點(diǎn)Anchor使用方式
這篇文章主要介紹了vue arco.design錨點(diǎn)Anchor使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
程序員應(yīng)該知道的vuex冷門(mén)小技巧(超好用)
Vue基本用法很容易上手,但是有很多優(yōu)化的寫(xiě)法你就不一定知道了,下面這篇文章主要給大家介紹了關(guān)于程序員應(yīng)該知道的vuex冷門(mén)小技巧的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Vue3中的h函數(shù)及使用小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
開(kāi)發(fā)中遇到bug是在正常不過(guò)了,而程序也基本都是bug堆里爬出來(lái)的,對(duì)于程序員來(lái)說(shuō)bug調(diào)試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關(guān)于Vue環(huán)境搭建報(bào)錯(cuò)整理的相關(guān)資料,需要的朋友可以參考下2022-08-08
在后臺(tái)使用過(guò)程中經(jīng)常會(huì)因?yàn)榘粹o重復(fù)點(diǎn)擊,而造成發(fā)送多次重復(fù)請(qǐng)求 以下方法可以避免這種情況,下面這篇文章主要給大家介紹了關(guān)于vue中如何防止用戶(hù)頻繁點(diǎn)擊按鈕的相關(guān)資料,需要的朋友可以參考下2022-09-09