如何使用 Ramda.js 动态插入 Javascript 中的二维数组

Question

我有以下状态

{
  "array": [
    [
      "Name",
      "Phone",
      "Email"
    ]
  ],
  "indexes": {
    "Name": 0,
    "Phone": 1,
    "Email": 2
  },
  "tempInput": ["test@test.com","test2@test.com"],
  "tempDestination": "Email"
}

现在我想创建一个函数，获取对象并将输入值作为新行动态插入到指定目标的二维数组中，最终返回

{
  "array": [
    [
      "Name",
      "Phone",
      "Email"
    ],
    [
      "",
      "",
      "test@test.com"
    ],
    [ 
      "",
      "",
      "test2@test.com"
    ]
  ],
  "indexes": {
    "Name": 0,
    "Phone": 1,
    "Email": 2
  }
}

为了解决这个问题，我查看了文档并发现

R.lensProp 和 R.view。这种组合为我提供了起点（即为提供的目的地获取正确的索引，但我从那里开始被困住了。

const addInputToArray = ({ array, indexes, tempDestination, tempInput, }) => {
  // Use Lense and R.view to get the correct index
  const xLens = R.lensProp(tempDestination);
  R.view(xLens, indexes), // contains index

  // Insert the 2 Rows into newArray - I'm lost on this part.
  const newArray = array.push( // newRows )

  return {
    array: newArray,
    indexes: indexes
  }
}

我知道我必须以某种方式循环输入，例如使用映射函数。但是我不知道 map 函数应该执行什么来获得正确的数组结果。

如果你能帮我解决这个问题就太好了？

Answer 1

更新

评论要求额外的要求（我确实期望的。）这需要稍微不同的方法。这是我的看法：

const addInputToArray = (
  { array, indexes, tempDestination, tempInput, ...rest},
  index = indexes[tempDestination]
) => ({
  array: tempInput .reduce (
    (a, v, i) =>
      (i + 1) in a
        ? update ( (i + 1), update (index, v, a [i + 1] ), a)
        : concat (a, [update (index, v, map (always(''), array[0]) )] ),
    array
  ),
  indexes,
  ...rest
})

const state = {array: [["Name", "Phone", "Email"]], indexes: {Name: 0,
Phone: 1, Email: 2}, tempInput: ["test@test.com","test2@test.com"],
tempDestination: "Email"}

const state2 = addInputToArray (state)

console .log (
  state2
)

const state3 = addInputToArray({
  ...state2,
  tempInput: ['Wilma', 'Fred', 'Betty'],
  tempDestination: 'Name'
})

console .log (
  state3
)

const state4 = addInputToArray({
  ...state3,
  tempInput: [123, , 456],
  //              ^------------- Note the gap here
  tempDestination: 'Phone'
})

console .log (
  state4
)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.js"></script>
<script> const {update, concat, map, always} = R;                    </script>

请注意，在原始版本（下）中，我发现不需要 Ramda 功能。在这里，update makes it cleaner, and if I'm using Ramda, I might as well use it wherever it simplifies things, so I also use concat in place of Array.prototype.concat and use <a href="https://ramdajs.com/docs/#map" rel="nofollow noreferrer"><code>map (always(''), array[0]) 而不是像 Array (array [0] .length) .fill ('') 这样的东西。我发现这些使代码更容易阅读。

你可以很容易地删除最后的那些，但如果你要在没有库的情况下编写它，我建议你编写类似于 update 的东西，因为这样调用会使代码比它可能更干净将与此内联。

备选方案API

我在这里可能有点离谱，但我确实怀疑您在此处尝试编写的 API 仍然比您的基本要求所暗示的要复杂。该索引列表给我的印象是一种代码味道，一种变通方法而不是一种解决方案。（事实上，它很容易从数组的第一行导出。）

例如，我可能更喜欢这样的 API：

const addInputToArray = ({ array, changes, ...rest}) => ({
  array: Object .entries (changes) .reduce ((a, [k, vs], _, __, index = array [0] .indexOf (k)) =>
    vs.reduce(
      (a, v, i) =>
        (i + 1) in a
          ? update ((i + 1), update (index, v, a [i + 1] ), a)
          : concat (a, [update (index, v, map (always (''), array [0]) )] ),
      a),
    array
  ),
  ...rest
})

const state = {
  array: [["Name", "Phone", "Email"]], 
  changes: {Email: ["test@test.com","test2@test.com"], Name: ['Wilma', 'Fred', 'Betty']}
}

const state2 = addInputToArray (state)

console .log (
  state2
)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.js"></script>
<script> const {update, concat, map, always} = R;                    </script>

但无论如何，它仍然导致了一个有趣的问题，非常感谢！

说明

有评论询问此版本中 reduce 的参数。为了解释，我先退一步。我是函数式编程的忠实粉丝。这有很多意义，也有很多含义，但这里相关的一个是我更喜欢尽可能多地用表达式而不是语句来写。 foo = 1 或 if (a) {doB()} 等语句不容易进行简单分析，因为它们将时间和顺序引入了分析，否则这些分析可以以数学方式进行。

为了支持这一点，我会尽可能编写主体由单个表达式组成的函数，即使它相当复杂。我不能总是以可读的方式做到这一点，在那些情况下，我选择可读性。不过，我通常可以这样做，就像我在这里设法做到的那样，但为了支持这一点，我可能会向函数添加默认参数以支持赋值语句。纯函数式语言Haskell，对于这种临时赋值有一个方便的语法：

let two = 2; three = 3 
    in two * three  -- 6

Javascript 不提供这样的语法。（或者实际上该语法存在 it's been deprecated 这样的问题。）在参数中添加具有默认值的变量是一种合理的解决方法。它允许我做相当于定义局部变量的操作，以避免重复表达式。

如果我们有这个：

const foo = (x) =>
  (x + 1) * (x + 1)

我们在这里重复计算（x + 1）。显然这里是次要的，但在其他情况下，它们可能很昂贵，所以我们可能会写这个替换：

const foo = (x) => {
  const next = x + 1
  return next * next
}

但是现在我们有多个语句，我希望尽可能避免这种情况。相反，我们这样写：

const foo = (x, next = x + 1) =>
  next * next

我们仍然省去了重复的计算，但代码更容易进行更直接的分析。（我知道在这些简单的案例中，分析仍然很简单，但很容易想象这会如何变得更复杂。）

回到实际问题。我写了这样的代码：

<expression1> .reduce ((a, [k, vs], _, __, index = array [0] .indexOf (k)) => <expression2>

正如您所指出的，Array.prototype.reduce 最多需要四个参数，即累加器、当前值、当前索引和初始数组。我将 index 添加为新的默认参数，以避免多次计算它或添加临时变量。但我不关心当前索引或初始数组。我可以将其写成 ((a, [k, vs], ci, ia, index = <expression>)（"ci" 代表 "current index"，"ia" 代表 "initial array"）或类似的东西。如果我想添加 index 作为第五个参数，我必须提供这些，但我不关心它们。我不会使用那些变量。

一些具有模式匹配语法的语言在这里提供下划线作为有用的占位符，代表调用者提供但未使用的变量。虽然 JS 在语法上不支持，但下划线 (_) 是一个合法的变量名，它们中的一对 (__) 也是合法的。进行函数式编程的人经常像在模式匹配语言中那样使用它们。他们只是宣布这里将通过一些东西，但我不再关心它。有建议¹ 向 JS 添加类似的语法功能，如果成功，我可能会改用它。

因此，如果您看到 _ 作为参数或 __ 或（很少）_1、_2、_3 等，它们是通常是 JS 中缺少占位符的简单解决方法。 _ 还有其他用途：正如您所注意到的，有一种使用它来为私有对象属性添加前缀的约定。它也是库 Underscore as well as for its clone-that's-grown, lodash 的默认变量名。但它们之间几乎没有混淆的余地。虽然您可以想象将 Underscore 作为参数传递给函数，但您随后会将其用作主体中的变量，并且应该清楚其含义。

（没想到我原本打算在评论中写下这个解释！）

¹有兴趣的可以看a discussion的各种提案

原答案

如果没有关于基本要求的更多信息，我会从简单的开始。这个函数似乎做你想做的事：

const addInputToArray = (
  { array, indexes, tempDestination, tempInput, ...rest}, 
  index = indexes[tempDestination]
) => ({
  array: [
    array [0], 
    ...tempInput .map (v => array [0] .map ((s, i) => i == index ? v : ''))
  ],
  indexes,
  ...rest
})

const state = {array: [["Name", "Phone", "Email"]], indexes: {Name: 0, Phone: 1, Email: 2}, tempInput: ["test@test.com","test2@test.com"], tempDestination: "Email"}

console .log (
  addInputToArray(state)
)

但如果发现还有更多要求尚未表达，我不会感到惊讶。此版本从头开始构建附加元素，但您可能希望使用不同的 tempInput 和 tempDestination 再次调用它，然后附加到这些元素。如果是这样的话，那就不行了。但它可能是一个很好的起点。

如何使用 Ramda.js 动态插入 Javascript 中的二维数组

How to use Ramda.js to dynamically insert into a 2d Array in Javascript

javascript

ramda.js

更新

备选方案API

说明

原答案