脚本宝典收集整理的这篇文章主要介绍了如何使用ES6箭头函数使您的JavaScript更易于阅读，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

如何使用ES6箭头函数使您的JavaScript更易于阅读

Arrow函数是构建现代Web应用程序的新基础构建块。

在这篇文章中，您将了解Arrow Functions如何使您的代码更简洁，同时还使“this”关键字更易于管理。您还将学习隐式返回，使用箭头函数进行日志记录以及将隐式返回与对象组合。

如果您更喜欢通过视频而不是文字来学习，这里是视频格式： 视频是YouTube上的，要翻墙哦！ 什么？不会翻墙？你还是程序猿么？

箭头功能比常规功能提供两个主要优点。首先，他们更简洁。其次，他们使管理“this”关键字变得更容易一些。

我在新开发人员学习箭头函数时看到的是，它本身并不是很难理解的概念本身。可能你已经熟悉了函数，它们的好处，用例等等。但是出于某种原因，当你第一次暴露它们时，它就会让你的大脑抛出一个循环。因此，我们将采取缓慢措施，首先介绍语法与您习惯的典型函数的比较。

这里我们有一个基本的函数声明和一个函数表达式：

// fn声明
function add（x，y）{ 
  return x + y; 
}
// fn表达式
VAR add = function（x，y）{ 
  return x + y; 
}

现在，如果我们想将该函数表达式更改为箭头函数，我们将这样做：

var add = function（x，y）{ 
  return x + y; 
}
var add =（x，y）=> { 
  return x + y; 
}

同样，关于箭头函数入门的最困难的部分就是习惯于语法。一旦你对它感到很酷，继续前进，我们将深入探索。

在这一点上，您可能想知道箭头功能的所有炒作是什么。说实话，上面的例子并没有真正发挥他们的优势。我发现当你使用匿名函数时，箭头函数真的很旺盛。我们可以通过查看另一个使用的基本示例来使我们的大脑更加温暖一些语法  .map。

users.map（function（）{
}）
users.map（（）=> {
}）

好吧 - 足够的热身。让我们深入研究它。

假设我们有一个getTweets带有用户ID 的函数，在点击设计不佳的API之后，将所有用户的推文返回给我们超过50颗星和转发。使用promise链接，该函数可能看起来像这样，

function getTweets（uid）{ 
  return fetch（' https://api.users.COM/'+ uid）
    .then（function（response）{ 
      return response.json（）
    }）。
    then（function（response）{ 
      return response .data 
    }）。then（function（tweets）{ 
      return tweets.filter（function（tweet）{ 
        return tweet.stars> 50 
      }）
    }）。then（function（tweets）{ 
      return tweets.filter（function（tweet）{ 
        return tweet.rts> 50 
      }）
    }）
}

嗯，它的工作原理。但它不是世界上最漂亮的功能🤷♀️。虽然这个具体的实现有点密集，但这个想法太常见了。让我们看看迄今为止我们对箭头函数的了解如何，可以改善我们的getTweets功能。  

function getTweets（uid）{ 
  return fetch（' https://api.users.com/'+ uid）
    .then（（response）=> { 
      return response.json（）
    }）。
    then（（response）=> { 
      return response.data 
    }）。then（（tweets）=> { 
      return tweets.filter（（tweet）=> { 
        return tweet.stars> 50 
      }）
    }）。then（（tweets）=> { 
      return tweets.filter（ （推文）=> { 
        return tweet.rts> 50 
      }）
    }）
}

 

好的。它看起来基本上与我们不必输入的相同function。有益，但没有什么值得推特。让我们看看箭头函数的下一个好处，“隐式返回”。

使用箭头函数，如果你的函数有一个“简洁的主体”（一种说明一行功能的奇特方式），那么你可以省略“return”关键字，并且值将自动（或隐式）返回。

所以add前面的例子可以更新为如下所示：

var add = function（x，y）{ 
  return x + y; 
}
var add =（x，y）=> x + y;

更重要的是，该getTweets示例可以更新为如下所示：

function getTweets（uid）{ 
  return fetch（' https://api.users.com/'+ uid）
    .then（（response）=> response.json（））。
    then（（response）=> response.data）
    .then（（tweets）=> tweets.filter（（tweet）=> tweet.stars> 50））。then 
    （（tweets）=> tweets.filter（（tweet）=> tweet.rts> 50））
}

现在我们正在谈论📈。该代码不仅更容易编写，更重要的是，它更容易阅读。

现在，我们可以做的另一个改变是，如果箭头函数只有一个参数，你可以省略它()周围。考虑到这一点，getTweets现在看起来像这样：

