组件参数解构时如何为对象属性设置默认值？

完全没问题，解构赋值不仅能帮你简化代码，还能让逻辑更清晰。分两种场景给你演示：

1. 在组件内部解构处理source #

这是最直接的方式，在组件拿到source参数后，通过解构给priority设置默认值：

function YourComponent(placeholder, source) {
  // 解构source，给priority设置默认值'normal'
  const { priority = 'normal', ...restSource } = source;
  // 重新组装处理后的source对象
  const processedSource = { ...restSource, priority };

  // 后续逻辑就用processedSource即可
  console.log(processedSource.priority); // 没传的话就是'normal'
}

2. 在组件参数定义时直接解构 #

如果你的组件是通过对象形式接收参数（比如React组件的props），还可以在参数层面直接解构处理：

function YourComponent({ placeholder, source }) {
  const { priority = 'normal', ...rest } = source;
  const finalSource = { ...rest, priority };
  // ...组件逻辑
}

注意和原代码的细微差异 #

你原来的三元判断source.priority = source.priority ? source.priority : 'normal'会把所有假值（比如''、0、false、null）都替换成'normal'，但解构赋值的默认值只在属性不存在或为undefined时生效。如果需要和原逻辑完全一致，可以在解构后再加一层判断：

const { priority, ...rest } = source;
const finalPriority = priority ? priority : 'normal';
const finalSource = { ...rest, priority: finalPriority };

这样既用到了解构赋值的简洁性，又保留了你原本的逻辑行为。

内容的提问来源于stack exchange，提问作者Explosion Pills