对象字面量增强写法

ES6(ECMAScript 2015)为JavaScript的对象字面量引入了多项增强特性,使对象创建和操作更加简洁和强大。这些改进不仅提高了代码的可读性,还减少了冗余代码。以下是ES6中对象字面量的主要增强写法:

1. 属性简写

当属性名和变量名相同时,可以省略属性值:

javascript 复制代码
// ES5
var name = 'Alice';
var age = 25;
var person = {
  name: name,
  age: age
};

// ES6
const name = 'Alice';
const age = 25;
const person = {
  name,  // 等同于 name: name
  age    // 等同于 age: age
};

2. 方法简写

对象方法的定义可以省略function关键字和冒号:

javascript 复制代码
// ES5
var obj = {
  sayHello: function() {
    console.log('Hello');
  }
};

// ES6
const obj = {
  sayHello() {  // 更简洁的方法定义
    console.log('Hello');
  }
};

3. 计算属性名

可以使用表达式作为属性名,用方括号[]包裹:

javascript 复制代码
// ES5
var prefix = 'user_';
var obj = {};
obj[prefix + 'name'] = 'Alice';
obj[prefix + 'age'] = 25;

// ES6
const prefix = 'user_';
const obj = {
  [prefix + 'name']: 'Alice',  // 动态属性名
  [prefix + 'age']: 25
};

4. 对象展开运算符(ES2018)

虽然不是ES6的一部分,但对象展开运算符(...)是后续版本中对对象操作的重要增强:

javascript 复制代码
const defaults = { color: 'red', size: 'medium' };
const userSettings = { size: 'large' };

// 合并对象,后面的属性会覆盖前面的
const combined = { ...defaults, ...userSettings };
// { color: 'red', size: 'large' }

5. 原型设置

ES6提供了更直接的方式来设置对象的原型:

javascript 复制代码
const parent = {
  greet() {
    console.log('Hello from parent');
  }
};

// ES5
var child = Object.create(parent);
child.name = 'Child';

// ES6
const child = {
  __proto__: parent,  // 直接设置原型
  name: 'Child'
};

6. super关键字

在对象方法中,可以使用super来访问原型上的方法:

javascript 复制代码
const parent = {
  greet() {
    console.log('Hello from parent');
  }
};

const child = {
  __proto__: parent,
  greet() {
    super.greet();  // 调用父对象的方法
    console.log('Hello from child');
  }
};

实际应用示例

javascript 复制代码
function createUser(name, age, gender) {
  // 使用属性简写和方法简写
  return {
    name,
    age,
    gender,
    
    // 计算属性名
    ['is' + gender.charAt(0).toUpperCase() + gender.slice(1)]: true,
    
    // 方法简写
    introduce() {
      console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
    }
  };
}

const user = createUser('Bob', 30, 'male');
console.log(user.isMale);  // true
user.introduce();          // Hi, I'm Bob, 30 years old.

ES6的对象字面量增强写法大大简化了对象的创建和操作,使代码更加简洁明了。这些特性在现代JavaScript开发中被广泛使用,是每个开发者都应该掌握的基础知识。