ES6 Object属性新的写法实例小结

2023年5月27日上午7:10 • JavaScript

ES6（ECMAScript 2015）以及之后的版本引入了许多新的语法和特性，其中包括了新的对象属性写法。本篇攻略将详细讲解ES6中对象属性新的写法，并通过实例进行说明。

ES6对象属性新的写法

在ES6中，我们可以使用下面的两种新的写法来定义对象属性：

1. 属性名表达式

ES6中新增了属性名表达式的语法，可以让我们在对象中定义变量作为属性名，如下所示：

const key1 = 'name';
const key2 = 'age';
const obj = {
  [key1]: 'Tom', // 等价于 obj.name = 'Tom'
  [key2]: 18,    // 等价于 obj.age = 18
  ['sex']: 'male' // 如果属性名为字符串，也可以使用属性名表达式，等价于 obj.sex = 'male'
};
console.log(obj); // { name: 'Tom', age: 18, sex: 'male' }

在上面的例子中，我们定义了两个变量key1和key2作为属性名，并使用了属性名表达式的语法。属性名表达式要求使用方括号[]将属性名包裹起来，并使用表达式或变量作为属性名。

2. 简洁写法

ES6中还引入了一个简洁写法，可以帮助我们更容易地定义对象属性。使用这个简洁写法，我们可以直接使用变量名作为属性名，并且属性值也可以直接省略不写，如下所示：

const name = 'Tom';
const age = 18;
const obj = {
  name, // 等价于 name: name
  age   // 等价于 age: age
};
console.log(obj); // { name: 'Tom', age: 18 }

在上面的例子中，我们直接使用了变量名name和age作为属性名，省略了属性值并使用了简洁写法。使用这种简洁写法时，属性值会默认使用同名变量的值。

实例说明

下面我们通过两个实例来进一步说明ES6中的对象属性新的写法。

例子一：动态生成属性名

我们经常会遇到这样的情况：需要生成一组属性名相同但属性值不同的对象。在ES6以前，我们需要使用for循环来手动创建这些对象。而在ES6中，我们可以使用属性名表达式的语法来动态生成属性名，使代码更加简洁。示例如下：

function createObject(properties) {
  const obj = {};
  properties.forEach(prop => {
    obj[prop.name] = prop.value; // 使用常规写法创建属性，等价于 obj.prop.name = prop.value
    obj[`${prop.name}Type`] = prop.type; // 动态生成属性名，等价于 obj.prop.nameType = prop.type
  });
  return obj;
}

const properties = [
  { name: 'color', value: 'red', type: 'string' },
  { name: 'size', value: 32, type: 'number' }
];
const obj = createObject(properties);
console.log(obj); // { color: 'red', colorType: 'string', size: 32, sizeType: 'number' }

在上面的例子中，我们使用了属性名表达式的语法，通过动态生成属性名(colorType和sizeType)，使代码实现更加简洁。

例子二：创建方法

我们还可以使用简洁写法来定义对象的方法。这种写法可以让我们更加容易地定义对象的方法，并让代码看起来更加简洁。示例如下：

const obj = {
  name: 'Tom',
  sayHi() { // 使用简洁写法定义方法
    console.log(`Hello, my name is ${this.name}.`);
  }
};
obj.sayHi(); // Hello, my name is Tom.

在上面的例子中，我们使用了简洁写法定义了对象的方法sayHi。使用这种简洁写法时，方法名和function关键字可以省略，直接使用方法名作为属性名，方法体定义在花括号{}中。