什么是解构赋值？ 解构赋值是 ES6 引入的一种语法，允许你从数组或对象中提取值，并直接赋值给变量。它让代码更简洁、更易读。 传统写法 vs 解构写法： | // 传统写法：逐一赋值 | | const arr = [1, 2, 3]; | | const a = arr[0]; | | const b = arr[1]; | | const c = arr[2]; | | | | // 解构写法：一行搞定 | | const [a, b, c] = [1, 2, 3]; | 数组解构 1. 基本用法 | // 完全解构 | | const [first, second, third] = ['a', 'b', 'c']; | | console.log(first); // 'a' | | | | // 部分解构 | | const [x, y] = [1, 2, 3, 4]; | | console.log(x); // 1 | | console.log(y); // 2 | 2. 跳过元素 | // 使用逗号跳过不需要的元素 | | const [, , third] = ['a', 'b', 'c']; | | console.log(third); // 'c' | | | | // 跳过中间元素 | | const [first, , last] = [1, 2, 3]; | | console.log(first); // 1 | | console.log(last); // 3 | 3. 默认值 | // 当对应位置是 undefined 时使用默认值 | | const [a = 10, b = 20] = [1]; | | console.log(a); // 1 | | console.log(b); // 20（使用默认值） | 4. 剩余元素 | // 使用 ...rest 收集剩余元素 | | const [first, ...rest] = [1, 2, 3, 4, 5]; | | console.log(first); // 1 | | console.log(rest); // [2, 3, 4, 5] | 对象解构 1. 基本用法 | const | | user = { | | name: '张三', | | age: 25, | | city: '北京' | | }; | | | | // 按属性名解构 | | const { name, age } = user; | | console.log(name); // '张三' | | console.log(age); // 25 | 2. 重命名变量 | // 使用 属性名: 新变量名 语法 | | const { name: userName, age: userAge } = user; | | console.log(userName); // '张三' | | console.log(userAge); // 25 | 3. 默认值 | // 属性不存在时使用默认值 | | const { name, country = '中国' } = user; | | console.log(name); // '张三' | | console.log(country); // '中国'（默认值） | 4. 嵌套解构 | const | | response = { | | data: { | | user: { | | id: 1, | | profile: { avatar: 'avatar.png' } | | } | | } | | }; | | | | // 深层嵌套解构 | | const { data: { user: { profile: { avatar } } } } = response; | | console.log(avatar); // 'avatar.png' | 实际应用场景 1. 函数参数解构 | // 传统写法 | | function createUser(options) { | | const name = options.name || '匿名'; | | const age = options.age || 0; | | } | | | | // 解构写法（更简洁） | | function createUser({ name = '匿名', age = 0 } = {}) { | | console.log(name, age); | | } | | | | createUser({ name: '李四', age: 30 }); | | createUser(); // 使用默认值 | 2. 交换变量 | // 传统写法需要临时变量 | | let a = 1, b = 2; | | let temp = a; | | a = b; | | b = temp; | | | | // 解构写法（一行搞定） | | [a, b] = [b, a]; | | console.log(a, b); // 2, 1 | 3. 从函数返回多个值 | function getCoordinates() { | | return { x: 100, y: 200, z: 50 }; | | } | | | | // 只取需要的值 | | const { x, y } = getCoordinates(); | | console.log(x, y); // 100, 200 | 4. 遍历 Map 结构 | const | | map = new Map([ | | ['name', '张三'], | | ['age', 25] | | ]); | | | | // 解构遍历 | | for (const [key, value] of map) { | | console.log(`${key}: ${value}`); | | } | | // name: 张三 | | // age: 25 | 注意事项 ⚠️ 已声明的变量 已声明的变量用于对象解构时，必须用括号包裹，否则 JavaScript 引擎会把 {x} 解析为代码块。 | // 错误写法 | | let x; | | { x } = { x: 1 }; // SyntaxError | | | | // 正确写法（用括号包裹） | | ({ x } = { x: 1 }); | ❌ 不要混用数组解构和对象解构 数组解构用 []，对象解构用 {}。数组按位置匹配，对象按属性名匹配。 速查表 | 语法 | 用途 | 示例 | [a, b] | 数组基本解构 | ✅ | [, , c] | 跳过元素 | ✅ | [a = 1] | 默认值 | ✅ | [first, ...rest] | 剩余元素 | ✅ | { name } | 对象基本解构 | ✅ | { name: alias } | 重命名变量 | ✅ | { a: { b } } | 嵌套解构 | ✅ | |
评论
发表评论