带引号和不带引号的对象键有什么区别?

266

这两者之间有什么区别吗?

obj = {'foo': 'bar'} 

并且

obj = {foo: 'bar'}
我注意到如果在键中不使用引号,就无法使用-。但这是否真的有所不同呢?如果有,是什么区别?
我注意到当键没有使用引号时,不能在键中使用-。但是这是否会导致差异?如果会,那么差异是什么?
5个回答

178

不,引号并没有什么区别(除非你想使用一个不是JavaScript有效标识符的键)。

顺便提一下,JSON数据交换格式 需要在标识符周围使用双引号(而不允许使用单引号)。


110
实际上,如果您将数值文字用作属性名,引号确实会产生影响。例如,obj = { 12e34: true };obj = { '12e34': true }; 不同。对于前者,您需要通过 obj['1.2e+35'] 访问该属性,而对于后者,则应使用 obj['12e34']。 [请参见我的回答以获取更多详情。] (https://dev59.com/QW855IYBdhLWcg3wbztk#9568622) - Mathias Bynens
1
如果给定a-z的首字母+字母数字,以及许多空格粉丝(如不可见空格或制表符),那么双引号是可选的话,这将是非常棒的。对于不需要深度嵌套的数据非常有用。 - King Friday
3
@MathiasBynens说这对于数字字面量可能会有所不同,但我认为最好的想法是你定义/访问的属性始终会被转换成字符串。所以这不仅仅关于数字字面量,而是任何属性,只要它不是字符串,并且当转换为字符串时,会产生不同的“文本值”。例如,obj[{}]将尝试访问属性'[object Object]'而不是属性'{}',因为({}).toString()'[object Object]'而不仅仅是带引号的{} - Vencovsky

147

以下是有关JavaScript中未用引号括住属性名称/对象键的内容,来源于Mathias Bynens的文章:

只有属性名为数字字面量或有效标识符名称时,才可以省略引号。

[...]

对于所有属性名称,都可以安全地使用方括号表示法。

[...]

仅当属性名称是有效的标识符名称时,才能使用点表示法。

请注意,在ES5中允许将保留字用作未用引号括住的属性名。但出于与ES3的向后兼容性考虑,我建议仍然将其加上引号。

我还制作了一个工具,可告诉您任何给定的属性名称是否可以不用引号和/或使用点表示法。请在mothereff.in/js-properties上尝试它。

Screenshot


9

这里并没有什么区别,只是一种风格问题。这样做的原因之一是可以使用“super”或“class”作为键,因为这些是保留关键字。

有些人可能会尝试传入带有空格的字符串然后调用o ['I can have whitespace'],但我认为这是不好的做法。


3
不,不是针对JavaScript。然而,一些JSON解析器在键周围的引号不存在时会失败。

48
JSON格式中,没有双引号的键是无效的。 - Ned Batchelder

1

有些情况下它们是不同的。例如,如果您正在使用jQuery,并且要创建一个元素时传递参数列表,带引号的单词会变成参数,而不带引号的单词会变成函数。例如,"size"将设置对象的大小属性,而size(没有引号)将调用对象上的size()函数。请参见jQuery(),位于底部附近:

虽然第二个参数很方便,但其灵活性可能会导致意外后果(例如,$( "<input>", {size: "4"} ) 调用.size()方法而不是设置大小属性)。因此,可以将前面的代码块改为:


1
我认为这个例子没有表达出你想表达的意思。你引用的问题是因为jQuery有一个叫做size的方法,而方法size和属性size之间的冲突被选择方法来解决。在jQuery中有时候把_Value_作为字符串或其他类型进行传递会导致行为改变,但从定义一个用双引号括起来的有效属性名与不用引号括起来的属性名之间并不会产生差异。 - Alex Weitzer

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接