使用括号符号（带有变量）访问对象属性的好处

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] 。