代码之家 › 专栏 › 技术社区 › me-me

在JS中组合来自映射的对象

ecmascript-6 javascript

me-me · 技术社区 · 6 年前

我有一个设置,尝试使用一个映射返回一个样式对象。当前,我的安装程序正在返回对象数组。我不确定我的第一种方法是否是一种有效的方法。

来自服务器的对象需要映射到以下值。

settings = {engine_background: "Gradient", wheel_padding: "100"}

我的反应组件中的代码

  const map = {
    engine_background: value => colors[value],
    wheel_padding: value => ({ padding: `${value}px` }),
  };

  const colors = {
    Gradient: {
      background: 'linear-gradient(-80deg, #ffffff, #000000 100%)',
    },
  }; 

 const styles = Object.entries(settings).map(([k, v]) => map[k](v));

top object.entries(settings)正在返回由2个对象组成的数组。

[{â¦}, {â¦}]
0: {background: "linear-gradient(-80deg, #ffffff, #000000 100%)"}
1: {padding: "100px"}

这不是我想要的理想状态,我想要我的 Object.entries(settings) 将map对象中的所有值作为一个对象返回,这样我就可以为组件设置样式。

例子:

{
  background: "linear-gradient(-80deg, #ffffff, #000000 100%)", 
  padding: "100px",
}

1 回复 | 直到 6 年前

quirimmo 6 年前

在对象数组上使用reducer创建单个对象:

const styles = Object.entries(settings).map(([k, v]) => map[k](v)).reduce((acc, val) => ({
  ...acc,
  ...val
}), {});

只是一个包含最终数据的示例:

const input = [{background: "linear-gradient(-80deg, #ffffff, #000000 100%)"}, {padding: "100px"}];

console.log(input.reduce((acc, val) => ({
  ...acc,
  ...val
}), {}));

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前