箭头函数值得流行。它的语法简洁明了，使用词法绑定来绑定this，非常适合作为回调。在本文中，通过解决它们来学习5个最佳实践，以便我们可以更多地了解箭头函数并从中获得更多收益。1、箭头函数名推断JS中的箭头函数是匿名的：函数的name属性为''。(数字=>数字+1).名字;//=>''在调试会话或调用堆栈分析期间，匿名函数被标记为匿名。不幸的是，匿名程序不会提供任何有关正在执行的代码的线索。这是执行匿名函数的代码的调试会话：右侧的调用堆栈由两个标记为匿名的函数组成，我们无法从这些调用堆栈信息中获取任何有用的信息。幸运的是，函数名称推断（ES2015的一项功能）可以在特定条件下检测函数名称。名称推断的思想是JS可以从它的语法位置确定箭头函数名称：从持有函数对象的变量的名称。让我们看看函数名推断是如何工作的：constincreaseNumber=number=>number+1;increaseNumber.name;//=>'increaseNumber'因为变量increaseNumber持有箭头函数，所以JS决定使用increaseNumber作为函数名。因此，箭头函数的名称是“increaseNumber”。实践#1：一个好的实践是使用函数名称推断来命名箭头函数。现在我们使用名称推断来检查带有代码的调试会话：因为箭头函数有名称，所以调用堆栈提供了有关正在执行的代码的更多信息。handleButtonClickgainCounter2。尽可能使用内联内联函数是只有一个表达式的函数。我喜欢用箭头函数来编写简短的内联函数。例如，不要使用箭头函数的长形式：constarray=[1,2,3];array.map((number)=>{returnnumber*2;});当箭头函数只有一个表达式Braces{}和return语句时可以很容易地去掉：constarray=[1,2,3];array.map(number=>number*2);第二种做法：当函数只有一个表达式时，一个好的做法是使用内部链接箭头函数格式3.粗箭头和比较运算符比较运算符>、<、<=和>=看起来类似于粗箭头=>（它定义了一个箭头函数）。在内联箭头函数中使用这些比较运算符时会出现一些混淆。例如，我们使用<=运算符定义箭头函数constnegativeToZero=number=>number<=0?0:number;在同一行出现两个符号=>和<=会产生误导。为了清楚地区分粗箭头和比较运算符，我们可以使用括号：constnegativeToZero=number=>(number<=0?0:number);第二种选择是使用更长的形式来定义箭头函数：constnegativeToZero=number=>{returnnumber<=0?0:number;};这些重构消除了粗箭头符号和比较运算符之间的混淆。实践3：如果箭头函数包含运算符>、<、<=和>=，一个好的做法是将表达式括在一对括号中，或者有意使用箭头函数的较长形式。4.构造普通对象在内联箭头函数中使用对象字面量会引发语法错误：constarray=[1,2,3];//throwsSyntaxError!array.map(number=>{'number':number});JS认为大括号是代码块，而不是对象字面量。在对象字面量中加一对括号可以解决这个问题：constarray=[1,2,3];//Works!array.map(number=>({'number':number}));如果对象字面量Quantities有很多属性，我们可以使用包装，同时仍然保持箭头函数内联constarray=[1,2,3];//Works!array.map(number=>({'number':number'propA':'valueA','propB':'valueB'}));第四种做法：在内联箭头函数中使用对象时，将对象用一对括号括起来。5.注意过度嵌套的箭头函数语法很短，这很好。然而，作为一个副作用，当许多箭头函数被嵌套时，它可能会变得模糊。我们考虑以下情况。单击按钮时，向服务器发起请求，当响应准备就绪时，将项目记录到控制台：myButton.addEventListener('click',()=>{fetch('/items.json')。然后(响应=>response.json());.then(json=>{json.forEach(item=>{console.log(item.name);});});});箭头函数嵌套了三层，看懂代码的作用需要时间和精力。为了提高嵌套函数的可读性，第一种方法是为每个包含箭头的函数引入一个变量，该变量应该简洁地描述函数的作用。constreadItemsJson=json=>{json.forEach(item=>console.log(item.name));};constandleButtonClick=()=>{fetch('/items.json').then(response=>response.json());.then(readItemsJson);};myButton.addEventListener('click',handleButtonClick);重构将箭头函数提取到变量readItemsJson和handleButtonClick中。嵌套级别从3减少到2。现在我们可以更容易地理解脚本的作用。更好的是，整个函数可以使用async/await语法重构，这是函数嵌套的一个很好的解决方案：);json.forEach(item=>console.log(item.name));};myButton.addEventListener('click',handleButtonClick);第五种做法：避免箭头函数的过度嵌套，好的做法是将箭头函数提取为独立函数，或者尽可能使用async/await语法。6.总结JS中的箭头函数是匿名的。为了使调试更高效，一个好的做法是使用变量来保存箭头函数，这样可以让JS推断出函数名。当函数体有表达式时，嵌入式箭头函数很方便。运算符>、<、<=和>=看起来类似于粗箭头=>，在内联箭头函数中使用这些运算符时必须小心。对象字面量语法{prop:'value'}类似于代码块{}。因此，当在嵌入式箭头函数中放置对象字面量时，需要用一对括号括起来：()=>({prop:'value'})。最后，过多的函数嵌套模糊了代码的意图。减少箭头函数嵌套的一个好方法是将它们提取到变量中。或者，尝试使用更好的功能，如async/await语法。对于箭头函数，大家有什么建议欢迎留言讨论。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具，Fundebug。原文：https://dmitripavlutin.com/ja...
