解构赋值是 ES6 新增的一种语法，用于从数组或对象中提取值，并赋给变量。它是编写 JavaScript 代码时非常有用的一种方式，可以帮助我们更方便地访问对象和数组中的数据。
在本文中，我们将介绍 ES6 解构赋值的一些基本用法、高级用法和一些实际示例，以帮助您更轻松地学习和掌握这种新语法。
基础用法
数组解构赋值
数组解构赋值是从数组中提取值，并将它们赋给变量名。语法是将方括号[]使用于变量声明/定义的左侧。
以下是一个简单的数组解构赋值的示例：
const [a, b, c] = [1, 2, 3] console.log(a) // 1 console.log(b) // 2 console.log(c) // 3
在这个例子中，我们要求将数组[1, 2, 3]中的值分别赋给a，b和c。当我们运行代码时，我们会发现a的值是1，b的值是2，c的值是3。
如果我们只对数组的某些元素感兴趣，可以使用“逗号”跳过不需要的元素：
const [a, , c] = [1, 2, 3] console.log(a) // 1 console.log(c) // 3
在这个例子中，我们使用“逗号”跳过了数组中的第二个元素2，只赋值了数组中的第一个和第三个元素。
如果数组中的元素较多，但我们仅需要其中的一部分，可以使用“剩余参数”（...rest）将剩余的元素赋给一个单独的变量：
const [a, b, ...rest] = [1, 2, 3, 4, 5] console.log(a) // 1 console.log(b) // 2 console.log(rest) // [3, 4, 5]
在这个例子中，我们不仅将数组中的前两个元素赋值给a和b，还将数组中的其余元素存储在rest 变量中。
我们也可以使用解构赋值来交换变量的值，而无需使用临时变量：
let a = 1, b = 2 [a, b] = [b, a] console.log(a) // 2 console.log(b) // 1
在这个例子中，我们交换了变量a和b的值，而无需使用第三个变量。
对象解构赋值
对象解构赋值是从对象中提取值，并将它们赋给变量名。语法是花括号{}使用于变量声明/定义的左侧。
以下是一个简单的对象解构赋值的示例：
const { name, age } = { name: 'John', age: 28 }
console.log(name) // John
console.log(age) // 28在这个例子中，我们要求将对象{ name: 'John', age: 28 }中的属性名分别赋值给name和age变量。当我们运行代码时，我们会发现name的值是"John"，age的值是28。
如果对象中的属性名不同于我们想要的变量名，可以使用“重命名”属性：
const { name: fullName, age } = { name: 'John', age: 28 }
console.log(fullName) // John
console.log(age) // 28在这个例子中，我们将{ name: 'John', age: 28 }中的name属性重命名为fullName变量，而age属性直接赋给age变量。
与数组一样，如果我们不需要对象中的某些值，我们可以使用“逗号”跳过不需要的属性：
const { name, age } = { name: 'John', age: 28, hobbies: ['reading', 'coding'] }
console.log(name) // John
console.log(age) // 28在这个例子中，我们跳过对象中的hobbies属性而只使用name和age属性。
高级用法
嵌套解构
我们可以对嵌套的数据结构（例如，对象包含数组，数组包含对象）使用解构赋值。我们只需要保留表达式左侧与右侧的嵌套结构相同即可。
以下是一个示例，演示如何从嵌套的对象中提取值：
-- -------------------- ---- -------
----- ------- - -
----- -------
---- ---
------- -
----- ---
-------- --
-
-
----- - ----- ------- - ----- ------- - - - -------
----------------- -- ----
----------------- -- --
-------------------- -- --在这个例子中，我们要求将嵌套对象student中的name属性赋值给name变量，将math和english属性设置为scores对象中的子属性。
我们也可以对嵌套的数组使用解构赋值，例如：
const students = [
{ name: 'John', age: 18 },
{ name: 'Kate', age: 19 }
]
const [{ name: johnName }, { name: kateName }] = students
console.log(johnName) // John
console.log(kateName) // Kate在这个例子中，我们要求将数组students中的第一个元素的name属性赋值给johnName变量，将第二个元素的name属性赋值给kateName变量。
默认值
解构赋值还可以有默认值。当解构的属性不存在时，将使用默认值。
以下是一个示例，演示如何使用默认值：
const { name, age, gender = 'unknown' } = { name: 'John', age: 28 }
console.log(name) // John
console.log(age) // 28
console.log(gender) // unknown在这个例子中，我们使用默认值'unknown'为对象中不存在的属性gender指定值。
函数参数解构
我们还可以使用解构赋值将函数的参数分解为多个变量。
以下是一个示例，演示如何在函数参数中使用解构赋值：
function greet({ name, age }) {
console.log(`Hello, my name is ${name}. I am ${age} years old.`)
}
const person = { name: 'John', age: 28 }
greet(person)在这个例子中，我们定义了一个函数greet，它接受一个对象作为参数。我们将其解构为对象中的name和age属性，并在函数体中使用它们。
示例
将一个字符串（日期格式）解构为年、月、日
const dateString = '2021-08-10'
const [year, month, day] = dateString.split('-')
console.log(year) // 2021
console.log(month) // 08
console.log(day) // 10在这个示例中，我们使用字符串的split()方法将字符串分解为年、月和日。我们使用解构赋值将这些值分别赋给year、month和day变量。
交换两个变量的值
let a = 1, b = 2 [a, b] = [b, a] console.log(a) // 2 console.log(b) // 1
在这个示例中，我们使用数组解构赋值交换变量a和b的值。
从对象中提取的多个属性
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- --- ------- ------- ----------- --------- --------- - ----- - ----- ---- ------ - - ------ ----------------- -- ---- ---------------- -- -- ------------------- -- ----
在这个示例中，我们使用对象解构赋值将对象person的name、age和gender属性存储在单独的变量中。
总结
解构赋值是 ES6 新增的一种语法，用于从数组或对象中提取值，并将它们赋给变量。本文介绍了解构赋值的基本用法、高级用法和一些实用示例。
我们希望这篇文章对你学习和掌握 ES6 解构赋值有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498f2da48841e98945e1492