点符号 vs 括号符号

两种写法都可以访问对象属性。但问题往往在于我应该使用哪一种🤔。不用再犹豫了，只需遵循 Airbnb 的风格指南即可。始终使用点号。如果要使用变量访问对象属性，请使用方括号👍



// Dot notation vs Bracket notation

const variable = 'cookie';

const snack = {
  cookie: '🍪'
};

// ✅ Dot: access property
snack.cookie;

// ✅ Bracket: access property with variable
snack[variable];

访问对象属性

访问对象属性有两种方式：点和括号。



const obj = {
  name: 'value'
};

// Dot Notation
obj.name; // 'value'

// Bracket Notation
obj['name']; // 'value'

点符号获胜

我记得我第一次学习这个的时候。理解这两种不同的方法很简单，没什么太复杂的。但我担心的从来不是不同的符号。我最大的困惑是，我该用哪一种？🤯

如果你和我一样！以下是具体细节。它们的作用相同。所以规则很简单。默认情况下，只需使用点符号即可。

✅ 点符号🏆

阅读起来更容易
打字速度更快。

点符号的局限性

任何规则总有例外😂。那就让我们来看看有哪些限制吧。

a. 使用标识符时出现问题
b. 使用变量时出现问题

a. 使用 JavaScript 标识符

使用点符号的主要限制之一是它仅适用于有效的标识符。首先，让我定义一下什么是标识符

标识符是代码中用于标识变量、函数或属性的字符序列。

MDN 网络文档

该标识符有以下规则：

区分大小写
可以包含 Unicode 字母
$、、-是允许的
可以使用数字 (0-9)，但不能以数字开头

因此，让我们对其中的一些示例进行抽样，看看当我们使用点符号时会发生什么。



const obj = {
  123: 'digit',
  123name: 'start with digit',
  name123: 'does not start with digit',
  $name: '$ sign',
  name-123: 'hyphen',
  NAME: 'upper case',
  name: 'lower case'
};

笔记：

你可能会注意到，有些属性名我必须用引号引起来。例如：123name。我必须这样做，否则该对象将被视为无效，并会抛出语法错误。

点符号



obj.123;      // ❌ SyntaxError
obj.123name;  // ❌ SyntaxError
obj.name123;  // ✅ 'does not start with digit'
obj.$name;    // ✅  '$ sign'

obj.name-123;  // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError

obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'

看看我怎么巧妙地在obj.'name-123'例子中用了引号。好吧，别用，因为它仍然不起作用😂。

括号表示法

但对于括号表示法来说，这些都不是问题。



obj['123'];     // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'
obj['name123']; // ✅ 'does not start with digit'
obj['$name'];   // ✅ '$ sign'

obj['name-123']; // ✅ 'does not start with digit'

obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'

判决

如果您认为您的属性键是无效的 JavaScript 标识符，请使用括号表示法👍

b. 使用变量访问属性

点符号的另一个限制是处理变量。你绝对应该使用括号符号。注意！当你用括号符号引用变量时，你需要跳过引号。这样你就知道你正在处理的是变量，而不是属性键。



const variable = 'name';

const obj = {
  name: 'value'
};

// Bracket Notation
obj[variable]; // ✅ 'value'

// Dot Notation
obj.variable; // undefined

未定义属性

我想指出一件非常重要的事情。你会注意到，如果我尝试在变量上使用点符号，它会返回undefined。这是因为当你尝试访问一个不存在的属性时，它会返回undefined。



const emptyObj = {};

obj.name; // undefined
obj['name']; // undefined

所以，接下来是需要注意的地方。让我们回到之前的变量对象示例。如果你使用了点符号，它会默认你尝试使用有效的 JavaScript 标识符来访问属性。因为它会返回值，所以你可能会认为一切正常。实际上，确实如此。但如果你的目的是使用变量，它可能会出错。这绝对会成为调试的一大难题。所以一定要小心！



const variable = 'name';


const obj = {

  name: 'value',

  variable: '👻'

};


// Bracket Notation

obj[variable]; // ✅ 'value'


// Dot Notation

obj.variable; // '👻'

判决

使用变量时切勿使用点符号

结论

了解点符号的局限性后，让我们更新我们的规则。

使用点符号。但如果处理无效的标识符或变量，请使用括号符号。

社区意见

@Marcello Nicoletti： [点符号的另一个好处] 它看起来也像其他 C 类语言中的对象用法。对于 C、C# 和 Java 开发者来说，这将更容易阅读和编写。

资源

感谢阅读❤
打个招呼！Instagram | Twitter | Facebook | Medium |博客

鏂囩珷鏉ユ簮锛�https://dev.to/samanthaming/dot-notation-vs-bracket-notation-1l6l