javascript - 如何使用 Ramda.js 在 Javascript 中动态插入二维数组
问题描述
我有以下状态
{
"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 函数。但是我不知道应该执行什么 map 函数来获得正确的数组结果。
如果你能在这里帮助我,那就太棒了?
解决方案
更新
评论要求额外的要求(我确实期望的)。这需要稍微不同的方法。这是我的看法:
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
让它更干净,如果我使用 Ramda,我不妨在它简化事情的地方使用它,所以我也使用concat
代替Array.prototype.concat
和使用,而不是像. 我发现这些使代码更易于阅读。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 不提供这样的语法。(或者实际上该语法存在已被弃用的问题。)在参数中添加具有默认值的变量是一种合理的解决方法。它允许我做相当于定义一个局部变量以避免重复表达式。
如果我们有这个:
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”表示“当前索引”,用“ia”表示“初始数组”)或类似的东西。如果我想index
作为第五个参数添加,我必须提供这些,但我不关心它们。我不会使用这些变量。
一些具有模式匹配语法的语言在这里提供下划线作为有用的占位符,表示由调用者提供但未使用的变量。虽然 JS 在语法上不支持这一点,但下划线 ( _
) 是合法的变量名,它们是一对 ( __
)。进行函数式编程的人经常像在模式匹配语言中那样使用它们。他们只是宣布这里会通过一些事情,但我不再关心它了。有建议1向 JS 添加类似的语法特性,如果通过了,我可能会使用它。
因此,如果您将_
其视为参数或__
或(很少)、、、_1
等_2
,_3
它们通常是 JS 中缺少占位符的简单解决方法。:还有其他用途,_
正如您所注意到的,有使用它作为私有对象属性前缀的约定。它也是库 Underscore 以及它的 clone-that's-grown lodash 的默认变量名。但它们之间几乎没有混淆的余地。虽然您可以想象将下划线作为参数传递给函数,但您随后会将其用作主体中的变量,并且应该清楚含义是什么。
(想想我原本打算在评论中写下这个解释!)
1如果您有兴趣,可以查看各种提案的讨论
原始答案
如果没有有关基本要求的更多信息,我将从简单开始。这个功能似乎做你想做的事:
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
然后附加到这些元素上。如果是这样的话,那就不行了。但它可能是一个很好的起点。
推荐阅读
- swift - 使用苹果统一日志os_log时,是否需要使用DispatchQueue.async?
- multithreading - OpenMP 的循环调度如何影响 ccNUMA 的性能?
- android - 在 Dart / Flutter 中将值从 min/max 重新映射到 max/min
- python - 需要有关我现有代码中的功能的帮助
- reactjs - 如何在reactjs中的img标签上显示二进制图像
- html - 如何修复增长的块内的文本
- c# - LINQ 比较属性值不相等的两个列表
- x86 - 用弯路钩住非windows api函数
- git - 我可以配置 git 以便更轻松地从 GitHub 克隆吗?
- verilog - 可能重置域交叉?