ES6 中的默认函数和箭头函数详解
随着前端开发的不断发展和进步，ES6 中新增的默认函数和箭头函数成为了前端程序员必须掌握的知识之一。本篇文章将详细介绍 ES6 中的默认函数和箭头函数的概念、特点，以及使用时需要注意的事项。
默认函数
默认函数是在函数声明时为参数设置默认值的一种方式，例如：
function foo(a = 1, b = 2) {
console.log(a, b);
}
foo(); // 1 2
foo(3); // 3 2
foo(3, 4); // 3 4在上面的例子中，我们在 foo 函数声明中为参数 a 和 b 分别设置了默认值。当调用 foo 函数时，如果没有传递对应的参数值，则使用默认值。如果传递了参数值，则使用传递的值。
除了在函数声明时为参数设置默认值外，我们也可以在函数调用时为参数设置默认值，例如：
-- -------------------- ---- ------- -------- ------ -- - - - - --- --------- - - - -- - - - --- --------- - - - -- -------------- --- - ------ -- - - ------- -- - - ------ --- -- - -
上述代码使用三目运算符来判断参数是否为 undefined，如果是则使用默认值。与声明时设置默认值相比，此方式较为繁琐，并且无法在函数声明中提供参数的默认值，从而在代码可读性和编码效率方面有很大的差距。
箭头函数
箭头函数是 ES6 中引入的一种新的函数声明方式，它的语法形式相对简洁，应用范围也广泛。
箭头函数的语法形式如下：
(param1, param2, …, paramN) => { statements };其中 param1, param2, …, paramN 为函数的参数，可包含 0 个以上的参数，使用逗号分隔。如果只有一个参数，也可以省略括号。语句块 { statements } 可以包含 0 个以上的语句，使用花括号 {} 包裹。
与传统的函数声明相比，箭头函数有以下特点：
- 省略了
function关键字。 - 如果只有一个参数，可以省略括号。
- 如果只有一条语句，可以省略花括号
{}。 - 箭头函数内的
this指向定义该函数时的对象，而不是被调用时的对象。
下面是一些箭头函数的使用示例：
-- -------------------- ---- -------
--- --- - --- -- -- - - --
------------------ ---- -- -
--- --- - - -- ---------------
------------- -- -----
--- --- - -- -- ---------------------
------ -- -----
--- --- - -
----- -------
---- ---------- -
------------- -- -
-----------------------
-- ------
-
--
---------- -- ----注意事项
在使用默认函数和箭头函数时，需要注意以下事项：
- 默认函数的默认值只在调用时才会生效，因此在函数内部将参数值赋为 undefined 不会触发默认值。
- 使用默认函数时，参数默认值的作用域是当前函数作用域，因此在声明参数默认值时不能引用后面的参数。
- 箭头函数不能通过
new关键字调用。 - 箭头函数内部的
arguments对象与普通函数的不同，箭头函数中没有arguments对象，但可以使用rest参数代替。 - 箭头函数中的
this指向定义该函数时的对象，而不是被调用时的对象。因此，箭头函数通常不能用来定义对象的方法。 - 如果需要在箭头函数中使用解构赋值方式定义参数，需要将参数使用括号包裹。
总结
本篇文章详细介绍了 ES6 中的默认函数和箭头函数的概念、语法形式和使用方法，以及使用时需要注意的事项。通过学习和掌握这些知识，我们可以更加高效地编写前端代码，并且在团队协作中更好的合作和沟通。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499575648841e9894656eba