Каков самый элегантный способ применения нескольких функций, которые изменяют один и тот же массив в Javascript?

Question

Я пытаюсь применить одну и ту же функцию к одному и тому же массиву с разными параметрами. Я могу вызывать функцию с разными параметрами один за другим, но было бы здорово сделать это более элегантно. Как отображение по массиву параметров.

В настоящее время это мой код.

const array = [
  {
    key: '1234',
    title: 'Column 1'
  },
  {
    key: '5678',
    title: 'Column 2'
  },
  {
    key: '9101',
    title: 'Column 3'
  }
]

const renderFn1 = (props) => <Component1 {...props} />
const renderFn2 = (props) => <Component2 {...props} />

const addRender = (columns, key, fn) => {
  return columns.map(col => {
    if (col.key === key) {
      col.render = fn
    }
    return col
  })
}

const newColumns = addRender(columns, '1234', renderFn1)
const newColumns2 = addRender(newColumns, '9101', renderFn2)

Вместо этой цепочки:

const newColumns = addRender(columns, '1234', renderFn1)
const newColumns2 = addRender(newColumns, '9101', renderFn2)

Как я могу применить правильную функцию к правому объекту в массиве относительно соответствующего ключа.

Должен ли я отображать более 2/3 массива одновременно?

Спасибо

Answer 1

Учитывая ваши ограничения, я бы, вероятно, подошел к этому так (см. Комментарии):

// The array you import from another file
const array = [
  {
    key: '1234',
    title: 'Column 1'
  },
  {
    key: '5678',
    title: 'Column 2'
  },
  {
    key: '9101',
    title: 'Column 3'
  }
];

// Your renderers (raw numeric literals are valid, but since your keys are
// strings, I've used strings here)
const renderers = {
    "1234": (props) => <Component1 {...props} />,
    "9101": (props) => <Component1 {...props} />
};

// Map, **copying** rather than modifying the array's objects
const newColumns = array.map(entry => ({
    ...entry,
    render: renderers[entry.key]
}));

Если хотите, вы можете использовать Map вместо объекта, но если это стат c такую ​​структуру, я бы, вероятно, go впереди использовал бы объект:

const renderers = new Map([
    ["1234", (props) => <Component1 {...props} />],
    ["9101", (props) => <Component1 {...props} />]
]);

, а затем

const newColumns = array.map(entry => ({
    ...entry,
    render: renderers.get(entry.key)
}));