JavaScript箭头功能非常流行。而且它们应得的，在简洁的语法，词法绑定this以及它们非常方便用作回调的事实上有所不同。
我们今天发布的翻译材料包括5条关于箭头功能使用的建议。利用这些建议的人有机会更充分地揭示这种功能的潜力。
1.使用箭头功能名称显示
JavaScript箭头函数是匿名的：它们的属性name包含一个空字符串- ''。( number => number + 1 ).name;
anonymous在调试期间或在分析调用堆栈时，会将
匿名功能标记为。不幸的是，这个词anonymous没有暗示它与哪个特定代码有关。这是调试代码中调用匿名函数的要点之一。包含匿名函数的调试代码图右侧的调用堆栈包含对2个标记为的函数的引用anonymous。从调用堆栈中包含的此类信息中，我们无法了解有关代码的任何有用信息。幸运的是，JavaScript具有一种用于导出函数名称的机制（ES2015功能），该机制在某些条件下能够检测函数名称。名称输出的想法是JavaScript可以从其语法位置（即基于存储指向函数对象的链接的变量的名称）中找出箭头函数的名称。让我们看一下在操作中派生函数名称的机制：const increaseNumber = number => number + 1;
increaseNumber.name;
由于箭头函数的引用存储在变量中increaseNumber，因此JavaScript决定该名称'increaseNumber'非常适合该函数。结果，箭头功能也获得了这样的名称。建议使用函数名称派生机制来命名箭头函数。现在让我们看一下调试过程，在此过程中使用了派生函数名的机制。包含给定名称的箭头函数的调试代码由于箭头函数现在具有名称，因此调用堆栈提供了有关正在执行的代码的更多有用信息：- 该函数的名称
handleButtonClick表示对事件处理程序的调用click。 - 该名称
increaseCounter表示对递增计数器的函数的调用。
2.尽可能编写内联函数
“内联”函数是由单个表达式组成的函数。在箭头函数中，我喜欢这样的事实：它们非常便于创建短内联函数。例如，这是箭头函数的“完整”形式：const array = [1, 2, 3];
array.map((number) => {
return number * 2;
});
此功能可以很容易地变得更紧凑。即，由于该函数仅包含一个表达式，因此可以删除花括号和return：const array = [1, 2, 3];
array.map(number => number * 2);
建议如果一个函数仅包含一个表达式，则使其内联。3.小心使用箭头功能和比较运算符。
比较运算符>，<，<=和>=非常相似的箭头=>通过声明箭头功能（如箭头也被称为“粗箭头”）。在内联函数中使用比较运算符时，结果代码可能不太清楚。声明使用运算符的箭头功能<=：const negativeToZero = number => number <= 0 ? 0 : number;
在字符中的一个线的存在=>和<=disorientates的代码阅读器。为了清楚地将箭头与比较运算符区分开，可以使用几种方法。首先，您可以将表达式括在括号中：const negativeToZero = number => (number <= 0 ? 0 : number);
其次，您可以使用更长的结构有意地声明一个箭头函数：const negativeToZero = number => {
return number <= 0 ? 0 : number;
};
这些转换消除了同一行中同时使用箭头符号和比较运算符引起的不确定性。建议如果单行函数“箭头”包含，，和语句>，以在括号中得出相应的表达式，或使用多格式广告箭头函数。<<=>=4.在箭头函数中创建简单对象时，请使用括号或多行结构
在嵌入式箭头函数中使用对象文字会导致语法错误：const array = [1, 2, 3];
array.map(number => { 'number': number });
JavaScript认为花括号是代码块，而不是对象文字。如果将对象文字括在括号中，则将解决此问题：const array = [1, 2, 3];
array.map(number => ({ 'number': number }));
如果对象文字具有许多属性，那么您甚至可以在这里使用换行符。箭头功能仍然保留：const array = [1, 2, 3];
array.map(number => ({
'number': number
'propA': 'value A',
'propB': 'value B'
}));
当在直接函数中使用对象文字时，建议将其括在括号中。5.小心嵌套太深。
箭头函数在简洁语法上有所不同。很好。但是正因为如此，彼此嵌入的许多箭头功能可能形成难以阅读的结构。请考虑以下情形。当他们单击按钮时，将执行对服务器的请求。收到包含一组某些元素的服务器响应时，这些元素的名称将显示在控制台中：myButton.addEventListener('click', () => {
fetch('/items.json')
.then(response => response.json())
.then(json => {
json.forEach(item => {
console.log(item.name);
});
});
});
在这里，我们看到了嵌套箭头功能的三个级别。为了深入研究这段代码中发生的事情，您需要花费一些时间。可以使用几种方法来提高嵌套函数的可读性。第一种方法是将函数引用写入变量。变量名称应简要描述函数的本质（请参阅有关函数名称派生的建议1）。const readItemsJson = json => {
json.forEach(item => console.log(item.name));
};
const handleButtonClick = () => {
fetch('/items.json')
.then(response => response.json());
.then(readItemsJson);
};
myButton.addEventListener('click', handleButtonClick);
在重构期间，我们提取了嵌套的箭头函数并将其写入readItemsJson和变量中handleButtonClick。代码的嵌套级别从3减少到2。现在，代码变得更加容易理解。重构此代码的另一种方法是将整个函数转换为一种格式async/await。这是解决嵌套函数问题的好方法：const handleButtonClick = async () => {
const response = await fetch('/items.json');
const json = await response.json();
json.forEach(item => console.log(item.name));
};
myButton.addEventListener('click', handleButtonClick);
建议避免将箭头函数嵌套太深，将它们作为单独的函数提取到变量中，或者在可能的情况下使用语法async/await。摘要
JavaScript箭头函数是匿名的。为了使代码调试更加高效，建议使用存储函数引用的变量。这使JavaScript可以显示函数名称。当函数主体仅包含一个表达式时，嵌入式箭头函数很有用。运营商>，<，<=和>=像一个箭头=>，其声明功能开关时使用。在可嵌入箭头函数的主体中使用这些运算符时，应考虑代码转换。对象文字的语法就像{ prop: 'value' }是一个代码块{}。结果，将对象文字放置在嵌入式箭头函数中时，必须将其括在括号中：() => ({ prop: 'value' })。函数嵌套太高会使读取代码的人感到困惑。建议通过提取函数并将其写入变量来降低函数的嵌套级别。减少代码嵌套级别的另一种方法是使用构造async/await。亲爱的读者们！您知道使用箭头功能的任何有趣技巧吗？