04 ES6中对象的简写

在 ES6 中，对象字面量的书写方式进行了一些简化，使得对象的创建更加简洁。以下是 ES6 中对象简写的几种形式：

1. 属性值缩写：
   当对象的属性名和属性值的变量名相同时，可以省略属性值，只写属性名。

   // ES5
   const name = 'Alice';
   const age = 25;
   const person = {
     name: name,
     age: age
   };
   
   // ES6
   const { name, age } = { name: 'Alice', age: 25 };
   

   在上述 ES6 的例子中，name 和 age 直接作为属性名，它们的值由解构赋值提供。

2. 方法定义简化：
   对象中的方法定义不再需要使用 function 关键字，直接写方法名和函数体即可。

   // ES5
   const person = {
     sayHello: function() {
       console.log('Hello!');
     }
   };
   
   // ES6
   const person = {
     sayHello() {
       console.log('Hello!');
     }
   };
   

3. 计算属性名：
   如果属性名是动态生成的，可以使用方括号 [] 来表示。

   const key = 'age';
   const person = {
     [key]: 25
   };
   // person 对象中将有一个属性名为 'age' 的属性，其值为 25
   

4. 对象扩展运算符：
   使用三个点 ... 可以合并多个对象，或将对象中的属性复制到新对象中。

   const person = { name: 'Alice' };
   const details = { age: 25 };
   const personWithDetails = { ...person, ...details };
   // personWithDetails: { name: 'Alice', age: 25 }
   

5. null 值合并操作符：
   如果对象的某个属性可能是 null 或 undefined，可以使用 ??= 操作符提供一个默认值。

   const config = {
     title: null,
     author: 'Unknown'
   };
   
   const defaultConfig = {
     title: 'Default Title',
     author: 'Default Author'
   };
   
   // 使用 null 值合并操作符为 config 提供默认值
   const finalConfig = {
     ...config,
     title: config.title ?? defaultConfig.title,
     author: config.author ?? defaultConfig.author
   };
   // 如果 config.title 是 null，finalConfig.title 将是 'Default Title'
   

6. 属性访问的简写：
   如果访问的对象属性名和变量名相同，可以省略属性名。

   const name = 'Alice';
   const person = {
     name
   };
   
   console.log(person.name); // 输出 'Alice'
   

这些简写特性使得在 ES6 中创建和操作对象更加方便和直观。