JavaScript ES6 - 这是扩展语法还是其他语法?

时间:2018-02-21 13:51:47

标签: javascript ecmascript-6 spread-syntax

我想尽可能多地了解这是如何工作的 - 特别是因为它涉及三元的使用和包含两个点差的对象参数。

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                   "

2 个答案:

答案 0 :(得分:2)

这是"合并" rowchanged[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! 时会发生什么。
row

请注意,对象传播与使用空对象作为第一个参数的Object.assign基本相同。 (Object.assign从第二个,第三个等参数中获取所有属性,并在第一个参数上设置它们。这意味着它实际上会更改 - 变异 - 它的第一个参数;而在这里,我们不会变异{{1} },我们基于 row(和changed[row.ID])返回一个全新的对象。)因此,使用Object.assign编写代码将如下所示:< / p>

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

答案 1 :(得分:0)

如果row.ID值与changed对象中具有“truthy”值的键匹配,

然后您返回一个新对象,其中包含row的所有值(您展开row),并向此新对象添加匹配的changed对象的值(你传播了changed)的真实价值。

您只需返回给定的行。

这是你正在寻找的答案吗?