JavaScript 为我们提供了两种定义函数的主要方式：箭头函数和常规函数。尽管乍一看它们可能很相似，但存在一些关键差异，这些差异可能会影响代码的运行方式及其结构方式。让我们分解这些差异，以便您可以更好地理解何时使用每种类型。
箭头函数更短并且使用 =>象征。与常规函数相比，它们的外观如下：
// Regular function
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b;
使用箭头函数，如果返回单个表达式，则可以跳过 return 关键字。这使得箭头函数在更短、更简单的函数中很受欢迎。
在常规函数中，this 指的是调用该函数的对象。然而，箭头函数没有自己的 this 上下文。相反，它们从定义它们的周围代码继承这一点。
以下示例展示了这种差异如何影响行为：
const object = {
name: 'JavaScript',
regularFunction: function() {
console.log(this.name); // 'JavaScript'
},
arrowFunction: () => {
console.log(this.name); // undefined
}
};
obj.regularFunction(); // 'JavaScript'
obj.arrowFunction(); // undefined
当您将函数传递给事件侦听器时，这可能很有用，请看一下：
document.querySelector('button').addEventListener('click', function() {
console.log(this); // refers to the button element!
});
常规函数可以访问参数对象，该对象保存传递给函数的所有参数。箭头函数没有这个；他们使用剩余参数 ...args 代替。
// regular function with arguments
function sum() {
return Array.from(arguments).reduce((a, b) => a + b);
}
// arrow function with rest parameters
const sum = (...args) => args.reduce((a, b) => a + b);
箭头函数可以简化你的代码，特别是在处理需要回调的事情时 - 例如 Promise 或数组方法，如 .map() 和 .filter()。
// using arrow functions in array methods const numbers = [1, 2, 3]; const squares = numbers.map(number => number * n); // [1, 4, 9]
一般来说，箭头函数适用于：
常规函数在以下情况下很有用：
让我们注意到这里有一些有趣的事情。正如您所看到的，差异非常微妙。在大多数情况下，您选择哪一个并不重要，除非您的代码库大量使用此参数或参数（不太可能）。
底线是选择你喜欢的，只要在你的项目中保持一致。
你同意这种做法吗？
以上是JavaScript 中的箭头函数与常规函数。使用哪一个？的详细内容。更多信息请关注PHP中文网其他相关文章！
