JavaScript 为什么我们应该优先使用方括号运算符而不是点运算符从对象中访问值

在JavaScript中，与点运算符相比，应尽可能多地使用方括号运算符从对象中访问值。让我们首先了解如何通过使用方括号运算符和点运算符从对象中获取值。

方括号运算符： 在方括号运算符中，传递的键名被视为一个变量，并搜索存储在该变量中的键的值。

语法：

objectName[keyName]

点符号表示法： 在点符号表示法中，传递的 keyName 不被视为一个变量，而是在点符号后面找到 keyName 对应的值。

语法：

objectName.keyName

让我们用一个叫做 obj 的对象来举例： { platform: “GFG” }

我们再创建一个变量来保存 obj 的键名，变量名为 store

store = “platform”

使用方括号表示法访问值

obj[store]

输出：GFG

预期输出：GFG

解释：在方括号表示法中，store 被视为一个变量，并被其值“platform”替换，然后在 obj 中搜索该值，因此输出为 GFG。

使用点表示法访问值

obj.platform

输出：GFG

预期输出：GFG

解释：点号后面的 platform 在 obj 中存在，所以输出为 GFG。

obj.store

输出：未定义

预期输出：GFG

注意：输出为未定义，是因为点号后面的值并不被视为变量，而是视为键名直接在 obj 中搜索，而 obj 中并没有 store 这个键名。

示例1： 首先，我们将通过方括号表示法访问值，我们首先创建一个名为 obj 的对象，该对象有一个键名变量，将该键名传递给方括号表示法以访问该值。

Javascript

<script>
    // In the square Operator the keyName
    // that is passed treated as variable 
     
    const obj = {  // object is the key value pair(or dictionary)
        platform: "GeeksforGeeks",
        platformLink: 'https://www.geeksforgeeks.org/',
        contentQuality: 'Excellent',
        emailAddress: 'feedback@geeksforgeeks.org'
    }
    for(let key in obj){
        let store = obj[key]; 
        console.log(store);
    }
</script>

输出:

"GeeksforGeeks"
"https://www.geeksforgeeks.org/"
"Excellent"
"feedback@geeksforgeeks.org"

Explanation: 我们有一个名为obj的对象，并访问该对象中的值。其中key是一个变量，它保存着obj的键，并且我们将该键传递给方括号表示法，以获取存储在该键变量中的键对应的值。

示例2： 现在我们将使用与上述相同的名为obj的对象来访问该对象中的值，使用点表示法。其中键是一个变量，但点表示法将键视为对象自身的键，尝试查找该键对应的值，但该键在定义的obj对象中不存在。

Javascript

<script>
    // In the dot Operator the keyName is not treated as a variable
    const obj = {
        platform: "GeeksforGeeks",
        platformLink: 'https://www.geeksforgeeks.org/',
        contentQuality: 'Excellent',
        emailAddress: 'feedback@geeksforgeeks.org'
    }
    for(let key in obj){
        let store = obj.key;
        console.log(store);
    }
</script>

输出：