объединение объектов с карты в JS

Question

У меня есть настройка, в которой я пытаюсь использовать карту для возврата одного объекта стилей.В настоящее время моя установка возвращает массив объектов.Я не уверен, что мой первый подход - хороший эффективный способ сделать это.

Объект, поступающий с сервера, должен соответствовать приведенным ниже значениям.

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

код в моем компоненте React

  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));

Верхний Object.entries (настройки) возвращает мне массив из 2 объектов.

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

Это не совсем то, что мне нужно в идеале, я бы хотел, чтобы мой Object.entries(settings) возвратилвсе значения в объекте карты как один объект, чтобы я мог стилизовать свой компонент с ними.

пример:

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

Answer 1

Используйте редуктор для массива объектов для создания одного объекта:

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
}), {}));