本文详细解析ES6中箭头函数的定义方式与调用语法,涵盖无参、有参及参数解构写法。重点阐述箭头函数在简化回调函数中的应用,并深入探讨其核心特性:词法作用域下的this绑定、不可作为构造函数、不支持arguments对象及yield命令等限制,帮助开发者正确使用箭头函数。
本文主要介绍ES6中箭头函数的定义方式与调用方法,供读者参考学习。
箭头函数基本语法
基本用法
在ES6标准中,可以使用“箭头”(=>)符号来定义函数。
var f = v => v;
上述代码等价于以下传统函数写法:
var f = function( v ) {
return v;
}
根据是否包含参数,箭头函数的定义可分为不同形式。
1. 无参数的箭头函数
var f = () => 5;
其等价的传统函数形式为:
var f = function() { return 5};
2. 包含参数的箭头函数
var sum = ( a, b) => a + b;
其等价的传统函数形式为:
var sum = function( a, b) {
return a +b;
}
若箭头函数体内包含多条语句,需使用大括号包裹代码块,并显式使用return语句返回值。
var sum = (a, b) => { return a+b;}
由于大括号在语法中被解析为代码块,若箭头函数直接返回一个对象字面量,必须在对象外层额外添加一对大括号,以避免语法解析错误。
var getFunction = id => ({id: id, anme: "Temp"});
箭头函数支持与变量解构语法结合使用:
const full = ({first, last}) => first +" "+ last;
其等价的传统函数形式为:
function full(person) {
return person.first +" "+ person.last;
}
使用箭头函数可以使函数表达更加简洁。
箭头函数简化回调
箭头函数的一个常见应用场景是简化回调函数的编写。
[1,2,3].map(function(x){
return x*x;
});
使用箭头函数编写的回调代码如下:
[1,2,3].map(x => x*x);
另一个示例:
var result = values.sort(function(a, b){
return a -b;
});
使用箭头函数的写法如下:
var result = values.sort((a, b) => a-b);
箭头函数还可与rest参数结合使用,示例如下:
const numbers = (...nums) => nums;
numbers(1,2,3,4,5,6,7,8,9); //[1,2,3,4,5,6,7,8,9]
//...nums 表示的是一个数组
const headAndTail = ( head, ...tail) => [head, tail];
headAndTail(1,2,3,4,5,6,7,8,9);// [1, [2,3,4,5,6,7,8,9]]
箭头函数特性与限制
使用箭头函数时需注意以下几点限制:
1. 函数体内的this对象继承自定义时所在的对象,而非使用时所在的对象。
2. 箭头函数不能作为构造函数使用,即不能使用new命令实例化,否则将抛出错误。
3. 函数体内不存在arguments对象,如需获取参数列表,应使用rest参数替代。
4. 箭头函数内部不能使用yield命令,因此不能用作Generator函数。
总结
以上内容为ES6箭头函数的核心知识点,希望能为读者的学习或工作提供帮助。如有疑问,欢迎留言交流。