JS解构赋值如何单独提取user属性并将剩余属性存入另一变量

直接用ES6对象解构的剩余语法即可完成需求，有两种等价写法可选：

写法1：直接在组件入参处解构（推荐） #

直接在定义组件的参数位置拆分属性，代码最简洁：

const ProductFooter = ({ user, ...product }) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();

  // 可直接使用两个变量：
  // user：对应传入props里的user属性
  // product：对象类型，包含除user外所有传入的props，覆盖你需要的id、name、desc、photos、video、price、selectedOptions等字段
}

写法2：函数内部对props二次解构 #

如果你不想改动现有入参的{...props}写法，就在函数内部做一次解构即可，效果完全一致：

const ProductFooter = ({...props}) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();

  const { user, ...product } = props;
}

说明 #

• 剩余语法收集到的product是传入props的浅拷贝，不要直接修改这个对象的内部属性，遵循React props只读的规则即可。
• 这种写法不需要手动枚举除user外的所有属性，后续父组件给ProductFooter新增传参时，新字段会自动归入product对象，不需要修改解构代码，可维护性更好。

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