場(chǎng)景：已知對(duì)象的某屬性，我們需要獲取對(duì)象中的屬性值

js獲取對(duì)象屬性值的方法

• 通過 . 獲取
• 通過 [ ] 獲取

        let person = {
            name: "bob", age: 18
        };
        // 通過 [] 獲取  bob
        console.log(person['name']);  // 加引號(hào)，識(shí)別為屬性去對(duì)象中查找
        // 通過 . 獲取  bob
        console.log(person.name);  

接下來介紹一下兩種方法的不同點(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ì)象中沒有這個(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問對(duì)象中一個(gè)深度嵌套的子屬性，需要驗(yàn)證之間的引用，如：

let nestedProp = obj.first && obj.first.second

為了避免報(bào)錯(cuò)，在訪問obj.first.second之前，要保證 obj.first 的值既不是 null，也不是 undefined。如果只是直接訪問 obj.first.second，而不對(duì) obj.first 進(jìn)行校驗(yàn)，則有可能拋出錯(cuò)誤。

有了可選鏈運(yù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)文章希望大家以后多多支持腳本之家！