ES6中的箭头函数的定义和调用方式

本文介绍了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函数;

 

转载:

https://blog.youkuaiyun.com/itpinpai/article/details/52182093

ES6中引入的箭头函数(arrow function)与传统的普通函数(regular function)之间存在多个关键区别,这些差异不仅影响代码的可读性,还对功能行为产生重要影响。 1. **语法** 箭头函数使用一种更为简洁的语法形式。例如,一个简单的函数可以写成 `(x) => x * 2`,而等效的普通函数则为 `function(x) { return x * 2; }`。这种简化的语法使得代码更易于阅读编写[^2]。 2. **this 的绑定** 箭头函数不会创建自己的 `this` 上下文,它继承自外围作用域。这意味着,在箭头函数内部使用的 `this` 实际上引用的是外部作用域中的 `this` 值。相比之下,普通函数会在调用时创建一个新的 `this` 上下文,这通常取决于函数是如何被调用的。这一特性使箭头函数非常适合用于回调函数,尤其是在需要访问外部 `this` 的情况下。 3. **arguments 对象** 箭头函数不拥有自己的 `arguments` 对象,如果需要获取参数列表,可以使用 rest 参数替代。而在普通函数中,可以通过 `arguments` 对象来访问传递给函数的所有参数。 4. **作为构造器的能力** 箭头函数不能用作构造器,即不能通过 `new` 关键字实例化一个对象。尝试这样做会导致运行时错误。相反,普通函数可以通过 `new` 被用来创建新的对象实例。 5. **原型属性** 普通函数自动获得一个 `prototype` 属性,该属性指向函数的原型对象;然而,箭头函数没有自己的 `prototype` 属性,因为它们不可作为构造函数使用。 6. **生成器函数** 只有普通函数能够成为生成器函数,通过在函数定义前加上 `*` 符号,并利用 `yield` 关键字产出值。箭头函数无法以这种方式定义生成器。 7. **方法简写** 在对象字面量中定义方法时,普通函数允许使用简短的形式:`method() {}`。尽管箭头函数也可以分配给对象属性以实现类似效果,但它们并不具备相同的方法简写形式。 了解这些区别有助于开发者根据具体需求选择合适的函数类型,特别是在处理异步操作、事件监听以及React等框架中的组件逻辑时尤为重要。对于不需要自身 `this` 上下文或构造能力的情况,推荐使用箭头函数以获得更加简洁明了的代码结构。 ```javascript // 示例 - 箭头函数 const multiplyByTwo = (x) => x * 2; console.log(multiplyByTwo(5)); // 输出: 10 // 示例 - 普通函数 function multiplyByThree(x) { return x * 3; } console.log(multiplyByThree(5)); // 输出: 15 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值