Question

我是打字稿新手，并且使用=>箭头感到困惑。任何人都可以请您解释以下javascript代码的含义：

  this.dropDownFilter = values => values.filter(option => option.value !== 'Others')

Answer 1

如果要使用 胖箭头语法 的文档。您可以看到各种类型，例如：

arg => console.log(arg); // <-- () not required if you have just one argument
(a, b) => console.log(a,b); // <-- () is required because of two arguments
arg => { return arg; } // <-- return statement is required within {}
(a, b) => { return a+b; } // <-- return statement is required within {}

this.dropDownFilter = values => values.filter(option => option.value !== 'Others')

另一个优势是它内置了词法。因此，您不必将this存储在任何变量中就可以在函数中使用它。

与此相同：

this.dropDownFilter = function(values) {
  return values.filter(function(option) {
    return option.value !== 'Others'
  })
}

如果看到：

this.dropDownFilter被分配了一个匿名函数，该函数具有一个values参数。
然后使用胖箭头语法具有隐式的return语句。
内部.filter()方法中有一个匿名函数，该函数返回过滤后的值。

Answer 2

由于您没有使用箭头功能处理范围的特殊方法，这将与：

this.dropDownFilter = function(values){
  return values.filter(function(option){ return option.value !== 'Others' })
}

Answer 3

这是描述函数的语法，其参数位于=>的左侧，而函数主体位于=>的右侧。有两个句法观察结果：

您可能已经习惯在普通函数语法中看到这些参数，通常将它们括在括号中，但是当只有一个arg时，括号是可选的，就像您在发布的代码中看到的那样。
当只有一个JS语句跟随箭头时（如您的代码所示），该语句就是函数的return语句。如果要执行多个语句，则必须将函数主体包含在{}中，并且必须显式使用return关键字。

示例：

function myFunc (arg1) {
  return arg1
}

等效于：

var myFunc = arg1 => arg1

也与

相同

var myFunc = (arg1) => {
  return arg1
}

还有其他考虑因素，例如this上下文（箭头功能实际上没有this）和arguments关键字（箭头功能中也没有），但是我试图超过我的薪水等级。如果您有兴趣，可以使用以下MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

打字稿：javascript语法的胖箭头

3 个答案: