{site_name}

{site_name}

🌜 搜索

ES6 对象的扩展是指在 ECMAScript 6 标准中提供了一些新特性,使得对象的声明、使用和操作更加方便和灵活

前端 𝄐 0
es6对象操作,es6对象扩展运算符,es6对象简写,es6 object新方法,es6的新特性promise对象的设计初衷,es6object
ES6 对象的扩展是指在 ECMAScript 6 标准中提供了一些新特性,使得对象的声明、使用和操作更加方便和灵活。

以下是 ES6 对象的扩展的一些常用特性及其例子:

1. 属性简写

ES6 允许在对象字面量中使用简写语法来声明属性。即如果一个属性的键和值相同,则可以只写一个,JavaScript 引擎会自动将其解析为键和值相同的属性。


// ES5
var name = 'Tom';
var age = 18;
var person = {
name: name,
age: age
};

// ES6
const name = 'Tom';
const age = 18;
const person = {
name,
age
};


2. 计算属性名

ES6 允许使用表达式作为对象的属性名,这些表达式会被计算出一个字符串作为属性名。


const obj = {
[key + 'name']: 'Tom',
[key + 'age']: 18
};


3. 方法简写

ES6 允许在对象字面量中直接声明方法,不再需要使用 function 关键字声明。同时也支持 super 关键字和箭头函数。


const obj = {
sayHello() {
console.log('Hello!');
},
get fullName() {
return this.firstName + ' ' + this.lastName;
},
set fullName(name) {
[this.firstName, this.lastName] = name.split(' ');
}
};


4. 扩展运算符

ES6 引入了扩展运算符 ...,可以将一个对象的所有属性解构出来,然后放到另一个对象中。这对于合并多个对象非常有用。


const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 }; // { x: 1, y: 2, z: 3 }


5. 对象解构赋值

ES6 允许使用对象解构赋值的方式从一个对象中取出若干个属性并赋值给变量。


const person = {
name: 'Tom',
age: 18,
gender: 'male'
};

const { name, age } = person;
console.log(name, age); // Tom 18


6. 对象方法 Object.assign()

ES6 的 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 }