函数参数解构

ECMAScript 6 引入了函数参数解构的特性，允许在函数参数位置直接解构对象或数组，简化了从复杂数据结构中提取值的操作。这一特性与变量解构赋值类似，但专为函数参数设计，能显著提升代码的可读性和简洁性。

基本语法与对象解构

函数参数解构的核心语法是在形参位置使用解构模式。对于对象解构，直接在参数中声明需要提取的属性名：

function getUserInfo({name, age}) {
  console.log(`姓名: ${name}, 年龄: ${age}`);
}

const user = { name: '张三', age: 25, gender: 'male' };
getUserInfo(user); // 输出: 姓名: 张三, 年龄: 25

当传入的对象没有对应属性时，解构得到的值为undefined。可以为解构参数设置默认值：

function setConfig({ width = 100, height = 200 } = {}) {
  console.log(`宽度: ${width}, 高度: ${height}`);
}

setConfig(); // 宽度: 100, 高度: 200
setConfig({ width: 300 }); // 宽度: 300, 高度: 200

注意这里使用了双重默认值：= {}确保未传参数时不报错，而属性默认值处理缺失的具体属性。

数组参数解构

数组解构参数使用方括号语法，按位置提取值：

function getCoordinates([x, y]) {
  console.log(`X坐标: ${x}, Y坐标: ${y}`);
}

const point = [10, 20];
getCoordinates(point); // X坐标: 10, Y坐标: 20

嵌套数组解构同样适用：

function processMatrix([[a, b], [c, d]]) {
  console.log(a, b, c, d);
}

const matrix = [[1, 2], [3, 4]];
processMatrix(matrix); // 1 2 3 4

混合解构与重命名

对象解构支持属性重命名和混合解构：

function parseRequest({ 
  headers: { 'Content-Type': contentType }, 
  body: [firstItem] 
}) {
  console.log(contentType, firstItem);
}

const request = {
  headers: { 'Content-Type': 'application/json' },
  body: ['item1', 'item2']
};
parseRequest(request); // 输出: application/json item1

默认参数与解构结合

解构参数可以与ES6的默认参数结合使用：

function createElement({
  tag = 'div',
  id = 'default-id',
  className = 'container'
} = {}) {
  const el = document.createElement(tag);
  el.id = id;
  el.className = className;
  return el;
}

const newDiv = createElement(); // 使用所有默认值
const newSpan = createElement({ tag: 'span' }); // 部分覆盖

实际应用场景

1. 配置对象处理：简化多选项配置的处理

function initSlider({
  selector = '.slider',
  speed = 300,
  autoplay = false,
  loop = true
} = {}) {
  // 初始化逻辑
}

2. API响应处理：直接解构深层嵌套数据

function handleResponse({
  data: {
    user: { firstName, lastName },
    meta: { timestamp }
  }
}) {
  console.log(`${firstName} ${lastName}`, timestamp);
}

3. 事件处理：解构事件对象

element.addEventListener('click', ({ clientX, clientY }) => {
  console.log(`点击位置: ${clientX}, ${clientY}`);
});

注意事项

1. 参数必传校验：解构参数默认不传会报错，需通过= {}设置整体默认值

// 错误示例
function badExample({ a, b }) {
  console.log(a, b);
}
badExample(); // TypeError

// 正确做法
function goodExample({ a, b } = {}) {
  console.log(a, b);
}

2. 性能考量：频繁调用的函数不宜过度使用复杂解构，可能影响性能

3. 可读性平衡：多层嵌套解构可能降低代码可读性，建议适度使用

与其他特性的结合

1. 剩余参数：解构可与剩余参数结合

function removeProperties({ name, ...rest }) {
  return rest;
}
const obj = { name: 'test', a: 1, b: 2 };
removeProperties(obj); // { a: 1, b: 2 }

2. 箭头函数：箭头函数中同样适用

const getFullName = ({ firstName, lastName }) => `${firstName} ${lastName}`;

3. 类型检查：TypeScript中可结合接口定义解构形状

interface User {
  name: string;
  age: number;
}

function greetUser({ name, age }: User) {
  console.log(`Hello ${name}, you are ${age}`);
}