在前端开发中，我们经常需要使用 JavaScript 对象来存储和操作数据。然而，在某些情况下，对象属性的命名可能包含特殊字符，如连字符（-）。这就会导致一些问题，例如无法通过点符号访问属性值。本文将探讨如何在 JavaScript 中引用对象属性中的连字符。
问题描述
考虑以下示例对象：
const myObj = { 'first-name': 'John', 'last-name': 'Doe' };
该对象包含两个属性：first-name 和 last-name，它们都包含连字符。如果要从该对象中获取 first-name 属性的值，最直接的方法是使用点符号：
console.log(myObj.first-name); // 报错
但这样做会导致语法错误，因为 JavaScript 引擎将连字符解释为减号运算符。因此，我们需要使用其他方式来访问这些属性。
使用方括号语法
JavaScript 中还有一种访问对象属性的语法，使用方括号 [ ] 包裹属性名，这种语法可以让我们访问任何属性，甚至是包含特殊字符的属性名。因此，我们可以使用以下代码来获取 first-name 属性的值：
console.log(myObj['first-name']); // "John"
这种语法还可以用于动态属性名，例如：
const propName = 'first-name'; console.log(myObj[propName]); // "John"
使用 ES6 的解构语法
ES6 中新增了一种解构语法，它可以让我们从对象中提取属性，并将其赋值给变量。这种语法同样也支持连字符等特殊字符的属性名。例如：
const { 'first-name': firstName, 'last-name': lastName } = myObj; console.log(firstName); // "John" console.log(lastName); // "Doe"
使用这种语法可以使代码更加简洁和易读。
结论
在 JavaScript 中访问对象属性时，如果属性名包含特殊字符，如连字符，无法使用点符号访问。但是，我们可以使用方括号语法或 ES6 的解构语法来访问这些属性。其中方括号语法比较通用，适用于所有情况，而解构语法则是一种更加简洁和优雅的方式。
参考示例代码：
-- -------------------- ---- ------- ----- ----- - - ------------- ------- ------------ ----- -- --------------------------------- -- ------ ----- -------- - ------------- ----------------------------- -- ------ ----- - ------------- ---------- ------------ -------- - - ------ ----------------------- -- ------ ---------------------- -- -----展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12433
