箭头函数配合解构赋值可简洁直观地接收对象或数组参数:对象解构直接提取属性并支持默认值,数组解构按位置提取或跳过元素,还支持嵌套与混合解构;需注意传参必须为对应类型,否则报错,且箭头函数无this等绑定。

箭头函数配合解构赋值,能让参数接收更简洁、直观,尤其适合处理对象或数组类型的入参。
对象参数的解构接收
直接在箭头函数的参数位置写解构模式,提取所需属性:
const getUserInfo = ({ name, age, city = '未知' }) => `姓名:${name},年龄:${age},城市:${city}`;
console.log(getUserInfo({ name: '张三', age: 28 })); // 姓名:张三,年龄:28,城市:未知
注意:必须传入对象,否则会报错(如传入 undefined 或原始值会触发解构失败);可设默认值防崩。
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
数组参数的解构接收
同样支持按位置解构数组元素,还能跳过不关心的项:
立即学习“Java免费学习笔记(深入)”;
const sumFirstTwo = ([a, b]) => a + b;
console.log(sumFirstTwo([10, 20, 30])); // 30
<p>const getHeadAndTail = ([head, ...rest]) => ({ head, tail: rest[rest.length - 1] });
console.log(getHeadAndTail([1, 2, 3, 4])); // { head: 1, tail: 4 }
嵌套解构与混合使用
支持深层对象或结合数组解构,适合处理结构较复杂的参数:
const formatLog = ({ user: { id, profile: { nickname } }, timestamp, tags = [] }) =>
`[${timestamp}] 用户#${id}(${nickname}):${tags.join(', ')}`;
<p>formatLog({
user: { id: 123, profile: { nickname: '小明' } },
timestamp: '2024-06-01',
tags: ['login', 'mobile']
});
// "[2024-06-01] 用户#123(小明):login, mobile"
注意事项和常见坑
- 箭头函数没有自己的
this、arguments、super或new.target,解构只影响参数接收,不影响这些绑定 - 不能单独对参数做类型检查或运行时校验,需额外加判断(如
if (!obj || typeof obj !== 'object')) - 解构失败时(如传了
null或undefined),会抛出TypeError,建议配合默认值或外层守卫 - 不支持为解构参数单独设默认值再展开(比如
({ a } = {}) => a是合法的,但({ a = 1 }) => a中的=1是属性默认值,不是参数默认值)

















