使用括號符號（帶有變量）訪問對象屬性的好處

Question

當需要訪問一些存儲的信息時，雖然可以使用點運算符之類的替代方法，但我在理解為什么以及在何種情況下使用變量來完成相同任務時遇到了一點困難。

例如：

var myObj = {
  prop1: "val1",
  prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

與：

var testObj = {

  12: "Namath",
  16: "Montana",
  19: "Unitas"
};

var playerNumber = 16;      
var player = testObj[playerNumber];

這僅僅是一個偏好問題，還是使用它們各有實際好處？

Answer 1

方括號語法允許您動態訪問屬性名稱，而點語法則不允許。 這是一個如何使用它的示例：

 var data = { prop1: "I am prop 1", prop2: "I am prop 2" }; function clickHandler () { var prop = this.getAttribute("data-property"); console.log(data[prop]); // <-- Dynamically access object properties with [] syntax } var buttons = document.querySelectorAll("[data-property]"); for (var i = 0; i < buttons.length; i++) { var button = buttons[i]; button.addEventListener("click", clickHandler); } 

 <button data-property="prop1">Get Prop 1</button> <button data-property="prop2">Get Prop 2</button> 

括號語法還使您能夠使用對象屬性，這些對象屬性否則為無效的變量名（不建議使用，但可行）。

例如：

 var data = { "property name with spaces": "I'm a property with spaces", "another-invalid-variable-name": "I'm an invalid variable name" }; console.log(data["property name with spaces"]) console.log(data["another-invalid-variable-name"]) 

Answer 2

區分它們的一件事是，用點符號表示，您必須已經知道要訪問的屬性。

考慮可能需要獲取用戶輸入或其他外部因素的實例，以確定要獲取的屬性：

function myFunction(property) {

    var data = {
        thingOne: "1",
        thingTwo: "2"
    }

    return data[property];
}

在上面的函數中，無法寫入return data.property它會尋找一個名為property ！ 您必須使用索引符號來獲取正確的值。

Answer 3

括號語法是動態的-通常用於集合，例如列表，數組，字典等。 對於不可迭代的字段，方法以及您可能要從類訪問的所有其他內容，句點表示法更有用。

例如，您可以使用

var aggregate;
for (int i = 0; i < arrayOfNumbers.length; i++){
    aggregate += arrayOfNumbers[i];
}

Answer 4

它通常基於首選項，但是我喜歡對數組使用括號符號，對對象使用點符號。 但是，如果對象上有一個帶有破折號的屬性，則只能使用括號符號。

foo = { "bar-baz": "value" };
foo["bar-baz"]; //returns "value"
foo.bar-baz; //error

Answer 5

在某些方面，下標語法比點符號更靈活。 在您自己的示例中，顯然不可能執行以下某些操作：

var playerNumber = 16;
var player = testObj.playerNumber; //null; this is equivalent to:
var player = testObj["playerNumber"]; //which is subscripting by the string "playerNumber"
var player = testObj[playerNumber]; //this is valid and produces the expected result: subscripting with the value 16

點表示法受到限制，因為它不能與包含動態值的變量一起使用。 testObj.playerNumber與testObj[playerNumber] 。