迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 中不带引号的属性名称/对象键

作者:迹忆客 最近更新:2023/01/09 浏览次数:

有趣的事实:var foo = {h̹̙̦̮͉̩̗̗ͧ̏̊̾eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣cͯ̂͐͏̨̛͔̦̟͈̻o̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢m̴̡̲̭͍͇̼̟̯̦̉̒͠ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṯ̴̷̷̗̼͍̿̿̓̽͐h̙̙̔̄͜:42}; 是有效的 JavaScript。 这可能不是很明显,但真正令人惊讶的是 Cthulhu 风格的属性名称没有被引号括起来。 对此很感兴趣,并且之前写过关于 JavaScript 标识符的类似内容,我决定研究 JavaScript 中的有效属性名称。 什么时候需要引号? 什么时候可以省略引号? 在哪些情况下可以使用点符号而不是括号符号来根据属性的名称获取或设置属性?


有效的属性名称

查看 ECMAScript 规范语法,我们可以看到属性名称可以是标识符名称(即标识符 + 保留字)、字符串文字或数字文字。

标识符名称是标识符的超集; 任何有效的标识符和任何保留字都是有效的标识符名称。

字符串文字是任何有效的字符串,封装在单引号 ' 或双引号 " 中。**'foo'** 、**"bar"** 、**'qu'ux'** 、""(空字符串)和 'Ich \u2665 B\xFCcher' 都是有效的字符串文字。

数字文字可以是十进制文字(例如 0、123、123.、.123、1.23、1e23、1E-23、1e+23、12,但不能是 01、+123 或 -123)或十六进制整数文字 (正则表达式中的 0[xX][0-9a-fA-F]+,例如 0xFFFF0X1230xaBcD)。

从技术上讲,八进制文字(正则表达式中的 0[0-7]+,例如 01001201)也是有效的数字文字,但由于它们在严格模式下是不允许的,因此最好完全避免使用它们。

规范将属性名称定义为字符串:

属性标识符类型用于将属性名称与属性描述符相关联。 属性标识符类型的值是形式对(名称、描述符),其中名称是字符串,描述符是属性描述符值。

这会使使用数字文字作为属性名称有点混乱。 例如,如果我们要使用数字 .12e3 作为(未加引号的)属性名称,它将首先被强制转换为字符串,而实际的对象键将变为“120”。

var object = {
    .12e3: 'wut'
};
object[.12e3]; // 'wut'
object['.12e3']; // undefined
object['120']; // 'wut'

// Let’s try another numeric literal:
object = {
    12e34: 'heh'
};
object[12e34]; // 'heh'
object['12e34']; // undefined
object[1.2e35]; // 'heh'
object['1.2e35']; // undefined
object[1.2e+35]; // 'heh'
object['1.2e+35']; // 'heh'

虽然我们可以轻松检查任何数字的字符串值——String(number)(number).toString()——但坚持使用字符串文字或属性名称的标识符名称绝对更简单。

注意 :ECMAScript 3 不允许使用不带引号的保留字作为属性名称。 这是 ES3 保留字的完整列表:abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final , 最后, float, for, function, goto, if, implements, import, in, instanceof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch , synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, and with。 如果向后兼容性是一个问题,请避免将它们用作未加引号的属性名称。


什么时候可以省略引号?

除非对象键是数字文字或有效的标识符名称,否则我们需要将其引用以避免抛出语法错误。 换句话说,如果属性名称是数字文字或有效的标识符名称,则只能省略引号。 当然,如果属性名是一个字符串文字,它已经被定义引用了。

var object = {
    // `abc` is a valid identifier; no quotes are needed
    abc: 1,
    // `123` is a numeric literal; no quotes are needed
    123: 2,
    // `012` is an octal literal with value `10` and thus isn’t allowed in strict mode; but if you insist on using it, quotes aren’t needed
    012: 3,
    // `π` is a valid identifier; no quotes are needed
    π: Math.PI,
    // `var` is a valid identifier name (although it’s a reserved word); no quotes are needed
    var: 4,
    // `foo bar` is not a valid identifier name; quotes are required
    'foo bar': 5,
    // `foo-bar` is not a valid identifier name; quotes are required
    'foo-bar': 6,
    // the empty string is not a valid identifier name; quotes are required
    '': 7
};

JSON 只允许用双引号 " 引起来的字符串文字作为属性名称。


什么时候可以使用点符号?

要根据属性名称从对象获取或设置值,我们始终可以使用括号表示法。 假设我们想通过这种方式从上一个示例中的对象中获取属性名称 abc 的值:

object['abc']; // 1

括号表示法可以安全地用于所有属性名称。

我们可能知道,在某些情况下可以使用另一种方法:点表示法。

object.abc; // 1

点符号只能在属性名称是有效标识符名称时使用。 它不能用于作为数字文字的属性名称,或用于不是有效标识符名称的字符串。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

JavaScript POST

发布时间:2024/03/23 浏览次数:96 分类:JavaScript

本教程讲解如何在不使用 JavaScript 表单的情况下发送 POST 数据。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便