在 ECMAScript 2015 中，箭头函数成为了 JavaScript 中的一种新的函数类型，它非常适合在 React 以及其他一些 JavaScript 库中进行函数式编程。箭头函数有许多的语法规则和使用方式，有助于提高代码的可读性和简化函数式编程的语法。
箭头函数的语法
箭头函数的语法非常简单 - 它们使用 => 符号来代替 function 关键字，并且可以在不使用花括号的情况下隐式地返回值。
// 使用 function 关键字定义函数
function add(x, y) {
return x + y;
}
// 使用箭头函数定义函数
const add = (x, y) => x + y;如上所述，箭头函数是使用 => 符号来替代 function 关键字的。它们还可以带有一些参数，并且在只有一个参数的情况下可以省略括号。
如果需要多行语句的函数体，可以使用花括号来将它们包装起来 静态作用域的规则会应用于箭头函数内部，这意味着它们将继承其周围上下文中的变量。
-- -------------------- ---- ------- -- -- -------- ------- -------- ------ -- - ----------------- --- ----------------- --- ------ - - -- - -- ---------- ----- --- - --- -- -- - ----------------- --- ----------------- --- ------ - - -- --
箭头函数的特性
this 指向
箭头函数没有自己的 this，它会从周围作用域继承 this 值，因此在它们内部， this 的值与周围上下文中的值相同。
-- -------------------- ---- -------
----- ------ - -
----- -------
--------- -
-- -- -------- -------
-------- ------- -
---------------------- ---------- -----------
-
-- ----------
----- ---------- - -- -- -
---------------------- --------------- -----------
-
-------- -- --------- -------- ---------
------------- -- --------- ------------- ----
-
--
-----------------在上面的例子中，使用 function 关键字定义的函数内部无法正确地获得 this 的值，而使用箭头函数定义的函数在内部可以访问到正确的 this 值。
不能使用 new
箭头函数不能被用作构造函数，因为它们没有自己的 this 绑定，因此无法作为构造函数创建新对象。
-- -------------------- ---- -------
-- ------------
-------- ------------ -
--------- - -----
------------ - ---------- -
-----------------------
-
-
-- -- ------ --
----- ---- - --- ---------------
--------------- -- -- ------
-- ------------------
----- ------- - ------ -- -
--------- - -----
------------ - -- -- -
-----------------------
-
--
----- ----- - --- ---------------- -- ----不能使用 arguments
箭头函数没有 arguments 所以你需要使用 rest 参数 ... 来获取所有的参数。
-- -------------------- ---- -------
-- --------- --------- ------
-------- ----- -
--- ----- - --
--- ---- - - -- - - ----------------- ---- -
----- -- -------------
-
------ ------
-
-- ----------
----- ---- - --------- -- -
--- ----- - --
--- ---- - - -- - - ------------ ---- -
----- -- --------
-
------ ------
--
-- -- --- --
------------------ -- ---- -- -- -
-- -- ---- --
------------------- -- ---- -- -- -箭头函数的示例
简化排序
使用箭头函数的语法可以进一步简化排序逻辑。假设有一个数组，希望按照数字大小进行排序，可以使用下面的模板来创建一个排序函数：
const nums = [4, 2, 5, 1, 3]; const sortedNums = nums.sort((a, b) => a - b); console.log(sortedNums); // [1, 2, 3, 4, 5]
在上面的代码中，使用箭头函数的语法创建了一个简单的排序函数。
映射
在数组中映射数据非常常见，通常需要编写一个函数来根据每个元素返回新的值：
const nums = [1, 2, 3, 4, 5];
const doubledNums = nums.map(function(num) {
return num * 2;
});
console.log(doubledNums); // [2, 4, 6, 8, 10]使用箭头函数的语法可以将此代码进一步简化：
const nums = [1, 2, 3, 4, 5]; const doubledNums = nums.map(num => num * 2); console.log(doubledNums); // [2, 4, 6, 8, 10]
在上面的代码中，使用箭头函数的语法来简化映射数组的操作。
总结
箭头函数是 ECMAScript 2015 中的一项新特性，它提供了一种能够更容易处理函数式编程的方式。总的来说，使用箭头函数可以带来很多好处，其中包括更易读，更直观的代码方法。当然也需要注意到箭头函数在一些情况下并不能替代常规函数；比如：常规函数可以用作构造函数，而箭头函数不能作为构造函数创建对象。通过此篇文章的学习和掌握，我们将对该特性有更深入的了解和运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c08a659e06631ab9cdc377