ES6对象功能强大，来快速掌握它的精髓！

2023-10-31 20:51:19

ES6中对象扩展了ES5中对象的很多不足，带来了很多新的概念和特性，使得对象的功能更加强大，使用起来更加便捷。本文将对ES6中对象扩展的内容进行详细介绍，帮助你快速掌握ES6对象精髓。

一、ES6对象属性扩展

属性简洁写法

在ES5中，如果一个对象的属性和本地变量同名，则需要使用this来访问该属性。例如：

var person = {
    name: 'John Doe',
    age: 30
};

function greet() {
    console.log(this.name + ' is ' + this.age + ' years old.');
}

greet(); // John Doe is 30 years old.

在ES6中，可以使用属性简洁写法来简化代码。该写法允许你在对象中直接使用属性名，而无需使用this关键字。例如：

var person = {
    name: 'John Doe',
    age: 30,
    greet() {
        console.log(this.name + ' is ' + this.age + ' years old.');
    }
};

person.greet(); // John Doe is 30 years old.

属性默认值

在ES6中，可以为对象的属性设置默认值。例如：
```
var person = {
    name: 'John Doe',
    age: 30,
    gender: 'male'
};

var person2 = {
    name: 'Jane Doe'
};

console.log(person.gender); // male
console.log(person2.gender); // undefined
```
在上面的示例中，person对象的gender属性具有默认值male，因此即使person2对象没有gender属性，也可以访问该属性并获取其默认值。
属性计算名称

在ES6中，可以使用计算名称来定义对象的属性。例如：
```
var person = {
    ['first name']: 'John',
    ['last name']: 'Doe',
    age: 30
};

console.log(person['first name']); // John
console.log(person['last name']); // Doe
```
在上面的示例中，person对象使用计算名称定义了first name和last name属性。这些属性的名称是动态计算的，因此可以根据需要进行更改。

二、ES6对象方法扩展

箭头函数

箭头函数是ES6中引入的一种新的函数语法。箭头函数可以简化代码，使其更加简洁易读。例如：
```
var person = {
    name: 'John Doe',
    age: 30,
    greet: () => {
        console.log(this.name + ' is ' + this.age + ' years old.');
    }
};

person.greet(); // John Doe is 30 years old.
```
在上面的示例中，person对象使用箭头函数定义了greet方法。箭头函数不需要使用function关键字，并且可以使用=>符号来简化代码。

扩展运算符...

扩展运算符...可以将一个数组或对象展开为多个参数或属性。例如：

var person = {
    name: 'John Doe',
    age: 30,
    greet() {
        console.log(this.name + ' is ' + this.age + ' years old.');
    }
};

var person2 = {
    ...person,
    gender: 'male'
};

console.log(person2.name); // John Doe
console.log(person2.age); // 30
console.log(person2.gender); // male

在上面的示例中，扩展运算符...将person对象展开为多个属性，并将其赋值给person2对象。这使得person2对象具有person对象的所有属性，以及一个新的gender属性。

三、ES6对象其他扩展

对象解构

对象解构是ES6中引入的一种新的语法，允许你将对象中的属性解构为变量。例如：
```
var person = {
    name: 'John Doe',
    age: 30,
    gender: 'male'
};

const { name, age, gender } = person;

console.log(name); // John Doe
console.log(age); // 30
console.log(gender); // male
```
在上面的示例中，对象解构将person对象中的name、age和gender属性解构为变量。这使得你可以更轻松地访问对象的属性。
扩展运算符...

扩展运算符...可以将一个数组或对象扩展为多个参数或属性。例如：
```
var person = {
    name: 'John Doe',
    age: 30,
    gender: 'male'
};

const person2 = {
    ...person
};

console.log(person2.name); // John Doe
console.log(person2.age); // 30
console.log(person2.gender); // male
```
在上面的示例中，扩展运算符...将person对象扩展为多个属性，并将其赋值给person2对象。这使得person2对象具有person对象的所有属性。
Symbol

Symbol是ES6中引入的一种新的原始类型。Symbol值是唯一的，不能被更改。Symbol值可以用来作为对象的属性名，以避免属性名冲突。例如：
```
const person = {
    name: 'John Doe',
    age: 30,
    gender: 'male'
};

const symbol = Symbol('secret');

person[symbol] = 'secret value';

console.log(person[symbol]); // secret value
```
在上面的示例中，Symbol值被用作对象的属性名。这使得person对象具有一个名为secret的属性，该属性的值为secret value。

四、ES6对象继承

ES6中，可以使用class关键字来定义对象类，并且可以使用extends关键字来实现继承。例如：

class Person {
    constructor(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    greet() {
        console.log(this.name + ' is ' + this.age + ' years old.');
    }
}

class Student extends Person {
    constructor(name, age, gender, school) {
        super(name, age, gender);
        this.school = school;
    }

    study() {
        console.log(this.name + ' is studying at ' + this.school);
    }
}

const person = new Person('John Doe', 30, 'male');
person.greet(); // John Doe is 30 years old.

const student = new Student('Jane Doe', 20, 'female', 'Harvard University');
student.greet(); // Jane Doe is 20 years old.
student.study(); // Jane Doe is studying at Harvard University.