JavaScript进阶篇——第四章 解构赋值（完全版）
目录
1. 解构赋值是什么？
2. 数组解构详解
3. 对象解构详解
4. 常见问题与注意事项
5. 复习要点速查表
解构赋值是JavaScript中从数组或对象提取值的简洁语法。数组解构按位置匹配变量，可通过剩余参数(...)获取剩余值，支持默认值和多维解构；对象解构要求变量名匹配属性名，可重命名变量，也支持多级解构。两种方式都可用于函数参数，并要注意变量冲突、默认值生效条件(仅undefined)和剩余参数位置限制。典型应用包括变量交换、嵌套数据提取等，需特别注意行首解构时的分号问题。解构赋值遵循"看结构-找对应-查特殊"三步技巧，能显著简化代码。
1. 解构赋值是什么？
解构赋值是从数组或对象中提取值并赋给变量的简洁语法。就像拆快递包裹一样，把打包好的数据拆开，直接拿到里面的内容。
传统方式 vs 解构赋值
// ❗ 传统方式 - 繁琐
const arr = [100, 60, 80]
const max = arr[0] // 最大值
const min = arr[1] // 最小值
const avg = arr[2] // 平均值// ✅ 解构赋值 - 简洁明了
const [max, min, avg] = [100, 60, 80]2. 数组解构详解
2.1 基本语法
const arr = [1, 2, 3]// ✅ 批量声明变量 a b c
// 按顺序把数组的值赋给变量
const [a, b, c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3// 💡 要点：变量顺序对应数组位置2.2 变量多值少的情况
const phones = ['小米', '苹果', '华为']// 变量比数组元素多
const [phone1, phone2, phone3, phone4] = phonesconsole.log(phone1) // '小米'
console.log(phone2) // '苹果'
console.log(phone3) // '华为'
console.log(phone4) // undefined// ❗ 重点：当变量数量 > 数组元素数量时，多余的变量值为 undefined2.3 变量少值多的情况
const fruits = ['苹果', '香蕉', '橙子', '葡萄']// 变量比数组元素少
const [fruit1, fruit2] = fruitsconsole.log(fruit1) // '苹果'
console.log(fruit2) // '香蕉'（橙子和葡萄被忽略了）2.4 使用剩余参数(...)
const brands = ['小米', '苹果', '华为', '格力', 'vivo']// ✅ 使用...获取剩余的值
const [top1, top2, ...others] = brandsconsole.log(top1) // '小米'
console.log(top2) // '苹果'
console.log(others) // ['华为', '格力', 'vivo']（打包成新数组）// 💡 要点：剩余参数返回的是数组
// ⚠️ 注意：剩余参数必须放在最后位置2.5 设置默认值
// 当值可能不存在时，设置默认值
const [device = '手机', brand = '华为'] = ['小米']console.log(device) // '小米'（使用提供的值）
console.log(brand) // '华为'（使用默认值）// ❗ 重点：默认值只在对应位置的值为 undefined 时生效2.6 多维数组解构
const data = ['苹果', ['小米', '华为']]// 第一层解构
const [fruit, brands] = data
console.log(fruit) // '苹果'
console.log(brands) // ['小米', '华为']（数组）// ✅ 深层解构（一次解构到底）
const [fruit, [brand1, brand2]] = data
console.log(fruit) // '苹果'
console.log(brand1) // '小米'
console.log(brand2) // '华为'2.7 交换变量值
let a = 10
let b = 20// 传统交换方式需要临时变量
// let temp = a
// a = b
// b = temp// ✅ 解构赋值方式（一行搞定）
;[b, a] = [a, b]console.log(a) // 20
console.log(b) // 10// ⚠️ 重要：当解构赋值在行首时，前面需要加分号;2.8 注意事项（分号问题）
// 情况1：立即执行函数前
;(function() {console.log('立即执行函数')
})()// 情况2：数组解构前（前面有语句时）
let x = 5
let y = 10;
;[y, x] = [x, y] // ⚠️ 这里必须加分号// ❗ 重点：JS中需要加分号的两种情况：
// 1. 立即执行函数前
// 2. 数组解构前（特别是前面有语句时）3. 对象解构详解
3.1 基本语法
const user = {name: '小明',age: 18,email: 'xiaoming@example.com'
}// ✅ 解构对象（变量名必须匹配属性名）
const { name, age, email } = userconsole.log(name) // '小明'
console.log(age) // 18
console.log(email) // 'xiaoming@example.com'// ⚠️ 注意事项：
// 1. 变量名冲突会报错
// 2. 找不到匹配属性时值为 undefined3.2 重命名变量
const product = {name: '手机',price: 2999
}// ✅ 重命名变量（给值起新名字）
const { name: productName, price: productPrice } = productconsole.log(productName) // '手机'
console.log(productPrice) // 2999// 💡 冒号含义："什么值：赋值给谁"
// 格式：{ 原属性名: 新变量名 }3.3 数组对象解构
const users = [{ name: '小明', age: 18 },{ name: '小红', age: 20 }
]// ✅ 解构数组中的对象
const [{ name: firstUserName }, { name: secondUserName }] = usersconsole.log(firstUserName) // '小明'
console.log(secondUserName) // '小红'// 简写形式
const [user1, user2] = users
console.log(user1.age) // 183.4 多级对象解构
const response = {code: 200,message: "成功",data: {products: [{ id: 1, name: "手机", price: 1999 },{ id: 2, name: "笔记本", price: 5999 }],total: 2}
}// ✅ 多级解构
const { data: { products,total }
} = responseconsole.log(products) // 产品数组
console.log(total) // 2// 深层解构
const { data: { products: [firstProduct] }
} = response
console.log(firstProduct.name) // "手机"3.5 函数参数解构
// 1. 基本函数参数解构
function displayUser({ name, age }) {console.log(`${name}今年${age}岁`)
}displayUser({ name: '小明', age: 18 }) // "小明今年18岁"// 2. 重命名解构变量
function render({ data: myData }) {console.log(myData)
}// 3. 带默认值
function createElement({ width = 100, height = 100 }) {console.log(`创建${width}x${height}的元素`)
}
createElement({}) // 创建100x100的元素4. 常见问题与注意事项
-
变量名冲突问题
const name = '全局名字'// ❌ 错误：变量名冲突 // const { name } = { name: '小明' }// ✅ 解决方案：重命名 const { name: userName } = { name: '小明' } console.log(userName) // '小明' -
默认值注意事项
// 默认值只在属性为undefined时生效 const { width = 100 } = { width: undefined } console.log(width) // 100// null不会触发默认值 const { height = 200 } = { height: null } console.log(height) // null -
剩余参数位置
// ✅ 正确：剩余参数在最后 const [a, b, ...rest] = [1, 2, 3, 4]// ❌ 错误：剩余参数不能在前面 // const [...rest, last] = [1, 2, 3, 4]
5. 复习要点速查表
数组解构要点
| 情况 | 语法 | 注意事项 |
|---|---|---|
| 基本解构 | const [a, b] = [1, 2] | 按顺序赋值 |
| 变量多值少 | const [a, b, c] = [1, 2] | 多余变量 = undefined |
| 变量少值多 | const [a, b] = [1, 2, 3] | 多余值被忽略 |
| 剩余参数 | const [a, ...rest] = [1, 2, 3] | ...rest 必须放最后 |
| 默认值 | const [a=10] = [] | 仅当值为 undefined 生效 |
| 多维解构 | const [a, [b]] = [1, [2]] | 嵌套结构匹配 |
| 变量交换 | [a, b] = [b, a] | 前面加分号 |
对象解构要点
| 情况 | 语法 | 注意事项 |
|---|---|---|
| 基本解构 | const {name} = user | 变量名必须匹配属性名 |
| 重命名 | const {name: uname} = user | 使用:语法 |
| 默认值 | const {age=18} = user | 无该属性时生效 |
| 多级解构 | const {addr: {city}} = user | 深层嵌套结构 |
| 函数参数 | function({name}) {...} | 直接解构参数 |
解构赋值口诀
"三步走"技巧：
看结构：是数组[]还是对象{}
找对应：数组按位置，对象按属性名
查特殊：默认值、重命名、剩余参数