将对象中的静态元素附加到对象数组中的每个对象javascript答案

【问题标题】：append static elements in object to each object in array of objects javascript将对象中的静态元素附加到对象数组中的每个对象javascript
【发布时间】：2019-06-09 10:39:17
【问题描述】：

如何获取这个对象和数组。

const data = {
    type: "hello",
    point: 1.8
};

const raw = [
    {
        x: [1, 2],
        y: [-1.1, -1.2]
    },
    {
        x: [14, 24],
        y: [-1.14, 1.24]
    }
];

然后将data 对象中的项目“附加”到raw 数组中的每个对象。期望的最终结果是；

const result = [
    {
        x: [1, 2],
        y: [-1.1, -1.2],
        type: "hello",
        point: 1.8
    },
    {
        x: [14, 24],
        y: [-1.14, 1.24],
        type: "hello",
        point: 1.8
    }
];

我尝试使用map，但该对象适用于数组，然后我查看使用Object.keys，但没有运气。

【问题讨论】：

标签： javascript arrays object for-loop ecmascript-6

【解决方案1】：

使用map 进行传播：

const data = {type:"hello",point:1.8};
const raw = [{x:[1,2],y:[-1.1,-1.2]},{x:[14,24],y:[-1.14,1.24]}];
const result = raw.map(e => ({ ...e, ...data }));
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: auto; }

ES5 语法：

var data = {type:"hello",point:1.8};
var raw = [{x:[1,2],y:[-1.1,-1.2]},{x:[14,24],y:[-1.14,1.24]}];
var result = raw.map(function(e) { 
  return Object.assign({}, e, data);
});
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: auto; }

【讨论】：

我明白了，使用 Object.assign 是旧的 ES5 语法。但同样可以使用 ES6 扩展语法来实现。可爱的谢谢。我已将此标记为官方解决方案。
@Sigex - 在你的答案中查看我的 cmets。

【解决方案2】：

map 确实是您想要的工具。我可能会将它与map 回调参数列表中的destructuring 和结果值中的属性传播结合起来：

const result = raw.map(({x, y}) => ({x, y, ...data}));

实时复制：

const data = {
    type: "hello",
    point: 1.8
};
const raw = [
    {
        x: [1, 2],
        y: [-1.1, -1.2]
    },
    {
        x: [14, 24],
        y: [-1.14, 1.24]
    }
];
const result = raw.map(({x, y}) => ({x, y, ...data}));
console.log(result);

请注意，如果 data 有任何值为 objects 的属性（您的示例中的 data 没有），则使用 spread 将仅复制对对象的引用，它不会制作深拷贝。所以你所有的result 对象都应该共享它们。如果相关，您可以deep copy。

【讨论】：

谢谢，我更喜欢在原始数组中的每个对象上使用扩展运算符。而不是直接破坏和引用对象 x 和 y。我拥有的实际代码大约有 6 个对象。对于示例，我将其限制为 x 和 y。
@Sigex - 是的。正如我在对 Jack 的回答的评论中提到的那样，我不清楚为什么我将其限制为 x 和 y。 :-)

【解决方案3】：

我找到了解决办法；

const data = {type:"hello",point:1.8};
const raw = [{x:[1,2],y:[-1.1,-1.2]},{x:[14,24],y:[-1.14,1.24]}];
const result = raw.map(r => Object.assign(r, data));
console.log(result);

我们将不胜感激有关此方法的一些反馈。寻找现在提供的解决方案。谢谢大家。

【讨论】：

效果很好。这与 Jack 和我所做的唯一显着区别是您正在修改 raw 数组中的对象，而我们正在制作它们的浅表副本。所以raw 和result 都将包含相同的扩展对象（raw[0].point 将是1.8）。使用 Jack 和我的方法，raw 将保持原始对象不变，result 将拥有具有 x、y 和新属性的新对象。
另一件小事是属性传播符号是相当新的（ES2018）。如果您想要使用 Object.assign 代替 Jack 的答案，则应为：=> Object.assign({}, e, data)。
谢谢 T.J，我正在使用 Typescript，所以传播运算符很好。但对阅读本文并使用 JavaScript ES5 的人有帮助。