使用括号表示法(带变量)访问对象属性的好处

时间:2017-01-18 23:35:19

标签: javascript javascript-objects

虽然在需要访问某些存储信息时使用点运算符等替代方法很有意义,但我在理解为什么以及在什么情况下我们会使用变量来完成相同的任务时遇到一些困难。

例如:

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

这只是一个偏好问题,还是使用每个都有实际好处?

5 个答案:

答案 0 :(得分:3)

Bracket语法允许您动态访问属性名称,而点语法则不允许。以下是如何使用它的示例:



<button data-property="prop1">Get Prop 1</button>
<button data-property="prop2">Get Prop 2</button>
&#13;
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"])
&#13;
&#13;
&#13;

支架语法还允许您使用对象属性,否则这些属性是无效的变量名(不推荐使用,但是可行)。

例如:

&#13;
&#13;
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
&#13;
&#13;
&#13;

答案 1 :(得分:2)

区分它们的一点是,使用点表示法,您必须已经知道要访问的属性。

考虑您可能想要获取用户输入的实例或其他一些外部因素来决定要获取的属性:

function myFunction(property) {

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

    return data[property];
}

在上面的函数中,无法编写return data.property - 它会查找名为property的属性!您必须使用索引表示法来获取正确的值。

答案 2 :(得分:1)

支架语法是动态的 - 它通常用于集合,例如列表,数组,字典等。句点表示法对于非可迭代字段,方法以及您可能希望从类中访问的所有其他内容更有用。

例如,您可以使用

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

答案 3 :(得分:1)

它通常基于首选项,但我喜欢对数组使用括号表示法,对象使用点表示法。但是,如果对象上有一个带有破折号的属性,则只能使用括号表示法。

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

答案 4 :(得分:0)

下标语法在几个方面比点符号更灵活。在您自己的示例中,执行以下某些操作显然是不可能的:

testObj.playerNumber

点符号的局限性在于它不能与包含动态值的变量一起使用。 testObj[playerNumber]range完全相同。