javascript - 结合属性简写和其余 : { type, 其中,selected : { . ..selected, ...hovered } } : what's happening here?

标签 javascript ecmascript-6

编辑:对于所有说我需要提供背景的人:答案就在其中。下面的两个变量 - typewhich - 来自该表达式的外部源,并且通过传播创建的对象中的所有内容都分配给 selected。我在想,以某种方式, type 和 which 也从传播创建的对象中接收它们的值。事实并非如此!

我正在修改一位已离职的首席开发人员的代码,并且遇到了我不理解的表述。

{ type, which, selected: { ...selected, ...hovered } }

从这段代码

export const renderSelector = createSelector(
  selectedTypeSelector,
  selectedSelector,
  hoveredSelector,
  (type, selected, hovered) => memoize(
    which => loadRender({ type, which, selected: { ...selected, ...hovered } }),
  ),
);

我已经相当仔细地研究过 ES6 特性,但不记得见过这个。我完全了解右侧的传播情况,但我不清楚左侧发生了什么。也就是说:type,which,selected:到底是做什么的?我四处询问,有人向我解释说,上面 : 左侧的字段名称捕获由 { ...selected, ...hovered }< 创建的对象中的匹配字段 并且如果左侧有不匹配的字段名称,则将不匹配的字段放在一个 rest 数组中。有人可以向我指出描述此内容的链接吗?谢谢!

最佳答案

表达式

{ type, which, selected: { ...selected, ...hovered } }

几乎1相当于

{
    "type": type,
    "which": which,
    "selected": Object.assign({}, selected, hovered)
}

其中typewhichselectedhovered是局部变量。换句话说,"type""which" 是使用 property shorthand 指定的。 ,并且 "selected" 被显式指定为 selectedhovered 的浅层合并。

<小时/>

1 我说“几乎”是因为 Object.assign 触发属性 setter ,而 ... 对象扩展语法则不会。

关于javascript - 结合属性简写和其余 : { type, 其中,selected : { . ..selected, ...hovered } } : what's happening here?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54239387/

相关文章:

javascript - 当 div 内的范围包含使用 jquery 的特定文本时更改 div 的背景

javascript - 如何使用 event.target 获取元素的子元素

javascript - ES6 和 Webpack : import not working

javascript - 将许多 Prop 附加到子组件的最佳选择是什么?

javascript - 在 Node.js 中使用装饰器

javascript - 如何让 JavaScript 中的 CSS 正常工作

javascript - Titanium - 从网络服务器检索 JSON 时出错

javascript - 如何为流程图正确显示大型数据集图例?

javascript - ESLint 解析错误 : Unexpected token . .. 仅在一个剩余运算符上

JavaScript 过滤数组和映射