在 Javascript 中应用多个改变相同数组的函数的最优雅的方法是什么？答案

【问题标题】：What is the most elegant way to apply multiple functions that mutates the same array in Javascript?在 Javascript 中应用多个改变相同数组的函数的最优雅的方法是什么？
【发布时间】：2020-08-03 16:23:22
【问题描述】：

我正在尝试将相同的函数应用于具有不同参数的相同数组。我可以用不同的参数一个一个地调用这个函数，但是用一种更优雅的方式来做会很棒。就像映射参数数组一样。

目前这是我的代码。

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 的数组吗？

谢谢

【问题讨论】：

“最优雅”是一个需要意见的价值判断，这对于 Stack Overflow 来说是特别离题的。你可以考虑改写。
将函数名添加到const array，然后用columns = copy(array); for () {addRender(columns, arrayEl.key, arrayEl.renderFn)循环你的array
当@Justinas 评论时，我正要问：为什么这些函数是在以后添加而不是在首先创建数组时添加的，like this（但可能是不完全相同的函数)?
@T.J.Crowder 因为“列”是从另一个文件导入的，并且添加的组件（例如）包含一个 OnClick 事件，该事件调用需要在我的 main 中定义的函数组件。

标签： javascript arrays reactjs

【解决方案1】：

鉴于您的限制，我可能会这样处理（参见 cmets）：

// 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 代替对象，但如果它是这样的静态结构，我可能会继续使用对象：

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

然后

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

【讨论】：

感谢您的回答。我一直在寻找具有键值的对象。