Question

我尝试使用谷歌搜索，但是我无法与Google讨论，有时在课程中，我看到教练将箭头函数分配给类似的变量。

const s =（）=> {}

在什么情况下我需要该语法而不使用

   function s( ) { }

我的基本问题->使用时间

const s = ( ) => { }

相对

function s( ) => { }

.. 为什么要赋值 ...那是我的主要问题（何时以及为什么赋值？）为什么不将箭头函数分配给变量而不使用它？？

Answer 1

您的示例做了不同的事情：第一个声明一个函数s，第二个调用s()。

为清楚起见...

// ES5
var multiplyES5 = function(x, y) {
  return x * y;
};

// ES6
const multiplyES6 = (x, y) => { 
  return x * y;
};

Answer 2

您的示例显示了两种声明函数的方法。

这是function declaration的示例。

function s() {
// some code
}

这是另一种定义函数的方法，称为function expression。

const s = function() {
// some code
}

这是arrow function。除了this和其他两种方法之间使用arrow function的方式外，它们几乎是编写同一函数的3种方式。

const s = () => {
// some code
}

如以下响应所述，function declaration and function expression是ES5功能，而arrow function是ES6功能。

Answer 3

箭头功能可改善代码的位置（应在何处使用）-

传统的lambda函数（现在是JavaScript中的箭头函数）的主要用例之一是用于一遍又一遍地应用于列表项的函数。

例如，如果您有一个要使用地图进行转换的值数组，则箭头函数是理想选择：

const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());

一个非常常见的示例是提取对象的特定值：

const names = objects.map(object => object.name);

类似地，当使用 forEach 将现代样式的 for 循环替换为现代的迭代器样式的循环时，箭头功能会阻止 this 父母让他们非常直观。

this.examples.forEach(example => {
   this.runExample(example);
});

承诺和承诺链-箭头函数使异步代码更简洁，更直观的目的是管理异步代码。

承诺使管理异步代码变得更加容易（即使您对使用异步/等待感到兴奋，您仍然应该了解promise，这是异步/等待建立在其之上的！）

但是，在使用promise时，仍然需要定义在异步代码或调用完成之后运行的函数。

这是箭头函数的理想位置，尤其是如果您生成的函数是有状态的，则引用对象中的某些内容。示例：

this.doSomethingAsync().then((result) => {
  this.storeResult(result);
});

对象转换- 箭头功能的另一个常见且功能极其强大的用途是封装对象转换。

例如，在Vue.js中，存在一种通用模式，可使用mapState将Vuex存储的各个部分直接包含到Vue组件中。

这涉及到定义一组“映射器”，这些映射器将从原始的完整状态对象转换为准确提取出所涉及组件所需的内容。

这些简单的转换是利用箭头功能的理想而美丽的地方。示例：

export default {
  computed: {
     ...mapState({
      results: state => state.results,
      users: state => state.users,
     });
  }
}

不应该使用箭头功能的地方-

在许多情况下，箭头功能不是一个好主意。他们不仅会帮助您，还会给您带来麻烦的地方。

第一个是对象上的in方法。这是一个函数上下文的示例，而这正是您想要的。

有一段时间趋势，使用类属性语法和箭头函数的组合作为创建“自动绑定”方法的一种方法，例如可以由事件处理程序使用但仍绑定到该类的方法。

这看起来像：

class Counter {
counter = 0;

  handleClick = () => {
    this.counter++;
  }
}

通过这种方式，即使事件处理程序使用了handleClick而不是在Counter实例的上下文中调用它，它仍然可以访问该实例的数据。

这种方法的缺点是多方面的，

尽管使用此方法确实为您提供了具有绑定功能的符合人体工程学的捷径，但该功能的行为方式很不直观，从而在您尝试将该对象作为子类/使用子对象时会抑制测试并产生问题。原型。

相反，请使用常规函数，并在必要时将其绑定到构造函数中的实例：

class Counter {
  counter = 0;

  handleClick() {
    this.counter++;
  }

  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }
}

深层调用链- 箭头函数可能会给您带来麻烦的另一个地方是，它们将被用于许多不同的组合中，尤其是在深层的函数调用中。

核心原因与匿名函数相同-它们给出了非常糟糕的堆栈跟踪。

如果您的函数仅向下一级迭代（例如在迭代器内部），这还不错，但是如果您将所有函数定义为箭头函数并在它们之间来回调用，您会很漂亮遇到错误时卡住，并仅收到以下错误消息：

{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()

具有动态上下文的功能- 箭头功能可能会给您带来麻烦的最后一种情况是动态绑定 this 的地方。

如果在这些位置使用箭头功能，则动态绑定将不起作用，并且您（或其他后来使用您的代码的人）可能对事情为何无法按预期运行感到非常困惑。

一些关键示例：

事件处理程序时，会将 this 设置为事件的 currentTarget 属性。
如果您仍在使用jQuery，则大多数jQuery方法会将 this 设置为已选择的dom元素。
如果您使用的是Vue.js，则方法和计算函数通常会将 this 设置为Vue组件。

当然，您可以故意使用箭头功能来覆盖此行为，但是特别是在jQuery和Vue的情况下，这通常会干扰正常功能，并使您困惑为什么看起来与附近其他代码相同的代码不起作用。 / p>

此节录摘自here

Answer 4

我认为您的意思是在更新中function s( ) { }。

注意该函数声明如何包含名称s。此隐式会创建变量s并将函数分配给它。箭头函数定义不包含名称。因此，要在其他地方使用/调用/引用功能在其他地方，您必须将其明确分配给变量。

为什么不将箭头功能分配给变量??

这样做的唯一原因是将调用括号放在定义之后，例如

(() => console.log('test'))()

这将立即定义并调用该函数，并在控制台上打印“测试”。

但是这样做没有什么意义，因为代码相当于只写

console.log('test')

Answer 5

因此，在JavaScript中，我们一直都在编写函数表达式，以至于决定使用更紧凑的语法来定义它们。这是编写函数的另一种方式。

const square = x => {
  return x * x;
}

我特意在x周围没有括号，因为当只有一个参数时，当前语法表明我们可以取消括号。

以上内容实际上是完整功能，您可以在其上运行square(4);并获取16。

想象一下，您有这样写的嵌套回调：

const square = function(x){
  return x * x;
}

随处可见关键字function，过一会儿会让你发胖。

箭头函数更简洁，但箭头函数不仅仅是语法糖，还有另一个区别，那就是与关键字this有关。

如果您对关键字this不太了解，我强烈建议您开始从中获取有关该主题的可靠信息，至少与箭头功能有关。该研究应该揭示在什么情况下需要使用箭头功能。

就为什么要为其分配变量，您必须查看mph85概述的箭头功能的演变。您从函数声明开始：

function isEven(num) {
  return num % 2 === 0;
}

分配给匿名函数声明，该声明分配为名为isEven的变量：

const isEven = function(num) {
  return num % 2 === 0;
}

分配给名为isEven的变量的匿名函数声明，演变为分配给所述变量的箭头函数表达式。

const isEven = (num) => {
  return num % 2 === 0;
}

我们可以提高底注，并通过隐式返回使之更加简洁，我们可以像下面这样放下括号，花括号和return关键字：

const isEven = num => num % 2 === 0;

我认为观察它的发展很重要，因此只要您看到上面的最后一个版本，它都不会把您赶走。

JavaScript箭头功能分配

5 个答案: