全国较好的网站建设公司百度sem运营

目录

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// ❗ 重点：当变量数量 > 数组元素数量时，多余的变量值为 undefined

2.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: '[e-mail]'
}// ✅ 解构对象（变量名必须匹配属性名）
const { name, age, email } = userconsole.log(name)  // '小明'
console.log(age)   // 18
console.log(email) // '[e-mail]'// ⚠️ 注意事项：
// 1. 变量名冲突会报错
// 2. 找不到匹配属性时值为 undefined

3.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) // 18

3.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. 常见问题与注意事项

1. 变量名冲突问题

   const name = '全局名字'// ❌ 错误：变量名冲突
   // const { name } = { name: '小明' }// ✅ 解决方案：重命名
   const { name: userName } = { name: '小明' }
   console.log(userName) // '小明'

2. 默认值注意事项

   // 默认值只在属性为undefined时生效
   const { width = 100 } = { width: undefined }
   console.log(width) // 100// null不会触发默认值
   const { height = 200 } = { height: null }
   console.log(height) // null

3. 剩余参数位置

   // ✅ 正确：剩余参数在最后
   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}) {...}	直接解构参数

解构赋值口诀

"三步走"技巧：

1. 看结构：是数组[]还是对象{}

2. 找对应：数组按位置，对象按属性名

3. 查特殊：默认值、重命名、剩余参数