开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

你的代码臃肿吗？想不想提升自己的编码技能，让自己的代码更具可读性和简洁性呢？让我们一起来学习一下ES6的解构技巧吧，一起使用它来编写更干净高效的代码！

1、解构对象

使用解构最常见的方法之一是将对象的属性分配给变量。如：

const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;

解构代码写法：

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

2、解构数组

像对象一样，我们可以使用解构将数组的元素分配给变量。如：

const numbers = [1,2,3];
const first = numbers[0];
const second = numbers[1];
const third = numbers[2];

解构代码写法：

const numbers = [1,2,3];
const [first, second, third] = numbers;

3、默认值

解构允许我们在值未定义的情况下为变量分配默认值。如：

const person = { name: 'John' };
let age = person.age || 25;

解构代码写法：

const person = { name: 'John' };
const { age = 25 } = person;

4、重命名变量

有时，我们要解构的属性或变量名称与我们要在代码中使用的名称不匹配，这种情况下，我们可以使用冒号重命名变量。如：

const person = { firstName: 'John', lastName: 'Doe' };
const first = person.firstName;
const last = person.lastName;

解构代码写法：

const person = { firstName: 'John', lastName: 'Doe' };
const { firstName: first, lastName: last } = person;

5、嵌套解构

解构也可以用于嵌套对象和数组。如：

const data = {
    results: [
        {
            title: 'Article 1',
            author: {
                name: 'John',
                age: 30
            }
        },
        {
            title: 'Article 2',
            author: {
                name: 'Jane',
                age: 25
            }
        }
    ]
};
const firstResultTitle = data.results[0].title;
const firstAuthorName = data.results[0].author.name;
const firstAuthorAge = data.results[0].author.age;

解构代码写法：

const data = {
  results: [
    {
      title: 'Article 1',
      author: {
        name: 'John',
        age: 30
      }
    },
    {
      title: 'Article 2',
      author: {
        name: 'Jane',
        age: 25
      }
    }
  ]
};
const {
results: [{ title: firstResultTitle, author: { name: firstAuthorName, age: firstAuthorAge } }]
} = data;

6、解构函数参数

解构可用于函数参数。如：

function createPerson(options) {
const name = options.name;
const age = options.age;
// ...
}
createPerson({ name: 'John', age: 30 });

解构代码写法：

function createPerson({ name, age }) {
// ...
}
createPerson({ name: 'John', age: 30 });

7、解构和扩散运算符

我们还可以将扩展运算符 (...) 与解构结合使用，以将数组的剩余元素或对象的剩余属性分配给变量。如：

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...others] = numbers;
console.log(others); // [3, 4, 5]

以上就是关于ES6解构的使用，ES6是一个强大的工具，感兴趣的后期可以多看看。