[英]Converting object literals into functions in ES6 Javascript
I was reading this article at hackernoon.com that tries to explain a particular approach to turn javascript Switch/Case into a functional version of it self.我在hackernoon.com 阅读了这篇文章,它试图解释一种将javascript Switch/Case 变成它自身的功能版本的特定方法。
The article reaches a point where they set a function called switchcase
, defined as:文章达到了一个点,他们设置了一个名为 switchcase 的
switchcase
,定义为:
const switchcase = cases => defaultCase => key =>
cases.hasOwnProperty(key) ? cases[key] : defaultCase
They also say that this function has a problem, as "the entire object literal is evaluated before being passed to the switchcase function".他们还说这个 function 有一个问题,因为“整个 object 文字在传递给 switchcase 函数之前已经过评估”。 And so they decide to convert the values in the object literal to functions.
因此他们决定将 object 文字中的值转换为函数。 To do so they utilize this syntax:
为此,他们使用以下语法:
const switchcaseF = cases => defaultCase => key =>
switchcase(cases)(defaultCase)(key)()
My question is: How does this last syntax work?我的问题是:最后一个语法是如何工作的? Can anyone break it down for me?
谁能帮我分解一下?
By using functions, you need to take a function for defaultCase
as well.通过使用函数,您还需要为
defaultCase
取一个 function。
const switchcase = cases => defaultCase => key => cases.hasOwnProperty(key)? cases[key]: defaultCase const switchcaseF = cases => defaultCase => key => switchcase(cases)(() => defaultCase)(key)() // ^^^^^^^^^^^^^^^^^ ^^ console.log(switchcaseF({ foo: () => 'bar' })('nothing')('foo')); console.log(switchcaseF({ foo: () => 'bar' })('nothing')('baz'));
It would be cleared if rewrite this with simple function.如果用简单的 function 重写它,它将被清除。
First, rewrite switchcase
.首先,重写
switchcase
。 This function is a result of currying next function with three arguments这个 function 是用三个 arguments 柯里化下一个 function 的结果
function switchcase(cases, defaultCase, key){
if(cases.hasOwnProperty(key)){
return cases[key];
}
return defaultCase;
}
So, if rewrite switchcaseF
we get next:所以,如果重写
switchcaseF
我们得到下一个:
function switchcaseF(cases, defaultCase, key){
var selectedFunc = switchcase(cases, defaultCase, key);
return selectedFunc();
}
How does this last syntax work?
最后一个语法是如何工作的? Can anyone break it down for me?
谁能帮我分解一下?
Consider the definition of switchcase
and switchcaseF
.考虑
switchcase
和switchcaseF
的定义。
const switchcase = cases => defaultCase => key =>
cases.hasOwnProperty(key) ? cases[key] : defaultCase
const switchcaseF = cases => defaultCase => key =>
switchcase(cases)(defaultCase)(key)()
If we inline the application of switchcase
within switchaseF
we get the following.如果我们在
switchcase
中内联switchaseF
的应用程序,我们会得到以下结果。
const switchcaseF = cases => defaultCase => key =>
(cases.hasOwnProperty(key) ? cases[key] : defaultCase)()
//|____________________________________________________|
// |
// switchcase(cases)(defaultCase)(key)
Furthermore, we can move the function application inside the conditional expression.此外,我们可以将 function 应用程序移动到条件表达式中。
const switchcaseF = cases => defaultCase => key =>
cases.hasOwnProperty(key) ? cases[key]() : defaultCase()
Now, consider the example from the article that you linked to.现在,考虑您链接到的文章中的示例。
const counter = (state = 0, action) =>
switchcaseF({
'INCREMENT': () => state + 1,
'DECREMENT': () => state - 1
})(() => state)(action.type)
If we inline the application of switchcaseF
within counter
we get the following.如果我们在
counter
中内联switchcaseF
的应用程序,我们会得到以下结果。
const counter = (state = 0, action) => {
const cases = {
'INCREMENT': () => state + 1,
'DECREMENT': () => state - 1
}
const defaultCase = () => state
const key = action.type
return cases.hasOwnProperty(key) ? cases[key]() : defaultCase()
}
Hence, if action.type
is 'INCREMENT'
then the result is state + 1
.因此,如果
action.type
是'INCREMENT'
那么结果是state + 1
。 If action.type
is 'DECREMENT'
then the result is state - 1
.如果
action.type
是'DECREMENT'
那么结果是state - 1
。 Otherwise, the result is state
.否则,结果为
state
。
The reason we write expressions like () => state + 1
instead of simply state + 1
is for lazy evaluation .我们写
() => state + 1
而不是简单的state + 1
的原因是为了惰性求值。 We only evaluate the body of () => state + 1
when the function is called.我们只在调用 function 时评估
() => state + 1
的主体。 This prevents incorrect behaviour like in the following example.这可以防止不正确的行为,如下例所示。
const switchcase = cases => defaultCase => key => cases.hasOwnProperty(key)? cases[key]: defaultCase const never = () => { while (true); } const example = key => switchcase({ never: never() })('it works')(key) console.log(example('it should work')) // expected 'it works' but never returns
Using switchcaseF
solves this problem.使用
switchcaseF
解决了这个问题。
const switchcaseF = cases => defaultCase => key => cases.hasOwnProperty(key)? cases[key](): defaultCase() const never = () => { while (true); } const example = key => switchcaseF({ never: () => never() })(() => 'it works')(key) console.log(example('it should work')) // 'it works' as expected
However, note that you can use getters to make it work with switchcase
too.但是,请注意,您也可以使用 getter 使其与
switchcase
一起使用。
const switchcase = cases => defaultCase => key => cases.hasOwnProperty(key)? cases[key]: defaultCase const never = () => { while (true); } const example = key => switchcase({ get never() { return never(); } })('it works')(key) console.log(example('it should work')) // 'it works' as expected
We can also make defaultCase
lazy.我们也可以让
defaultCase
变得懒惰。
const switchcase2 = cases => defaultCase => key => cases.hasOwnProperty(key)? cases[key]: defaultCase.value const never = () => { while (true); } const example = key => switchcase2({ get never() { return never(); } })({ get value() { console.log('yes'); return 'it works'; } })(key) console.log(example('it should work')) // 'yes' 'it works' as expected
If you don't want it to be lazy then you can wrap it in strict
as follows.如果您不希望它变得懒惰,那么您可以将其
strict
包装如下。
const switchcase2 = cases => defaultCase => key => cases.hasOwnProperty(key)? cases[key]: defaultCase.value const never = () => { while (true); } const strict = value => ({ value }) const example = key => switchcase2({ get never() { return never(); } })(strict('it works'))(key) console.log(example('it should work')) // 'it works' as expected
Hope that elucidates your doubts.希望能解开你的疑惑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.