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)文章
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過(guò)大、很慢等情況,為了解決這一問(wèn)題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-11-11
VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼,通過(guò)實(shí)例代碼介紹了父頁(yè)面引用的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
去除element-ui下拉框的下拉箭頭的實(shí)現(xiàn)
我們最開(kāi)始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實(shí)現(xiàn),本文就詳細(xì)的介紹一下,感興趣的可以了解一下2023-08-08
Vue封裝DateRangePicker組件流程詳細(xì)介紹
在后端管理項(xiàng)目中使用vue來(lái)進(jìn)行前端項(xiàng)目的開(kāi)發(fā)，但我們都知道Vue實(shí)際上無(wú)法監(jiān)聽(tīng)由第三方插件所引起的數(shù)據(jù)變化。也無(wú)法獲得JQuery這樣的js框架對(duì)元素值的修改的。而日期控件daterangepicker又基于JQuery來(lái)實(shí)現(xiàn)的2022-11-11
vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動(dòng)添加前綴
這篇文章主要介紹了vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動(dòng)添加前綴方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實(shí)現(xiàn)簡(jiǎn)單loading進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單loading進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
大家可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。這篇文章主要介紹了vue表單詳解,需要的朋友可以參考下2018-04-04
vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
剛學(xué)vue時(shí)候?qū)τ谌纸M件和局部組件有點(diǎn)懵,不知道什么時(shí)候用全局,什么時(shí)候用局部,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何自動(dòng)按需引入的相關(guān)資料,需要的朋友可以參考下2021-12-12
Axios是一個(gè)基于Promise的HTTP客戶端，用于瀏覽器和Node.js，這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下2023-07-07