ES6 中的解构赋值是一种非常方便的语法，可以让我们更加简洁、优雅地操作对象和数组。在实际开发中，应用广泛，具有较高的实用价值。本文将介绍解构赋值的基本语法以及几种常见的使用场景和技巧，并提供相关的示例代码。
基本语法
解构赋值允许我们从数组或对象中提取值并赋值给变量，具体语法如下：
数组的解构赋值
let [a, b, c] = [1, 2, 3];
将数组 [1, 2, 3] 中的值分别赋值给变量 a、b 和 c。这相当于以下的写法：
let a = 1; let b = 2; let c = 3;
如果数组中的某些元素不需要赋值，可以用逗号将其占位。例如：
let [a, , c] = [1, 2, 3];
这里用逗号占位了第二个元素，相当于不将其赋值给任何变量。
对象的解构赋值
let {name, age} = {name: 'Tom', age: 18};将对象 {name: 'Tom', age: 18} 中的 name 和 age 属性分别赋值给变量 name 和 age。这相当于以下的写法：
let name = 'Tom'; let age = 18;
如果需要将属性重命名成其他变量名，可以使用冒号 :。例如：
let {name: n, age: a} = {name: 'Tom', age: 18};这里将对象中的 name 属性重命名为 n，将 age 属性重命名为 a。
使用场景与技巧
在实际开发中，解构赋值可以应用于以下几个方面，具有较高的使用价值。
函数参数的解构赋值
函数的参数也可以使用解构赋值，可以让我们更加方便地操作函数参数。
function printPerson({name, age}) {
console.log(`name: ${name}, age: ${age}`);
}
let person = {name: 'Tom', age: 18};
printPerson(person);这里定义了一个名为 printPerson 的函数，它接收一个参数对象并将其中的 name 和 age 属性打印出来。调用该函数时，可以将一个对象传入作为参数，无需手动提取其中的属性。
数组和对象的展开运算符
除了从数组和对象中提取值，解构赋值还可以和展开运算符 ... 结合使用，可以更加方便地实现一些操作。
数组的展开运算符
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4, 5, 6]
这里使用了展开运算符 ... 将两个数组中的元素组合成了一个新的数组。甚至可以在其中添加额外的元素。
let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5, 6]; console.log(arr2); // [1, 2, 3, 4, 5, 6]
对象的展开运算符
let obj1 = {name: 'Tom', age: 18};
let obj2 = {gender: 'Male', ...obj1};
console.log(obj2); // {gender: 'Male', name: 'Tom', age: 18}这里使用了展开运算符 ... 将一个对象中的属性合并到了另一个对象中。如果有重复属性，后面的值会覆盖前面的值。
解构赋值的默认值
在解构赋值时，我们可以为变量提供默认值，如果提取的值为 undefined，则会使用默认值。
数组的默认值
let [a = 1, b = 2, c = 3] = [1, , 3]; console.log(a, b, c); // 1, 2, 3
这里为变量 a 和 c 提供了默认值，如果相应的值为 undefined，则会取默认值。变量 b 没有提供默认值，所以它的值为 undefined。
对象的默认值
let {name, age = 18, gender = 'Male'} = {name: 'Tom', gender: 'Female'};
console.log(name, age, gender); // Tom, 18, Female这里为变量 age 和 gender 提供了默认值，如果相应的属性不存在或值为 undefined，则会取默认值。变量 name 没有提供默认值，所以它必须从对象中提取。
示例代码
为了更好地理解解构赋值的使用和技巧，这里提供一些示例代码：
函数参数的解构赋值
function printPerson({name, age}) {
console.log(`name: ${name}, age: ${age}`);
}
let person = {name: 'Tom', age: 18};
printPerson(person);数组和对象的展开运算符
-- -------------------- ---- ------- --- ---- - --- -- --- --- ---- - --- -- --- --- -------- - --------- --------- ---------------------- -- --- -- -- -- -- -- --- ---- - --- -- --- --- ---- - --------- -- -- --- ------------------ -- --- -- -- -- -- -- --- ---- - ------ ------ ---- ---- --- ---- - -------- ------- --------- ------------------ -- -------- ------- ----- ------ ---- ---
解构赋值的默认值
let [a = 1, b = 2, c = 3] = [1, , 3];
console.log(a, b, c); // 1, 2, 3
let {name, age = 18, gender = 'Male'} = {name: 'Tom', gender: 'Female'};
console.log(name, age, gender); // Tom, 18, Female总结
解构赋值是一种非常方便、实用的语法，可以让我们更加简洁、优雅地操作数组和对象。在实际开发中，解构赋值应用广泛，具有较高的实用价值。本文介绍了解构赋值的基本语法以及几种常见的使用场景和技巧，并提供了相应的示例代码。希望这篇文章对读者有所帮助，能够更好地掌握解构赋值的使用和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490356c48841e9894e60f4c