Question

实际上我在google上搜索了很多。这是一个非常基本的问题。

这是我的剧本

var test = new Object();
test["test"] = 1;

$("#dot").html(test.test);
$("#bracket").html(test["test"]);

这是我的HTML

<div id="dot"></div>
<div id="bracket"></div>

供参考，此处为http://jsfiddle.net/PWA5G/1/网址。

我的问题是test.test和test["test"]之间的确切差异，因为我的输出相同。

这个问题或主题可能已经重复，但我没有找到任何相关结果。

Answer 1

[]运算符允许您使用不能与.运算符一起使用的属性名称。例如

var test = {};
test["invalid-attr"] = 1;
console.log(test["invalid-attr"]);
# 1
console.log(test.invalid-attr);
# ReferenceError: attr is not defined

当我们使用带有字符串的[]运算符时，它只是通过散列我们传递的属性名来获取与之对应的值。但是，如果属性名称在语法上不有效，则.运算符将失败。

Answer 2

存在一些差异，它允许您使用保留名称...但主要是abc['test']在属性名称可变时有帮助。

像这样：

var a ={};
a.q=2;
a.w=3;
a.e=4;

//on user input

var input = event.key
console.log(a[input]);

Answer 3

仅举例说明box86rowh。另请注意，目标可以是方法，也可以是属性。虽然它有点做作，但它证明了括号表示法的灵活性。

<p><input type="checkbox" id="needsBillingAddress"><label for="needsBillingAddress">Different Billing Address</label></p>

<div id="billingAddress">
   <p>Billing Address goes here</p>
</div>

<script>
    $(function() {
        (showHideBillingAddress = function() {
            $('#billingAddress')[ $('#needsBillingAddress').is(':checked') ? 'show':'hide' ]();
        })();
        $('#needsBillingAddress').click( showHideBillingAddress );
    });
</script>

这是一个证明这一点的小提琴：http://jsfiddle.net/kQ3Hr/

我们在javascript中访问属性的方式之间的差异

3 个答案: