[JS] Javascript 中的句号标记法和方括号标记法

在Javascript中，所有东西都是一个对象。简单说，这意味着任何变量都可以将其他对象作为属性。在Javascript中有两种访问属性的方法，本文就将阐述这两种方法并将它们做一个比较。

-- David Dorward

在JS中句号标记法是最常见的一种属性访问方法，即把属性名称写在一个完整的字符串后面。

 

例如：

<form id="myForm" action="/">
    <div><input name="foo"></div>
</form>

 

我们可以这样写：

var myForm = document.getElementById("myForm");
var input = myForm.foo;

 

在以上示例，我们以函数的形式调用document对象的getElementById属性，随后我们选取了form的foo属性。

 

方括号标记法让我们可以做同样的事，但是语法上不同：

var myForm = document["getElementById"]("myForm");
var input = myForm["foo"];

 

与句号标记法相比，这显得太繁琐。但为什么我们还需要方括号标记法？原因有二。

 

原因一：方括号标记法让我们可以使用特殊的字符，而这些字符在句号标记法中是有特殊含义的。

<form id="myForm">
  <div><label>
    <input type="checkbox" name="foo[]" value="1"> 1
  </label></div>
  <div><label>
    <input type="checkbox" name="foo[]" value="2"> 2
  </label></div>
  <div><label>
    <input type="checkbox" name="foo[]" value="3"> 3
  </label></div>
</form>

 

这个例子是向一个PHP脚本提交表单，并使用标准PHP方法来指出存在多个控制器使用同一个名称。这要求在控制器名称中使用方括号，而句号标记法无法引用这种控制器名称。

 

以下为错误示例：

var inputs = myForm.foo[];

 

方括号标记法则可以成功表达：

var inputs = myForm["foo[]"];

 

因为方括号是作为字符串的一部分，因此它们的特殊含义就不会体现出来。

 

原因二：使用方括号标记法的第二个好处是处理变量名称。

for (var i = 0; i < 10; i++) {
    doSomething(myForm["myControlNumber" + i]);
}

 

查看来源