JavaScript ES6 - 这是扩展语法还是休息语法？答案

【问题标题】：JavaScript ES6 - Is this spread syntax or rest syntax?JavaScript ES6 - 这是扩展语法还是休息语法？
【发布时间】：2018-08-01 03:16:58
【问题描述】：

我想尽可能多地了解它是如何工作的——尤其是当它涉及到三元和包含两个展开的对象参数的使用时。

rows = rows.map(row => (changed[row.ID] ? { ...row, ...changed[row.ID] } : row));

首先 - 传递到地图中的对象的结构如下： changed 的形状是这样的 {"75864":{"ActType":"DEADLINE"}}

rows 的格式如下（例如）：

[{
    "ID": 75864,
    "NextDate": "2018-03-02T00:00:00",
    "NextTime": "1030am",
    "MatterID": 14116,
    "Descr": " Responses to pending discovery",
    "StatusID": 19,
    "Actor_s_": null,
    "Accrued": 0,
    "Go": "",
    "AspNetUserID": null,
    "DomainID": 2,
    "UserID": 1,
    "StatusType": "Pending",
    "ActTypeID": 50,
    "ActType": "DEADLINE",
    "MatterName": "WYNBAS                   "

【问题讨论】：

这和 ReactJS 有什么关系？
传播developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Spread operator vs Rest parameter in ES2015/es6的可能重复
您正在通过...row“传播”rows 中名为row 的元素

标签： javascript ecmascript-6 spread-syntax

【解决方案1】：

这是将row 和changed[row.ID]“合并”为一个对象。让我们看看当row 是 ID 为“75864”的那个时会发生什么：

// row: {"ID": 75864, "ActType": "DEADLINE", (more properties)}
// changed: {"75864": {"ActType": "OTHER ACTION"}}
// (Note - I changed `changed` so that the ActType specified is different from
//  what's already in the row object, otherwise it's really difficult for me to
//  demonstrate exactly what's happening here.)

// This is the body of the arrow function:
return changed[row.ID] ? { ...row, ...changed[row.ID] } : row

// Well, changed[row.ID] does exist:
// changed[row.ID]: {"ActType": "OTHER ACTION"}

// So we take this branch of the ternary:
return { ...row, ...changed[row.ID] }

// Basically, this expression works like an array spread, but for objects.
// As a refresher, here's what an array spread might look like:
//
// a = [1, 2, 3]
// b = ['cat', 'dog', 'armadillo']
// c = [...a, ...b]
// c: [1, 2, 3, 'cat', 'dog', 'armadillo']
//
// The array spread works by creating a completely new, empty array. Then
// it adds the items of each array that's spread into it; so first it adds
// all the items of a (1, 2, 3), then all the items of b (cat, dog, armadillo).

// Object spread works pretty much the same way. First we create a completely
// new object: {}.
// Then we add all the properties of row: {ID: 75864, ActType: "DEADLINE",
// "MatterID": 14116, (more properties)}.
// Then it adds the the properties of changed[row.ID]. This is the important
// part, because changed[row.ID] actually *overwrites* any properties that
// we've already added from "row". This makes the result look like this:
return {ID: 75864, ActType: "OTHER ACTION", MatterID: 14116, (more properties)}

// Note that the return value's ActType property is OTHER ACTION, not DEADLINE!

请注意，对象传播本质上与使用Object.assign 将空对象作为第一个参数相同。（Object.assign 从第二个、第三个等参数中获取所有属性并将它们设置在第一个参数上。这意味着它实际上会改变 - 变异 - 它的第一个参数；在这里，我们不是在变异 row，我们重新返回一个全新的对象基于 row（和changed[row.ID]）。）所以用 Object.assign 编写代码看起来像这样：

return Object.assign({}, row, changed[row.ID])

【讨论】：

非常感谢您的详尽回答！它完全涵盖了我需要了解的内容。非常感谢，towerofnix！

【解决方案2】：

如果row.ID 值与changed 对象中具有“真实”值的键匹配，

然后你返回一个新对象，其中包含row 的所有值（你传播了row），然后你将匹配的changed 对象的值添加到这个新对象中（你传播了真实值changed)。

否则，您只需返回给定的行。

这是您正在寻找的答案吗？

【讨论】：