JavaScript 中的解构

解构赋值是现代 JavaScript 中最灵活、最简单的功能之一。它是一种 JavaScript 表达式，可以将数组中的值、对象的属性，甚至函数的参数解包到不同的变量中。

解构对象

我们经常在代码库的多个地方引用同一个变量，我们希望避免反复声明同一个变量。例如，向服务器发出请求时，可能需要在请求头中包含授权（令牌）。假设我们有一个对象，其中session包含持有的键token和refresh_token

ES5：

const token = session.token;
const refreshToken = session.refresh_token;

ES6：

const {
  token,         // ↓ alias ↓
  refresh_token: refreshToken
} = session;

在上面的 ES6 代码片段中，语法变得更加清晰。就像你可以在一个let语句中声明多个逗号分隔的变量一样，你也可以在解构表达式的花括号内声明多个变量。此外，有时我们想要将属性名称重命名为其他名称；在这种情况下，你需要使用: amAlias。上面我们使用 alias 将属性名称从蛇形命名法更改为驼峰命名法。

函数参数

我们可以在函数参数中使用解构来解包作为函数参数传递的对象中的字段。如果我们想要实现一个只考虑参数某些属性的函数，那么最好事先通过解构来显式地引用这些属性。预先解构所有内容，可以很容易地发现输入是否符合函数的约定。

const getFullName = ({ user }) => 
  user && `${user.firstName} ${user.lastName}`;

const state = {
    user: {
        firstName: 'Mahmoud',
        lastName: 'Elmahdi'   
    }
};

getFullName(state); // Mahmoud Elmahdi

解析函数的返回值

每当有一个函数返回一个对象或数组时，解构都可以使处理返回值的操作更加简洁。以下示例展示了一个getUser返回包含用户数据的对象函数，我们只获取感兴趣的数据，isAdmin而忽略其余数据。

const getUser = () => ({
    id: 156,
    isAdmin: true,
    fullName: 'Mahmoud Elmahdi',
    email: 'abracadabra@email.com',
    languages: ['Arabic', 'English', 'Russian']
});

const { isAdmin } = getUser();
isAdmin && retrieveSensitiveData();

数组解构

解构数组使用方括号而不是花括号。这样就无需在代码中堆砌实现细节x = arr[0]，使用解构可以清晰地表达你的意思，而无需显式引用索引，只需命名值即可。

当解构数组时，我们还可以跳过那些不需要引用的属性

实用技巧

使用属性的扩展运算符在对象文字内有条件地添加属性：

仅当元素为真（非空 null/undefined或为空）时，才在数组文字内添加元素