場景：已知對象的某屬性，我們需要獲取對象中的屬性值
js獲取對象屬性值的方法
- 通過 . 獲取
- 通過 [ ] 獲取
let person = {
name: "bob", age: 18
};
// 通過 [] 獲取 bob
console.log(person['name']); // 加引號，識別為屬性去對象中查找
// 通過 . 獲取 bob
console.log(person.name);
接下來介紹一下兩種方法的不同點
- [ ]運算符可以用數(shù)字作為屬性名，點運算符不能
let p = {
1: 'Alex', 2: 33
}
console.log(p[1]); // Alex
console.log(person.1); // 報錯 Uncaught SyntaxError: missing ) after argument list
- [ ]運算符可以用變量作為屬性名，點運算符不能
let person = {
name: "bob", age: 18
};
let key = 'name';
console.log(person[key]); // bob 不加引號，識別為變量
console.log(person.key); // undefined
ps：
用變量key獲取對象中的屬性值時，點運算符會將key視為一個屬性去對象中查找，對象中沒有這個屬性，因此為undefined
在用 [ ] 獲取值時，需要注意的是 [ ] 中是否要加引號
- 補充：可選鏈運算符 ?.
可選鏈運算符（?.）允許讀取位于連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 運算符的功能類似于 . 鏈?zhǔn)竭\算符，不同之處在于，在引用為空 (nullish ) (null 或者 undefined) 的情況下不會引起錯誤，該表達(dá)式短路返回值是 undefined。與函數(shù)調(diào)用一起使用時，如果給定的函數(shù)不存在，則返回 undefined。
我們在訪問對象中一個深度嵌套的子屬性，需要驗證之間的引用，如：
let nestedProp = obj.first && obj.first.second
為了避免報錯，在訪問obj.first.second之前，要保證 obj.first 的值既不是 null，也不是 undefined。如果只是直接訪問 obj.first.second，而不對 obj.first 進行校驗，則有可能拋出錯誤。文章來源：http://www.zghlxwxcb.cn/news/detail-431195.html
有了可選鏈運算符（?.），在訪問 obj.first.second 之前，不再需要明確地校驗 obj.first 的狀態(tài)，再并用短路計算獲取最終結(jié)果：文章來源地址http://www.zghlxwxcb.cn/news/detail-431195.html
let nestedProp = obj.first?.second;
到了這里，關(guān)于js獲取對象屬性值的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
