解构赋值是 ES6 中新增加的一种赋值方式，它可以将数组或对象中的元素取出来，赋值给变量，从而方便我们进行操作。在实际项目开发中，我们可以使用解构赋值来简化代码，提高开发效率。下面我们就来详细了解一下 ES6 中的解构赋值实例。
数组的解构赋值
假如我们有一个数组 [1, 2, 3]，我们可以通过解构赋值把这个数组的元素取出来赋值给变量：
const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
上面的代码中，我们定义了一个数组 arr，并使用解构赋值将数组中的值分别赋值给变量 a、b、c，最后输出了各自的值。
还可以使用默认值，假如数组中没有对应索引的元素，则使用默认值赋值给变量：
const [a, b, c, d = 'default'] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(d); // default
上面的代码中，我们定义了一个数组，使用解构赋值把数组中的元素赋值给变量 a、b、c、d，由于数组中没有对应索引的元素，所以变量 d 被赋值为 'default'。
除了可以直接从数组中取出元素赋值给变量外，我们还可以通过解构赋值交换变量的值，如下所示：
let a = 10; let b = 20; [a, b] = [b, a]; console.log(a); // 20 console.log(b); // 10
以上代码中，我们定义了两个变量 a 和 b，并使用解构赋值交换了它们的值，最后输出了交换后的结果。
对象的解构赋值
除了数组外，我们还可以使用解构赋值从对象中取出属性赋值给变量。假如我们有一个对象 {name: 'Tom', age: 18}，我们可以通过解构赋值将对象的属性分别取出来赋值给变量：
const obj = {name: 'Tom', age: 18};
const {name, age} = obj;
console.log(name); // Tom
console.log(age); // 18上面的代码中，我们定义了一个对象 obj，并使用解构赋值将对象中的属性分别赋值给变量 name、age，最后输出了各自的值。
同样的，我们也可以使用默认值、交换变量的值等操作：
-- -------------------- ---- ------- ----- ------ --- - --- ------ - ------- - ------ ------- ------------------ -- --- ----------------- -- -- -------------------- -- ---- --- - - --- --- - - --- ---- -- - --- ---- --------------- -- -- --------------- -- --
以上代码中，我们从一个对象中取出了两个属性，并使用了默认值、变量交换等操作。
数组和对象嵌套解构赋值
当我们要从一个嵌套的数组或对象中取出元素时，可以使用数组和对象的嵌套解构赋值，如下所示：
-- -------------------- ---- ------- ----- --- - --- --- --- --- ----- --- --- --- -- - ---- --------------- -- - --------------- -- - --------------- -- - --------------- -- - ----- --- - ------ ------ ---- --- ------ -------- ------------- ------ -------- ----- ------ ---- ------ --------- - ---- ------------------ -- --- ----------------- -- -- -------------------- -- ----------
以上代码分别演示了从嵌套的数组和对象中取出元素的操作。
使用解构赋值进行函数参数的赋值
除了可以使用解构赋值将数组或对象中的元素赋值给变量外，我们还可以在函数参数中使用解构赋值，同时进行参数的解构赋值赋值，如下所示：
function printPersonInfo({name, age, gender = 'male'}) {
console.log(`name: ${name}, age: ${age}, gender: ${gender}`);
}
const person = {name: 'Tom', age: 18};
printPersonInfo(person); // name: Tom, age: 18, gender: male以上代码中，我们定义了一个函数 printPersonInfo，函数的形参为一个对象，使用解构赋值将对象中的属性分别赋值给变量 name、age、gender，并默认值为 'male'，最后输出这些属性的值。
结语
以上就是 ES6 中解构赋值的详细介绍，我们可以使用解构赋值从数组或对象中取出元素，并进行操作以简化代码、提高效率。同时，我们还可以在函数参数中使用解构赋值，方便我们处理参数，减少代码量。学会解构赋值是成为一名优秀的前端工程师的必备技能之一，希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67829a71935627c90012a3a8
