JavaScript解构赋值：提升代码可读性与简洁性的利器

引言

JavaScript解构赋值是ES6（ECMAScript 2015）引入的一项重要特性，它允许开发者以简洁直观的方式从数组或对象中提取值并分配给变量。这项功能大大简化了代码的读写，提高了开发效率和可读性。本教程将深入介绍解构赋值的基本语法、进阶用法以及实用技巧，并通过实例演示其在实际编程中的常见应用场景。

数组解构

// 基本数组解构
const arr = [1, 2, 3];
let [first, second, third] = arr;
console.log(first); // 输出：1
console.log(second); // 输出：2

// 不完全解构，剩余部分存入变量
const fullArr = [1, 2, 3, 4, 5];
let [one, two, ...rest] = fullArr;
console.log(rest); // 输出：[3, 4, 5]

// 默认值赋值
const someArr = [1, , 3]; // 注意第二个元素是undefined
let [a = 'defaultA', b = 'defaultB', c] = someArr;
console.log(b); // 输出："defaultB"

// 赋值运算
const arr = [2, 3];
let one, two;
[one, two] = arr;
console.log(one, two); // 输出： 2, 3

与对象解构的情况不同，当你进行赋值运算而非初始化时，不需要用小括号将赋值语句中的解构表达式括起来。左侧的中括号[不会像左侧的大括号{那样容易引起歧义，至少通常情况下不会；

如果解构前面有个函数调用，则 不可以省略分号：

const arr = [2, 3];
let one, two;
console.log("此处函数调用结尾没有用分号结尾")
[one, two] = arr // Uncaught TypeError: Cannot set properties of undefined (setting 'undefined')
console.log(one, two)

上面的示例会运行失败，因为解析器会将 [one, two] 视为属性访问器(内部有逗号的表达式)，无论console.log返回什么，它都将设置返回结果的属性，如一下代码所示：

console.log("此处函数调用结尾没有用分号结尾")[one, two] = arr

经过一系列的运行步骤，代码最终会尝试设置 console.log 返回的结果对象的属性值。因为 console.log 返回 undefined，而你不能设置 undefined 的属性，所以上面的示例运行失败。

对象解构

// 基本对象解构
const user = { name: "Alice", age: 30, city: "New York" };
let { name, age } = user;
console.log(name); // 输出："Alice"

// 赋予新变量名
let { name: userName, age: userAge } = user;
console.log(userName); // 输出："Alice"

// 使用默认值
const userWithoutCity = { name: "Bob", age: 25 };
let { city = "Unknown" } = userWithoutCity;
console.log(city); // 输出："Unknown"

// 深度解构
const nestedObj = { user: { name: "Charlie", age: 35 } };
let { user: { name: deepName } } = nestedObj;
console.log(deepName); // 输出："Charlie"

// 赋值运算
const otherObject = {one: "aaa", two: "sds"};
let one, two;
{ one, two } = getOtherObject(); // 输出： SyntaxError: Unexpected token =
({ one, two } = getOtherObject()); // 输出：{one: 'aaa', two: 'sds'}

上面 赋值运算 有个小“陷阱”：如果你在JavaScript解析器期望输入语句（而不是表达式）的地方进行赋值运算，需要 用小括号将赋值运算表达式括起来，否则解析器会将大括号{视为代码块的开头。

嵌套解构

在复杂数据结构中，可以同时使用数组和对象进行嵌套解构：

const data = [
  {
    id: 1,
    details: {
      name: 'David',
      skills: ['JS', 'React']
    }
  },
  {
    id: 2,
    details: {
      name: 'Eve',
      skills: ['Node.js', 'MongoDB']
    }
  }
];

const [{ details: { name: firstUser } }] = data;
console.log(firstUser); // 输出："David"

解构赋值的应用技巧

交换变量值

let a = 1, b = 2;
[a, b] = [b, a]; // 现在a是2，b是1

函数参数解构

function processUserData({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

processUserData(user); // 直接从user对象解构参数

function example(one, {a, b}, three) {
  console.log(one, a, b, three);
}

example(1, {a: 2, b: 3}, 4); // 1, 2, 3, 4

模块导入解构

import { myFunction, myConstant } from './myModule';

解构匹配模式中的 `rest` 语法

数组解构的 rest 语法

const arr = [1, 2, 3, 4, 5];
const [a, b, ...rest] = arr;
console.log(a); // 输出：1
console.log(b); // 输出：2
console.log(rest); // 输出：[3, 4, 5]

在上述代码中，a 获取了数组中第一个元素值， b 获取了数组中第二个元素值，而 rest 获取了一个包含剩余元素的新数组。在匹配模式中，rest 必须位于末尾（正如 rest 参数需要位于函数参数列表的末尾）。

对象解构的 rest 语法

const obj = [a: 1, b: 2, c: 3, d: 4, c: 5];
const [a, b, ...rest] = obj;
console.log(a); // 输出：1
console.log(d); // 输出：4
console.log(rest); // 输出：{b: 2, c: 3, e: 5}

对象解构中 rest 变量获取的新对象有原对象中没有被其他匹配模式所获取的属性组成。在上面的示例中，该对象获取了属性 b, c, e，但是没有属性 a和d，因为它们已经被模式中较早的部分所获取。和可迭代对象解构的 rest 一样，此处的 rest 仍然需要位于 匹配代码的末尾。

使用不同的名称进行解构

在 JavaScript 中，使用解构赋值时可以为提取的数组元素或对象属性赋予不同的名称，这被称为 别名（aliasing）。这样做可以在不改变原始数据结构内部键的情况下，为变量提供更具有描述性或者符合上下文的名称。下面通过实例来说明如何进行操作：

对象解构时使用别名

// 原始对象
const user = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

// 使用别名进行解构赋值
const { 
  firstName: first, 
  lastName: last, 
  age: userAge 
} = user;

console.log(first); // 输出：'John'
console.log(last);   // 输出：'Doe'
console.log(userAge); // 输出：30

在这个例子中，firstName 的值被赋给了名为 first 的新变量，lastName 的值被赋给了 last，而 age 则被赋给了 userAge。

数组解构时使用别名

虽然数组元素本身没有名字，但也可以在解构时给它们临时起个别名，特别是在需要与循环结合时：

// 原始数组
const colors = ['red', 'green', 'blue'];

// 使用别名进行解构赋值，并在for循环中使用
for (let [indexAlias = 'colorIndex', color] of colors.entries()) {
  console.log(`Color at index ${indexAlias}: ${color}`);
}

// 输出：
// Color at index colorIndex: red
// Color at index colorIndex: green
// Color at index colorIndex: blue

这里，我们使用了数组的 entries() 方法返回一个索引和值组成的迭代器，然后在解构时将索引部分用 indexAlias 别名代替。这样，在循环体内部可以直接引用 colorIndex 而不是硬编码的索引数字。

总结来说，解构赋值中的别名功能增强了代码可读性和灵活性，使得开发者可以根据具体场景灵活地命名变量，而不受原数据结构的影响。

使用可计算属性名解构

在 JavaScript 中，使用可计算属性名进行解构赋值时，可以动态地决定要解构的对象或数组的键名。虽然数组本身不支持可计算属性名解构，但对象却支持。下面展示如何在对象解构时使用可计算属性名：

// 假设有一个对象
const user = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

// 可计算属性名的例子
const key = 'firstName';
const { [key]: computedFirstName } = user;

console.log(computedFirstName); // 输出：'John'

// 或者在一个表达式中动态生成属性名
const prefix = 'first';
const { [`${prefix}Name`]: dynamicFirstName } = user;
console.log(dynamicFirstName); // 输出：'John'

在这个例子中，我们通过变量 key 和字符串模板来创建了一个可计算的属性名，并将其用于解构赋值。computedFirstName 的值来自对象 user 中与 key 变量内容相同的属性名所对应的值。

需要注意的是，在解构过程中使用的可计算属性名必须是已存在于目标对象中的有效属性，否则其结果将为 undefined。同时，这种特性使得我们可以灵活地根据运行时条件来提取和重命名对象的属性。

常见案例

处理函数返回值

当函数返回一个数组或对象时，解构赋值可以帮助我们快速地提取需要的数据。
简化迭代器结果处理

在for-of循环中对生成器或其他可迭代对象进行解构。
避免重复属性访问

当频繁引用同一对象中的多个属性时，解构可以在声明阶段一次性完成这些属性的提取。
REST参数与剩余数组元素结合

在函数参数列表中结合解构和剩余参数，可以轻松处理不定数量的参数。

写在最后

通过以上内容的学习和实践，你将能够熟练运用 JavaScript 解构赋值这一强大的工具来优化代码质量，提高开发效率，并写出更为优雅且易于维护的JavaScript 程序。

喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~

原文链接：https://juejin.cn/post/7346519210724818978 作者：梁三石