ECMAScript 2018：如何在对象字面量中使用计算属性名-JavaScript中文网-JavaScript教程资源分享门户

在ECMAScript 2015中，我们看到了对象字面量的一些重大改进，比如支持计算属性名。计算属性名让我们能够在对象字面量中使用动态属性名，它们可以是变量、函数调用或任何表达式。

在ECMAScript 2018中，计算属性名得到了进一步的改进。现在，我们可以在对象字面量中使用计算属性名来定义方法和访问器属性。

定义方法

在对象字面量中定义方法时，我们可以使用计算属性名来指定方法名。这允许我们根据需要动态地创建方法名称。

例如，假设我们有一个名为myObj的对象，并且我们想根据用户输入的字符串动态地创建一个方法。我们可以使用计算属性名来实现这一点，如下所示：

const myObj = {
  [getMethodName()]: function() {
    // 方法实现
  }
};

在上面的示例中，getMethodName()是一个返回字符串的函数，它将作为方法名。我们使用计算属性名将函数作为对象字面量的属性。

定义访问器属性

在ECMAScript 2018中，我们还可以使用计算属性名来定义访问器属性。访问器属性是一种特殊的属性，它们是由getter和setter方法定义的。

例如，假设我们有一个名为myObj的对象，并且我们想根据用户输入的字符串动态地创建一个访问器属性。我们可以使用计算属性名来实现这一点，如下所示：

const myObj = {
  get [getPropertyName()]() {
    // getter方法实现
  },
  set [getPropertyName()](value) {
    // setter方法实现
  }
};

在上面的示例中，getPropertyName()是一个返回字符串的函数，它将作为属性名。我们使用计算属性名将getter和setter方法作为对象字面量的属性。

示例代码

下面是一个使用计算属性名定义方法和访问器属性的示例代码：

const myObj = {
  [getMethodName()]: function() {
    console.log('Hello, world!');
  },
  get [getPropertyName()]() {
    return this._value;
  },
  set [getPropertyName()](value) {
    this._value = value;
  }
};

function getMethodName() {
  return 'sayHello';
}

function getPropertyName() {
  return 'myProperty';
}

myObj.sayHello(); // 输出 "Hello, world!"
myObj.myProperty = 42;
console.log(myObj.myProperty); // 输出 42

在上面的示例中，我们定义了一个名为myObj的对象，并使用计算属性名定义了一个方法和一个访问器属性。我们还定义了两个辅助函数getMethodName()和getPropertyName()，它们返回动态名称。

总结

ECMAScript 2018为对象字面量中的计算属性名带来了新的功能。我们可以使用它们来动态地定义方法和访问器属性。这是一个非常有用的功能，它允许我们编写更灵活和动态的代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bf5f79add4f0e0ff8ec475