es6扩展运算符合并配置时按“从左到右、后写覆盖前写”优先级处理同名属性，仅浅层覆盖、不递归合并嵌套对象，新增属性自动添加，深层合并需手动展开或借助工具函数。

ES6 扩展运算符在配置项合并中默认按“从左到右、后写覆盖前写”的顺序处理同名属性，这是它的天然优先级规则，无需额外配置。

配置合并的基本覆盖逻辑

当使用 {...defaultConfig, ...userConfig} 合并对象时，右侧对象的属性会直接覆盖左侧同名属性。这种覆盖是浅层、按键名逐个进行的，不递归深入嵌套结构。

• 如果 userConfig 中有 theme: 'dark'，而 defaultConfig 中是 theme: 'light'，最终结果一定是 theme: 'dark'
• 新增属性（如 showSidebar: true）会被自动添加进新对象，不影响原有字段
• 若多个配置对象都含同一键（如 {...a, ...b, ...c}），则 c 的值最终生效，a 和 b 中该键被忽略

处理嵌套配置的常见误区

扩展运算符只做一层展开，对嵌套对象（如 api: { baseUrl: '', timeout: 5000 }）不会自动深度合并——它会用整个新对象直接替换旧对象，而不是合并内部字段。

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

• 错误示例：
  const final = { ...default, ...user };
  若 user.api 是一个完整新对象，default.api.timeout 等未在 user.api 中声明的字段将丢失
• 正确做法：对嵌套层级单独展开，或改用 Object.assign 配合手动合并逻辑
  const final = { ...default, ...user, api: { ...default.api, ...user.api } };

需要更高控制力时的替代方案

当业务要求更精细的覆盖策略（如“仅覆盖非空值”“数组追加而非替换”“深层合并”），扩展运算符本身无法满足，需组合其他手段：

• 用 Object.assign + 条件判断构建定制逻辑：
  Object.assign({}, default, Object.keys(user).reduce((acc, k) => user[k] !== undefined ? { ...acc, [k]: user[k] } : acc, {}))
• 借助工具函数（如 Lodash 的 merge）实现真正深合并
• 封装一个配置合并器，支持策略参数：mergeConfigs(default, user, { deep: true, skipFalsy: true })

React 中 className 等特殊属性的合并注意点

在 JSX 中使用扩展运算符传递 props（如 <button></button>），若同时显式写 className，显式值会覆盖 spread 进来的 className —— 因为 React 的 prop 优先级规则是：显式声明 > spread props。

• 安全写法：<button classname="{`${props.className" my-btn></button>
• 避免冲突：const { className, ...rest } = props; 再分别处理