时间戳

首页 > 解决方案 > 我如何阅读这个多参数函数

javascript - 我如何阅读这个多参数函数

问题描述

如何阅读和解释函数的以下行：

const canUser = (permission) => (permissions) => (guideSlug) => {

这是完整的功能：

const canUser = (permission) => (permissions) => (guideSlug) => {
  if (!permissions) return false;

  const globalPermissions = permissions['*'] || {};
  const guidePermissions = permissions[guideSlug] || {};
  return globalPermissions[permission] || guidePermissions[permission] || false;
};

编辑

如果我有这样的对象：

export const checks = {
  canInvite: canUser('invite'),
}

我正在导入canInvite我的组件，然后运行该函数，给它一个guideSlug（字符串）来运行该函数。它可以工作并检查出来，我只是不完全确定如何从const canUser函数定义中理解它的作用

这里的任何澄清都会有所帮助。谢谢！

标签： javascriptecmascript-6

解决方案

const foo = function(x) { return x + 1 }可以粗略地写为const foo = x => x + 1. 后者称为箭头函数

所以

const canUser = (permission) => (permissions) => (guideSlug) => {
  if (!permissions) return false;

  const globalPermissions = permissions['*'] || {};
  const guidePermissions = permissions[guideSlug] || {};
  return globalPermissions[permission] || guidePermissions[permission] || false;
};

和

const canUser = function(permission) {
  return function(permissions) {
    return function (guideSlug) {
      if (!permissions) return false;

      const globalPermissions = permissions['*'] || {};
      const guidePermissions = permissions[guideSlug] || {};
      return globalPermissions[permission] || guidePermissions[permission] || false;
    }
  }
};

这称为partial application或currying，两者有点相同我不确定这里的准确术语是什么。

这是一个有用的案例......

const foo = (x, y) => { /* something to be done with x and y */ }
let x = foo(a,b);
let y = foo(a,c);
let z = foo(a,d);

在这里，您可以看到代码中有很多as 有点重复且可读性较差。用下面的方式写就可以解决问题了...

const foo = x => y => { /* something to be done with x and y */ }
let fooA = foo(a); // fooA is the `y => {}` function with `x = a` "partially applied"
let x = fooA(b);
let y = fooA(c);
let z = foo(a)(d); // you can still write it like this

这种模式的另一个优点是你可以传递fooA给其他函数，或者如果你想将它存储在一个抽象a的.const somethingRelevantToA = { foo: foo(a), bar: "some other prop of" }

此外，如果您想要类似的东西fooA并且fooB它们有一些共同点，例如......

const foo = x => y => {
  /* piece of code independent of x (this is being reused) */
  /* piece of code dependent only on y or x and y both */
}

因此，基本上，您不是在单独编写，而是在编写fooA并因此重用逻辑。fooBfoo

推荐阅读