如何将此箭头功能转换为标准功能？

Question

我有一个箭头功能,由社区中的Ele慷慨地提供,但对于我的生活,我无法理解它:

let isValid = function (arr, arr2) {
    let sum = (array, n) => array.reduce((a, an) => a + (an === n), 0);  
     return !arr2.some(n => !arr.some(an => an === n && sum(arr, an) === sum(arr2, n)))
};

有人会如此善良,将其转化为标准功能,以便我可以在我的技能水平上遵循它吗？

谢谢.

我的假设:

function isValid (arr, arr2) {
    ...this is where i'm lost
}

Answer 1

您可以使用https://babeljs.io/从这个新的 javscript 编译为“旧”javascript。您可以直接在其主页上尝试。

这是它给出的输出：

var isValid = function isValid(arr, arr2) {
  var sum = function sum(array, n) {
    return array.reduce(function (a, an) {
      return a + (an === n);
    }, 0);
  };

  return !arr2.some(function (n) {
    return !arr.some(function (an) {
      return an === n && sum(arr, an) === sum(arr2, n);
    });
  });
};

Answer 2

你的假设对于外部函数是正确的.其中的第一行将成为:

function sum(array, n) {
    return array.reduce(function(a, an) {
        return a + (an === n);
    }, 0);

阅读有关箭头函数及其与传统函数声明的不同之处.大多数(但不是完全),它们只是语法糖而不是传统功能.

它们在上下文方面差别最大,即this指向函数体内部的内容.箭头函数始终在声明函数的外部主流上下文中运行.常规功能,例如通过bind(),可以被重新命名为不同的环境.

let foo = function() {
    let bar = () => this;
    return bar();
}.bind('a');
foo(); //'a', because foo()'s context is 'a'

那糖怎么样？一开始看起来很混乱,尤其是当你在一行中有多个箭头功能时.要记住的一件重要事情是,它们只是用于手动编码的隐式速记.

let foo = a => a+1;

是相同的

function foo2(a) { return a + 1; }

(提升会有所不同,但这有点超出了这个答案的范围.)

我们可以从上面得知的一点是,在后面的部分=>是单个语句的情况下,它被解释为返回值,而不需要我们实际写入return.

foo(1); //2

这对于在一行代码中可以表达一个作业的简单函数非常有用.如果您需要更详细的函数,可以{}像往常一样将代码括起来.

let foo3 = a => {
    return a+1;
};

这再次foo与foo2上述相同.

所以,最后,打破那可怕的路线:

    let sum = (array, n) => array.reduce((a, an) => a + (an === n), 0);  

它说:

• 为本地范围变量分配一个函数 sum
• 它接受两个参数,array和n
• 它有一项工作要做,可以表达为一行代码,因此不需要绑定{和}功能体.这项工作是调用reduce()并隐式返回值
• reduce回调的第一个参数接受两个争论,a并且an
• 这个回调就像一个回调,reduce也只有一个工作要做,那个工作就是返回值a + (an === n)

关于糖的最后一个词,你可能已经发现,在箭头函数中,如果只接受一个参数,你不需要将它包在括号中.但是,多个参数和往常一样以逗号分隔.

let foo = single_arg => alert(1);
let foo2 = (arg1, arg2) => alert(2);

希望这可以帮助.