九、对象增强

ES6 对对象字面量进行了多项增强，包括属性简写、方法简写、计算属性名等。

对象简写（属性简写、方法简写）

属性简写

当对象的属性名与变量名相同时，可以使用简写语法：

const name = 'John';
const age = 30;

// 传统方式
const person1 = {
  name: name,
  age: age
};

// ES6 简写
const person2 = {
  name,
  age
};

console.log(person1); // { name: 'John', age: 30 }
console.log(person2); // { name: 'John', age: 30 }

方法简写

对象的方法也可以使用简写语法：

// 传统方式
const obj1 = {
  greet: function() {
    console.log('Hello!');
  }
};

// ES6 简写
const obj2 = {
  greet() {
    console.log('Hello!');
  }
};

obj1.greet(); // Hello!
obj2.greet(); // Hello!

计算属性名

可以使用方括号 [] 来定义计算属性名：

const key = 'name';
const value = 'John';

// 传统方式
const obj1 = {};
obj1[key] = value;

// ES6 方式
const obj2 = {
  [key]: value
};

console.log(obj1); // { name: 'John' }
console.log(obj2); // { name: 'John' }

表达式作为属性名

const prefix = 'user';

const obj = {
  [`${prefix}Name`]: 'John',
  [`${prefix}Age`]: 30,
  [`${prefix}${1 + 2}`]: 'Additional info'
};

console.log(obj);
// {
//   userName: 'John',
//   userAge: 30,
//   user3: 'Additional info'
// }

Object.assign() 对象合并

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。

基本用法

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 2, c: 3 }

合并对象

const user = {
  name: 'John',
  age: 30
};

const address = {
  city: 'New York',
  country: 'USA'
};

const merged = Object.assign({}, user, address);
console.log(merged); // { name: 'John', age: 30, city: 'New York', country: 'USA' }

深拷贝基础了解

Object.assign() 只做浅拷贝：

const obj = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

const copy = Object.assign({}, obj);

// 修改拷贝对象的嵌套属性
copy.address.city = 'London';

// 原对象也会被修改
console.log(obj.address.city); // London

对象简写实战

实战：创建用户对象

function createUser(name, age, city) {
  // 使用对象简写
  return {
    name,
    age,
    city,
    // 方法简写
    greet() {
      console.log(`Hello, my name is ${this.name}!`);
    },
    // 计算属性名
    [`${name}Age`]: age
  };
}

const user = createUser('John', 30, 'New York');
console.log(user);
// {
//   name: 'John',
//   age: 30,
//   city: 'New York',
//   greet: [Function: greet],
//   JohnAge: 30
// }

user.greet(); // Hello, my name is John!

实战：配置对象

const env = 'production';
const port = 3000;
const debug = false;

const config = {
  env,
  port,
  debug,
  // 方法简写
  getConfig() {
    return {
      environment: this.env,
      serverPort: this.port,
      debugMode: this.debug
    };
  },
  // 计算属性名
  [`${env}Config`]: {
    url: 'https://api.example.com',
    timeout: 5000
  }
};

console.log(config);
console.log(config.getConfig());
console.log(config.productionConfig);

对象增强的优势

1. 代码简洁：减少了重复的代码
2. 可读性高：使对象字面量更加清晰易读
3. 灵活性强：计算属性名提供了更大的灵活性
4. 与其他特性配合：与解构赋值、扩展运算符等特性配合使用效果更佳

通过本章节的学习，你已经掌握了 ES6 中对象的增强特性。这些特性可以使对象代码更简洁、更易读，提高开发效率。