首页 > 解决方案 > 更改 js 函数参数的引用

问题描述

最近我编写了 react-redux 应用程序,作为一名 react 开发人员,我编写了纯粹的、功能性的和可预测的代码。尽管我确实喜欢这种体验,但我怀疑我的代码是否仍然很漂亮。

所以我的状态有一棵树,我需要更新树中的一堆节点。假设树的 API 提供了一个方法pureUpdate(path, newNode, tree) => newTree,该方法返回更新了节点的新树。在这种情况下,我的减速器方法可能看起来像

function updateNodes(tree, updateRules) {
    updateRules.forEach(updateRule => {
        const { path, node } = updateRule;
        tree = pureUpdate(path, node, tree);
    });
    return tree;
}

但我不确定这是否是最好的。

首先看起来很恶心的是tree = pureUpdate(path, node, tree);。它看起来像改变一个参数,这是不鼓励的,但我只是重新分配引用,不是吗?答案的第二部分中对此进行了解释。但是虽然这个技巧可能没问题,但在这个讨论中说这样的代码可能没有优化并且重新分配参数可能会导致性能问题(更多信息与示例)。我想到的最简单的解决方法是使用一个额外的变量,它将是树的克隆。

function updateNodes(tree, updateRules) {
    let newTree = someCloneFunc(tree);
    updateRules.forEach(updateRule => {
        const { path, node } = updateRule;
        newTree = pureUpdate(path, node, newTree);
    });
    return newTree;
}

问题是,如果我没有遗漏任何东西,并且我的代码仍然是纯粹的、漂亮的并且不会引起任何问题。

标签: javascriptreduxfunctional-programming

解决方案


如果您完全关心性能,我不会tree为了避免重新分配参数而克隆。

虽然您可以forEach在此处使用并重新分配参数,reduce但对于您的用例来说,它是正确的功能抽象,并且它通常是一个更好和更有用的抽象,forEach因为它可以(并且应该)纯粹使用,而forEach总是关于副作用。

基于 的解决方案reduce也使得是否克隆和/或重新分配函数参数的问题完全没有意义。

这是一个可行的reduce解决方案 - 没有参数重新分配,没有forEach副作用,也没有理由克隆tree

const updateNodes = (tree, updateRules) =>
  updateRules.reduce(
    (acc, { path, node }) => pureUpdate(path, node, acc),
    tree // initialize acc (the accumulator)
  )

推荐阅读