访问对象属性

有两种方法可以访问对象属性：点（.）和括号（[]）。

const obj = {
  name: 'value'
}

// 点符号
obj.name // 'value'

// 括号符号
obj['name'] // 'value'

两个符号都可以访问对象属性。但问题往往是我们应该使用哪一个🤔。这里不需要多做思考，只需要遵循 Airbnb JavaScript 的风格指南即可。

  • 访问属性时使用点符号

其指南使用点符号。而当您想使用变量访问对象属性时，请使用括号符号。

const user = {
  status: true,
  age: 28
}

// bad
const isStatus = user['status']

// good
const isStatus = user.status
  • 而当你访问带有变量的属性时使用括号表示法 
const user = {
  status: true,
  age: 28
}

function getProp(prop) {
  return user[prop]
}

const isStatus = getProp('status')

点符号的局限性

使用标识符

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

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

标识符具有以下规则：

  • 首字母必须是字母、下划线（_）或美元符号（$），不能是数字

  • 除首字母外，其他字符可以是字母、数字、下划线或美元符号（$）

  • 普通标识符（用作变量名、函数名和循环语句中用于跳转的标记）不能是保留字符

  • 在严格模式下，arguments 和 eval 不能用作变量名，函数名或者参数名

上面所说的字母，不只是 ASCII 字母，还包括 Unicode 中的一些字符。但便于移植，字母通常是使用 ASCII 中的字母。

让我们来举一些例子，看看当我们使用点符号时会发生什么。

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['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 标识符作为属性键，请使用括号表示法

使用变量访问属性

点符号的另一个限制是使用变量。你应该使用括号符号。

注意：当引用括号符号中的变量时，需要跳过引号。这就是为什么你知道你在处理一个变量而不是访问属性键。

const variable = 'name'

const obj = {
  name: 'value'
}

obj[variable] // ✅ 'value'
obj.variable // undefined

未定义属性

当您尝试访问不存在的属性时，它将返回 undefined。它不会抛出错误。

const emptyObj = {}

emptyObj.name // undefined
emptyObj['name'] // undefined

只有括号符号适用于变量

让我们回到前面的变量对象示例。如果您使用点表示法，它将假定您正试图使用有效的 JavaScript 标识符访问属性。因为它正在返回一些东西，你可能会认为一切正常。在引擎盖下面，是的。但是如果你打算使用这个变量，它可能会把你甩了。这无疑会让调试头疼。所以要小心！！

const variable = 'name'

const obj = {
  name: 'value',
  variable: '👻'
}

obj[variable] // ✅ 'value'
obj.variable // '👻'

使用变量时不要使用点符号。