点和方括号表示法

Posted 2023-02-22

【中文标题】点和方括号表示法

【英文标题】：Dot and Square Bracket Notation

【发布时间】：2017-06-07 16:01:10

【问题描述】：

我试图了解之间的区别。在查看 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]);

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

---

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

【问题讨论】：

javascript property access: dot notation vs. brackets?的可能重复

查看整个对象，而不仅仅是您修改的属性。

obj.key 表示obj 的属性key（字面意思）。 obj[key] 表示其键存储在变量key 的obj 中的属性。有明显的区别。使用obj.key 会覆盖相同的属性，因此您不能同时设置名称和年龄。只需使用console.log(obj) 查看您的对象。 name 和 age 不会改变，您将拥有另一个无意义的属性 key，其中包含一些数字或一些字符串。

@Xufox 感谢您抽出宝贵时间。这行真的帮助了我-“obj.key 表示 obj 的属性键（字面意思）。obj[key] 表示其键存储在 obj 的变量键中的属性。”有时人们会忽略非常明显的事情，除非有人以正确的方式引导和指出它们......所以非常感谢朋友。

【参考方案1】：

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

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

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

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 

【讨论】：

嘿，Frxstrem，非常感谢你，你的例子和你的解释消除了我对这个话题的所有疑虑，现在真是如释重负...... :D 非常感谢......跨度>

【参考方案2】：

从/在 JavaScript 对象中访问/创建属性可以通过两种方式完成

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

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

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

【讨论】：

这一行对我很有帮助，“只要某些属性未定义，即对象中不存在并且您尝试访问它，您将得到未定义”