在 JavaScript 中使用连字符或空格访问对象属性

作者

在 JavaScript 中使用连字符或空格访问对象属性

Access an Object Property with a Hyphen in JavaScript

使用方括号表示法访问带有连字符或空格的对象属性，例如obj['with-hyphen'].

如果对象的属性包含连字符、空格、特殊字符或以整数开头，则访问它时必须使用连字符。

索引.js
const obj = {
  'with-hyphen': 'value1',
  'with space': 'value2',
  'with.symbol': 'value3',
  '123hello': 'value4',
};

console.log(obj['with-hyphen']); // 👉️ "value1"
console.log(obj['with space']); // 👉️ "value2"
console.log(obj['with.symbol']); // 👉️ "value3"
console.log(obj['123hello']); // 👉️ "value4"

相同的语法可用于更新包含连字符或空格的对象属性。

索引.js
const obj = {
  'with-hyphen': 'value1',
  'with space': 'value2',
  'with.symbol': 'value3',
  '123hello': 'value4',
};

obj['with space'] = 'new value';

console.log(obj['with space']); // 👉️ new value

我们使用
括号表示法
来访问包含连字符的对象属性。

有两种方法可以访问对象中的属性：

  1. 点符号
索引.js
const obj = {name: 'Bobby'};

console.log(obj.name); // 👉️ Bobby

obj.name = 'Alice';

console.log(obj); // 👉️ { name: 'Alice' }
  1. 括号符号
索引.js
const obj = {'first name': 'Bobby'};
console.log(obj['first name']); // 👉️ "Bobby"

obj['first name'] = 'Alice';
console.log(obj); // 👉️ {'first name': 'Alice'}

大多数开发人员使用点表示法访问对象属性，除非该属性包含空格、连字符或以数字或特殊字符开头。

在可以使用点表示法的所有情况下都可以使用括号表示法，但是，如果对象的键包含空格、连字符或者以数字或特殊字符开头，则不能使用点表示法。

在上述所有场景中，您都必须使用括号[]
表示法语法。

索引.js
const obj = {'first name': 'Bobby'};

console.log(obj['first name']); // 👉️ Bobby

类似于读取包含空格或连字符的键的值，我们可以使用括号表示法来更新值。

索引.js
const obj = {'first name': 'Bobby'};

obj['first name'] = 'Alice';

console.log(obj['first name']); // 👉️ Alice

CSS 属性转换为驼峰命名法

在您的 JavaScript 代码中访问时，CSS 属性的名称是驼峰式的。

索引.js
const box = document.getElementById('box');

box.style.marginLeft = '10px';

例如，像margin-leftandmargin-top变成marginLeft
and 的属性marginTop。

# Use bracket notation when the key is stored in a variable

You also have to use bracket notation when the key is stored in a variable.

index.js
const obj = {
  country: 'Chile',
};

const key = 'country';

console.log(obj[key]); // 👉️ "Chile"

If we were to access the property by using obj.key we would be accessing a
property named key on the object.

index.js
const obj = {
  country: 'Chile',
};

const key = 'country';

console.log(obj.key); // 👉️ undefined

We got an undefined value because the object doesn’t have a property named
key.

By using the variable between the square brackets, it gets evaluated and allows
us to access the country property.

# Using dot notation where possible and bracket notation where necessary

You can also mix and match – use bracket notation where necessary and use dot
notation in all other cases.

index.js
const obj = {
  person: {
    'first name': 'Bobby',
  },
};
console.log(obj.person['first name']); // 👉️ "Tom"

obj.person['first name'] = 'Alice';

console.log(obj); // 👉️ { person: { 'first name': 'Alice' } }

We can access the person property in the object using dot notation because it
contains no spaces.

However, the first name property does, so we have to use bracket notation.

The alternative is to be consistent and use bracket notation to access both
keys.

index.js
const obj = {
  person: {
    'first name': 'Bobby',
  },
};
console.log(obj['person']['first name']); // 👉️ "Bobby"

obj['person']['first name'] = 'Alice';


console.log(obj); // 👉️ {person:  {'first name': 'Alice'}}

In my experience, JavaScript developers use dot notation where possible and
bracket notation only when necessary.

This is what most linters suggest as well, as the dot notation syntax is more
concise and easier to read.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: