如何从 arr.map(elem => dict[elem]) 中提取函数？

Question

一个函数应该只做一件事被认为是编写函数时的一个好习惯。然而，我有一个已经非常小的函数，但尽管如此，我认为可以进一步提取它，但我不知道如何做到这一点。

以下 recode() 函数根据查找字典替换数组值。

function recode(arr, dict) {
    return arr.map(elem => dict[elem])
}

它如何工作的示例：

// input data to be recoded
const myArr = ['eggplant', 'tomato', 'carrot', 'cabbage'];

// look-up dictionary
const myDict = {
    eggplant: 'purple',
    tomato: 'red',
    carrot: 'orange',
};

const result1 = recode(myArr, myDict)
console.log(result1) // => ["purple", "red", "orange", undefined]

在我看来，当前的 recode() 函数做了两件事：

1. 它按身份匹配（您可能有比这更好的描述），即 elem =>字典[元素]；它
2. 映射到 arr

我的问题是我是否可以为 elem => 提取单个函数dict[elem]，并将该函数提供给 arr.map()。我想象一下：

// pseudo-code
function funcInner() {...}

function recode(arr, dict) {
    return arr.map(funcInner)
}

这样，我将拥有一个仅执行替换的函数，另一个仅映射 arr。

---

编辑

---

为了解决这些评论，我想打个比方。让我们考虑一个将数组值加倍的函数。

function doubleArray(arr) {
  return arr.map(x => x * 2)
}

这里有些人可能会说 doubleArray() 已经在做一件事了。但是，我们仍然可以提取：

const doubleNumber = x => x * 2;

function doubleArray2(arr) {
  return arr.map(doubleNumber)
}

据我了解，doubleArray() 做了两件事（double 和 map），而 doubleArray2() 只做了一件事（map ) 和 doubleNumber() 只做一件事（双精度）。因此，doubleArray()并不是无意义的重构。

此外，一旦我们有了一个可以做一件事的函数，它就会促进我们可以为其编写更准确的单元测试。

最后，如果我们将此代码转换为 typescript （我在这个问题中没有重点关注），那么 doubleNumber() 中的输入类型与输入类型不同在 doubleArray() 中。这就是我更愿意提取的另一个原因。

我对 javascript 很陌生，但这就是我理解它的方式。所以我关于 recode() 的问题就是在这种情况下发生的。

Answer 1

回答你的问题：

function recode(arr, dict) {
    return arr.map(elem => funcInner(elem,dict));
};

function funcInner(elem, dict) {
    return dict[elem];
}

但我同意其他人对你的问题的评论，这可能有点矫枉过正。你的选择。

Answer 2

本质上，recode 被用作 arr.map()。这也可以通过将 recode 分配给调用 Function.bind() 方法。

const recode = myArr.map.bind(myArr, elem => myDict[elem]);

myArr 需要作为第一个参数传递以绑定数组的上下文。

// input data to be recoded
const myArr = ['eggplant', 'tomato', 'carrot', 'cabbage'];

// look-up dictionary
const myDict = {
    eggplant: 'purple',
    tomato: 'red',
    carrot: 'orange',
};
const recode = myArr.map.bind(myArr, elem => myDict[elem]);
const result1 = recode(myArr, myDict)
console.log(result1) // => ["purple", "red", "orange", undefined]

但也许直接调用 .map() 更简单：

// input data to be recoded
const myArr = ['eggplant', 'tomato', 'carrot', 'cabbage'];

// look-up dictionary
const myDict = {
    eggplant: 'purple',
    tomato: 'red',
    carrot: 'orange',
};
const result1 = myArr.map(elem => myDict[elem])
console.log(result1) // => ["purple", "red", "orange", undefined]

如果需要用户提供的回调，则 可以使用 ES-6 默认参数：

function recode(myArr, myDict, callback = elem => myDict[elem]) {
  return myArr.map(callback);
}
// input data to be recoded
const myArr = ['eggplant', 'tomato', 'carrot', 'cabbage'];

// look-up dictionary
const myDict = {
  eggplant: 'purple',
  tomato: 'red',
  carrot: 'orange',
};

const result1 = recode(myArr, myDict)
console.log(result1) // => ["purple", "red", "orange", undefined]

const result2 = recode(myArr, myDict, elem => myDict[elem] + 'a')
console.log(result2) // => ["purplea", "reda", "orangea", "undefineda"]

Answer 3

Daniel 的回答略有不同：让另一个函数返回一个可用作 Array# 回调的函数map：

function createMapper(dict) {
  return elem => dict[elem];
}

function recode(arr, dict) {
    return arr.map(createMapper(dict));
}

但我也会质疑这是否真的是对原始代码的改进。

Answer 4

您不需要在您的情况下进行提取，这就是箭头函数存在的原因。