点和方括号表示法

Question

我正在尝试了解圆点表示法和方括号表示法之间的区别。在 SO 和其他一些网站上浏览各种示例时，我遇到了这两个简单的示例：

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

var user = {
  name: "John Doe",
  age: 30
};
var key = prompt("Enter the property to modify","name or age");
var value = prompt("Enter new value for " + key);
user[key] = value;
alert("New " + key + ": " + user[key]);

第一个示例 returns y 未定义，如果在第三行我将 obj[x] 替换为 obj.x。为什么不 "hello"

但在第二个示例中，表达式 user[key] 可以简单地替换为 user.key 而不会出现任何异常行为（至少对我而言）。现在这让我很困惑，因为我最近了解到，如果我们想通过存储在变量中的名称访问属性，我们使用 [ ] 方括号表示法。

Answer 1

Accessing/Creation 属性 from/in 一个 JavaScript 对象可以通过两种方式完成

使用点表示法
使用方括号表示法

每当某些属性未定义，即不存在于对象中并且您尝试访问它时，您将得到 undefined（显然，因为它不存在）。

因此，在第一个示例中，您正在访问一个属性，而在第二个示例中，您正在创建一个属性。因此，替换符号不会影响第二个示例中的代码。

Answer 2

在点表示法中，点后的名称是被引用的属性的名称。所以：

var foo = "bar";
var obj = { foo: 1, bar: 2 };

console.log(obj.foo) // = 1, since the "foo" property of obj is 1,
                     //      independent of the variable foo

但是，在方括号表示法中，被引用的属性的名称是方括号中任何内容的 value：

var foo = "bar";
var obj = { foo: 1, bar: 2 };

console.log(obj[foo])   // = 2, since the value of the variable foo is "bar" and
                        //      the "bar" property of obj is 2

console.log(obj["foo"]) // = 1, since the value of the literal "foo" is "foo" and
                        //      the "foo" property of obj is 1

换句话说，点符号 obj.foo 总是等同于 obj["foo"]，而 obj[foo] 取决于变量的值 foo.

在您的问题的具体情况下，请注意点符号和方括号符号之间的区别：

// with dot notation
var obj = { name: "John Doe", age: 30 };
var key = "age";
var value = 60;

obj.key = value; // referencing the literal property "key"
console.log(obj) // = { name: "John Doe", age: 30, key: 60 }


// with square bracket notation
var obj = { name: "John Doe", age: 30 };
var key = "age";
var value = 60;

obj[key] = value; // referencing property by the value of the key variable ("age")
console.log(obj)  // = { name: "John Doe", age: 60 }

点和方括号表示法

Dot and Square Bracket Notation

javascript

syntax

square-bracket