在 ES6 中，destructuring 是一种方便的语法，它允许我们从对象或数组中提取值并赋值给变量。这种语法可以让我们更轻松地处理复杂的数据结构，避免冗长的代码。
对象的 destructuring
对象的 destructuring 能够从对象中提取值并把它们赋值给变量。例如：
const user = { name: 'Tom', age: 18 };
const { name, age } = user;
console.log(name); // 输出：Tom
console.log(age); // 输出：18在这个例子中，我们通过把 user 对象赋值给两个变量 name 和 age，从而取出了它们。
除了将整个对象赋值给新的变量，我们还可以选择性地从对象中提取属性并赋值给变量：
const user = { name: 'Tom', age: 18, gender: 'male' };
const { name, gender } = user;
console.log(name); // 输出：Tom
console.log(gender); // 输出：male对于没有在对象中定义的属性，我们可以使用默认值来避免出现 undefined：
const user = { name: 'Tom', age: 18 };
const { gender = 'male' } = user;
console.log(gender); // 输出：male此外，我们也可以组合多个对象的 destructuring：
const user = { name: 'Tom', age: 18 };
const session = { authToken: '123456' };
const { name } = user;
const { authToken: token } = session;
console.log(name); // 输出：Tom
console.log(token); // 输出：123456变量名与对象属性名不同时，可以使用别名：
const user = { name: 'Tom', age: 18 };
const { name: fullName } = user;
console.log(fullName); // 输出：Tom数组的 destructuring
数组的 destructuring 与对象类似，也可以从数组中提取值并赋值给变量：
const numbers = [1, 2, 3]; const [a, b, c] = numbers; console.log(a); // 输出：1 console.log(b); // 输出：2 console.log(c); // 输出：3
同样地，我们也可以使用默认值和别名：
const numbers = [1, 2]; const [a, b, c = 3] = numbers; console.log(a); // 输出：1 console.log(b); // 输出：2 console.log(c); // 输出：3
如果只需要数组中的部分值，可以使用 rest 运算符：
const numbers = [1, 2, 3, 4, 5]; const [a, b, ...rest] = numbers; console.log(a); // 输出：1 console.log(b); // 输出：2 console.log(rest); // 输出：[3, 4, 5]
destructuring 的应用
destructuring 可以在 ES6 的各种语法中使用，包括函数参数和 for-of 循环，这里提供一些示例：
函数参数的 destructuring
函数参数可以使用 destructuring 来提取和使用对象或数组的值：
function getUserInfo({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: 'Tom', age: 18 };
getUserInfo(user); // 输出：Name: Tom, Age: 18如果函数需要传递多个对象参数，可以对每个对象使用 destructuring：
-- -------------------- ---- ------- -------- --------------- ------ -- - ------ -- - -------------------- ---------------- ------ -------------------- ---------------- ------ - ----- ---- - - ------- --- -- --- ------- ------- ------ -------- -- ------------------- ------ -- --- -- ------- -- -- - -- ------- ---- ---- -----
for-of 循环的 destructuring
for-of 循环可以使用 destructuring 来提取数组中的值：
-- -------------------- ---- ------- ----- ----- - - - ----- ------ ---- -- -- - ----- -------- ---- -- - -- --- ------ - ----- --- - -- ------ - ------------------ -------- ---- --------- - -- --- -- ----- ---- ---- -- -- ----- ------ ---- --
在这个例子中，我们提取了每个用户对象的 name 和 age 属性。
总结
destructuring 是一种很方便的 ES6 语法，可以使代码更具有可读性和简洁性。我们可以通过 destructuring 从对象或数组中提取想要的值，并将它们赋给变量。在函数参数和 for-of 循环中，我们也可以使用 destructuring 来提取值。掌握这种语法可以让我们更好地编写代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64980ad548841e989451c6ed