function getTweets（uid）{ 
  return fetch（' https://api.users.com/'+ uid）
    .then（response => response.json（））。
    then（response => response.data）
    .then（tweets） => tweets.filter（tweet => tweet.stars> 50））。
    then（tweets => tweets.filter（tweet => tweet.rts> 50））
}

总的来说，我认为几乎每个类别都有很大的改进。

arrow函数的下一个好处是它们如何管理“this”关键字。如果您不熟悉“this”关键字，我建议观看WTF就是这个。

我们来看看使用ES5的一些典型的React代码。

class Popular扩展了React.component { 
  constructor（PRops）{ 
    suPEr（）; 
    this.state = { 
      repos：null，
    };
this.updateLanguage = this.updateLanguage.bind（this）; 
  } 
  componentDidmount（）{ 
    this.updateLanguage（'javascript'）
  } 
  updateLanguage（lang）{ 
    api.fetchPopularRepos（lang）.then 
      （function（repos）{ 
        this.setState（function（）{ 
          return { 
            repos：repos 
          } 
        }）; 
      }）; 
  } 
  render（）{ 
    // Stuff 
  } 
}

当组件安装时，它正在发出API请求（到GIThub API）来获取JavaScript最受欢迎的存储库。当它获得存储库时，它会获取它们并更新组件的本地状态，或者至少是我们希望它执行的操作。不幸的是，它没有那样做。相反，我们得到一个错误。你能发现这个bug吗？

上面的代码将抛出的错误是“无法读取未定义的setState”。现在，@H_512_95@为什么会发生这种情况超出了这篇文章的范围（再次，如果你需要，请观看WTF），但典型的ES5解决方案使用  .bind并看起来像这样：

class Popular扩展了React.Component { 
  constructor（props）{ 
    super（）; 
    this.state = { 
      repos：null，
    };
this.updateLanguage = this.updateLanguage.bind（this）; 
  } 
  componentDidMount（）{ 
    this.updateLanguage（'javascript'）
  } 
  updateLanguage（lang）{ 
    api.fetchPopularRepos（lang）.then 
      （function（repos）{ 
        this.setState（function（）{ 
          return { 
            repos：repos 
          } 
        }）; 
      } .bind（本））; 
  } 
  render（）{ 
    // Stuff 
  } 
}

这是为什么箭头函数很好的第二个主要好处，它们不会创建自己的上下文。这意味着通常this关键字Just Works™，而不必担心特定函数将被调用的上下文。因此，通过在updateLanguage方法中使用箭头函数，我们不必担心this我们不知道哪个.bind不得不再打电话  了。

updateLanguage（lang）{ 
  api.fetchPopularRepos（lang）.then（
    （repos）=> { 
      this.setState（（）=> { 
        return { 
          repos：repos 
        } 
      }）; 
    }）; 
}

很高兴知道

在这一点上，我们已经涵盖了所有关于箭头功能的“需要知道”。然而，我认为值得一提的是两个不同的“好知道”。

updateLanguage再看一下这个方法，如果我们想隐式返回setState回调中的对象，我们该怎么做呢？你的第一个直觉是删除return语句并返回一个对象。

api.fetchPopularRepos（lang）.then（
  （repos）=> { 
    this.setState（（）=> { 
      repos：repos 
    }）; 
  }）;

正如您可能猜到的那样，问题在于该语法与创建函数体完全相同。JavaScript无法神奇地告诉您何时想要创建一个函数体和何时想要返回一个对象以便它会抛出错误。要解决这个问题，我们可以将对象包装在其中()

api.fetchPopularRepos（lang）.then（
  （repos）=> { 
    this.setState（（）=>（{ 
      repos：repos 
    }））; 
  }）;

现在，使用该语法，我们可以使用箭头函数隐式返回一个对象。

下一个提示。假设我们想通过记录它来检查setState中组件的先前状态。如果这是你的setState函数，你将如何处理日志记录nextState？

。

this.setState（（nextState）=>（{ 
  repos：repos 
}））;

显而易见的举措是将隐式返回更改为显式返回，创建函数体，然后在该体内部进行登录。  

this.setState（（nextState）=> { 
  console.LOG（nextState）
  return { 
    repos：repos 
  } 
}）;

嗯，这很烦人。有一种更好的方法，它是使用||运算符完成的。你可以做这样的事情，而不是搞乱你所有的代码

this.setState（（nextState）=> console.log（nextState）||（{ 
  repos：repos 
}））;

  觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！  

脚本宝典总结

以上是脚本宝典为你收集整理的如何使用ES6箭头函数使您的JavaScript更易于阅读全部内容，希望文章能够帮你解决如何使用ES6箭头函数使您的JavaScript更易于阅读所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。