js獲取對(duì)象屬性值的兩種方法使用總結(jié)
場(chǎng)景:已知對(duì)象的某屬性,我們需要獲取對(duì)象中的屬性值
js獲取對(duì)象屬性值的方法
- 通過(guò) . 獲取
- 通過(guò) [ ] 獲取
let person = { name: "bob", age: 18 }; // 通過(guò) [] 獲取 bob console.log(person['name']); // 加引號(hào),識(shí)別為屬性去對(duì)象中查找 // 通過(guò) . 獲取 bob console.log(person.name);
接下來(lái)介紹一下兩種方法的不同點(diǎn)
[ ]運(yùn)算符可以用數(shù)字作為屬性名,點(diǎn)運(yùn)算符不能
let p = { 1: 'Alex', 2: 33 } console.log(p[1]); // Alex console.log(person.1); // 報(bào)錯(cuò) Uncaught SyntaxError: missing ) after argument list
[ ]運(yùn)算符可以用變量作為屬性名,點(diǎn)運(yùn)算符不能
let person = { name: "bob", age: 18 }; let key = 'name'; console.log(person[key]); // bob 不加引號(hào),識(shí)別為變量 console.log(person.key); // undefined
ps:
用變量key獲取對(duì)象中的屬性值時(shí),點(diǎn)運(yùn)算符會(huì)將key視為一個(gè)屬性去對(duì)象中查找,對(duì)象中沒(méi)有這個(gè)屬性,因此為undefined
在用 [ ] 獲取值時(shí),需要注意的是 [ ] 中是否要加引號(hào)
補(bǔ)充:可選鏈運(yùn)算符 ?.
可選鏈運(yùn)算符(?.)允許讀取位于連接對(duì)象鏈深處的屬性的值,而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。?. 運(yùn)算符的功能類似于 . 鏈?zhǔn)竭\(yùn)算符,不同之處在于,在引用為空 (nullish ) (null 或者 undefined) 的情況下不會(huì)引起錯(cuò)誤,該表達(dá)式短路返回值是 undefined。與函數(shù)調(diào)用一起使用時(shí),如果給定的函數(shù)不存在,則返回 undefined。
我們?cè)谠L問(wèn)對(duì)象中一個(gè)深度嵌套的子屬性,需要驗(yàn)證之間的引用,如:
let nestedProp = obj.first && obj.first.second
為了避免報(bào)錯(cuò),在訪問(wèn)obj.first.second之前,要保證 obj.first 的值既不是 null,也不是 undefined。如果只是直接訪問(wèn) obj.first.second,而不對(duì) obj.first 進(jìn)行校驗(yàn),則有可能拋出錯(cuò)誤。
有了可選鏈運(yùn)算符(?.),在訪問(wèn) obj.first.second 之前,不再需要明確地校驗(yàn) obj.first 的狀態(tài),再并用短路計(jì)算獲取最終結(jié)果:
let nestedProp = obj.first?.second;
總結(jié)
到此這篇關(guān)于js獲取對(duì)象屬性值的兩種方法使用總結(jié)的文章就介紹到這了,更多相關(guān)js獲取對(duì)象屬性值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【四】Bootstrap圖標(biāo)的提取和利用
通過(guò)本文主要介紹如何提取Bootstrap的圖標(biāo)信息,存儲(chǔ)到數(shù)據(jù)庫(kù)里面為我所用,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05javascript生成json數(shù)據(jù)簡(jiǎn)單示例分享
這篇文章主要介紹了javascript生成json數(shù)據(jù)示例,需要的朋友可以參考下2014-02-02javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件,實(shí)例分析了javascript檢測(cè)上傳文件類型是否為圖片的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04微信小程序canvas動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas動(dòng)態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10TypeScript 中的 .d.ts 文件詳解(加強(qiáng)類型支持提升開(kāi)發(fā)效率)
.d.ts 文件在 TypeScript 開(kāi)發(fā)中扮演著非常重要的角色,它們讓我們能夠享受到 TypeScript 強(qiáng)大的類型系統(tǒng)帶來(lái)的優(yōu)勢(shì),提高代碼質(zhì)量和開(kāi)發(fā)效率,接下來(lái),我們將深入探討如何為 JavaScript 庫(kù)和自定義模塊創(chuàng)建 .d.ts 文件,以及一些最佳實(shí)踐和注意事項(xiàng),一起看看吧2023-09-09JavaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫法介紹
下面小編就為大家?guī)?lái)一篇JavaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫法介紹。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05