ES6 中对象的解构赋值具体操作及其使用场景-JavaScript中文网-JavaScript教程资源分享门户

1. 什么是对象的解构赋值？

在 ES6 之前，我们要对一个对象进行赋值时，需要逐一指定对象的属性，如下所示：

var person = {name: 'Lucas', age: 25};
var name = person.name;
var age = person.age;
console.log(name, age); // 'Lucas' 25

这种方式相当麻烦，尤其是在对象属性较多的时候。ES6 中引入了对象的解构赋值，可以方便地将一个对象的属性值赋值给变量，如下所示：

const person = {name: 'Lucas', age: 25};
const {name, age} = person;
console.log(name, age); // 'Lucas' 25

2. 对象的解构赋值的使用场景

2.1. 从函数返回多个值

在某些情况下，我们希望函数返回多个值，以前的做法是将多个值组合成一个数组或对象返回，然后再对数组或对象进行解构。而使用对象的解构赋值，可以更加简洁地实现这一功能。

例如，下面的函数返回了一个包含学生姓名、考试成绩和班级的对象：

function getStudentInfo() {
  return {
    name: 'Lucas',
    score: 98,
    class: 'A'
  }
}

使用解构赋值可以轻松地将对象属性赋值给变量：

const {name, score, class: className} = getStudentInfo();
console.log(name, score, className); // 'Lucas' 98 'A'

其中，对于 class 属性，使用了别名 className，是因为 class 是 JavaScript 中的保留字，在某些场景下会出现问题。

2.2. 函数参数的默认值

在 ES6 中，函数参数可以设置默认值，例如：

function printPerson(person = {name: 'Lucas', age: 25}) {
  console.log(person.name, person.age);
}

但是，当我们要重载某个参数时，如果该参数的默认值为复杂类型，将会变得比较麻烦，而使用解构赋值可以更加方便地实现参数的默认值：

function printPerson({name = 'Lucas', age = 25} = {}) {
  console.log(name, age);
}

3. 对象的解构赋值的具体操作

3.1. 基本赋值

对象的解构赋值一般通过花括号 {} 来实现，左边的变量名对应右边对象的属性名。

const person = {name: 'Lucas', age: 25};
const {name, age} = person;

在上面的例子中，name、age 就是左边的变量名，person 是右边的对象。

3.2. 嵌套赋值

对于嵌套的对象，可以通过多重解构来进行赋值：

const parent = {
  name: 'Tom',
  child: {
    name: 'Lucas',
    age: 2
  }
}
const {name: parentName, child: {name: childName, age: childAge}} = parent;

在上面的例子中，parentName 对应 parent 对象中的 name 属性，childName 对应 parent 对象中的 child 对象中的 name 属性，childAge 对应 parent 对象中的 child 对象中的 age 属性。

3.3. 默认值

对于对象中没有的属性，在解构时可以通过指定默认值来进行处理：

const person = {name: 'Lucas'};
const {name, age = 20} = person;
console.log(name, age); // 'Lucas' 20

在上面的例子中，person 对象中没有 age 属性，但是在解构时通过指定默认值 20 来进行了赋值。

3.4. 属性重命名

在解构时，可以通过使用冒号 : 来对属性进行重命名：

const person = {name: 'Lucas', age: 25};
const {name: personName, age: personAge} = person;
console.log(personName, personAge); // 'Lucas' 25

在上面的例子中，name 和 age 属性被重命名为 personName 和 personAge。

4. 总结

本文介绍了 ES6 中对象的解构赋值，主要从定义、使用场景和具体操作三个方面进行了阐述。对象的解构赋值可以方便地将一个对象的属性值赋值给变量，在某些场合下非常有用。在实际编程中，需要灵活运用对象的解构赋值，以提高代码的可读性和效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652d61d57d4982a6ebeba3ab