在 ES6 中,对象字面量的书写方式进行了一些简化,使得对象的创建更加简洁。以下是 ES6 中对象简写的几种形式:
-
属性值缩写:
当对象的属性名和属性值的变量名相同时,可以省略属性值,只写属性名。// ES5 const name = 'Alice'; const age = 25; const person = { name: name, age: age }; // ES6 const { name, age } = { name: 'Alice', age: 25 };
在上述 ES6 的例子中,
name
和age
直接作为属性名,它们的值由解构赋值提供。 -
方法定义简化:
对象中的方法定义不再需要使用function
关键字,直接写方法名和函数体即可。// ES5 const person = { sayHello: function() { console.log('Hello!'); } }; // ES6 const person = { sayHello() { console.log('Hello!'); } };
-
计算属性名:
如果属性名是动态生成的,可以使用方括号[]
来表示。const key = 'age'; const person = { [key]: 25 }; // person 对象中将有一个属性名为 'age' 的属性,其值为 25
-
对象扩展运算符:
使用三个点...
可以合并多个对象,或将对象中的属性复制到新对象中。const person = { name: 'Alice' }; const details = { age: 25 }; const personWithDetails = { ...person, ...details }; // personWithDetails: { name: 'Alice', age: 25 }
-
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'
-
属性访问的简写:
如果访问的对象属性名和变量名相同,可以省略属性名。const name = 'Alice'; const person = { name }; console.log(person.name); // 输出 'Alice'
这些简写特性使得在 ES6 中创建和操作对象更加方便和直观。
标签:ES6,const,name,04,title,age,person,简写,属性 From: https://blog.csdn.net/gt8011/article/details/140574887