在 ES2019 中，新增了一项非常有用的特性——捕获绑定语句（Capturing Binding Patterns）。该特性可以让我们在解构赋值时，将解构的值绑定到一个变量上，同时在该变量的作用域内进行操作。
什么是捕获绑定语句
捕获绑定语句是一种解构赋值的语法，它允许我们在解构赋值时，将解构的值绑定到一个变量上。这个变量可以被用于后续的操作，包括赋值、函数调用等。
捕获绑定语句的语法如下：
let { [identifier]: variable } = expression;其中，identifier 是一个标识符，variable 是一个变量名，expression 是一个可解构的表达式。在这个语法中，我们将 expression 解构为一个对象，并将对象中的 identifier 属性的值绑定到 variable 变量上。
捕获绑定语句的应用场景
捕获绑定语句可以用于很多场景，下面介绍一些常见的应用场景。
确保变量作用域
在 JavaScript 中，变量的作用域是非常重要的。使用捕获绑定语句可以确保变量的作用域，避免变量名的冲突。
let x = 1;
{
let { x: y } = { x: 2 };
console.log(y); // 输出 2
}
console.log(x); // 输出 1在上面的代码中，我们定义了一个变量 x，然后在一个块级作用域中，使用捕获绑定语句将对象 { x: 2 } 中的 x 属性的值绑定到变量 y 上。在块级作用域中，我们可以使用变量 y 来操作这个值，而不会影响到外部作用域中的变量 x。
简化代码
捕获绑定语句可以简化代码，使代码更加易读。
const obj = { name: 'Alice', age: 18 };
// 传统写法
const name = obj.name;
const age = obj.age;
// 使用捕获绑定语句
const { name, age } = obj;在上面的代码中，我们使用传统的方式将对象 obj 中的属性值赋值给变量 name 和 age，然后使用捕获绑定语句将这个过程简化。
解构嵌套对象
使用捕获绑定语句可以解构嵌套对象，使代码更加简洁。
-- -------------------- ---- -------
----- --- - -
----- --------
---- ---
-------- -
----- ----------
------- ---------- -------
-
--
----- - ----- ---- -------- - ----- ------ - - - ----在上面的代码中，我们使用捕获绑定语句将对象 obj 中的属性值解构到变量中，其中 address 属性又是一个对象，我们用 address: { city, street } 的语法将其解构到 city 和 street 变量中。
捕获绑定语句的示例代码
下面给出一个完整的示例代码，使用捕获绑定语句将数组中的偶数和奇数分别赋值给两个变量。
-- -------------------- ---- ------- ----- --- - --- -- -- -- -- --- --- ---- - --- --- --- - --- --- ------ --- -- ---- - ----- - ---- - - --- - - ------ - ------- --- - - - ----- --- -- -------------- - ------------------ -- -- --- -- -- ----------------- -- -- --- -- --
在上面的代码中，我们定义了一个数组 arr，然后使用捕获绑定语句将数组中的偶数和奇数分别赋值给两个变量 even 和 odd。在循环中，我们使用了三元表达式，根据当前元素的奇偶性，选择将其加入到 even 还是 odd 数组中。
总结
捕获绑定语句是 ES2019 中非常有用的一项特性，可以用于确保变量作用域、简化代码、解构嵌套对象等场景。在实际项目中，我们可以灵活运用该特性，写出更加简洁、易读、易维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6559ee3dd2f5e1655d45642e