ES6 => 箭头函数

箭头函数ES6一个非常有用的新特性,我这里小小的总结一下用法:

箭头函数相当于直接return一个值,当没有参数时,可以这么写:

var f = () => 0;
// 上面这句话相当于
var f = function(){ return 0;}

当有一个参数时:

var f = num => return num;
// 上面这一句相当于
var f  = function(num) { return num;}

当有两个或以上的参数时,要用括号并用逗号分隔开:

var f = (a,b) => a+b;
// 相当于
var f = function(a,b) { return a+b;}

上面这些就是箭头函数最基本的一些情况。

当箭头函数的代码块部分多于一条语句,需要用{}括起来,使用return返回

var add = (a,b) => {
                     let sum = a+b;
                     return sum;
                   }

当需要返回一个对象时,需要在对象外面再加():

var member = id => ({id: id})

与变量解构结合使用:

    var person = {
        first: ‘小明‘,
        last: ‘小红‘
    }
    const friend = ({ first, last }) => first + ‘ ‘ + last;
    console.log(friend(person))

使用注意点:
( 1 )函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。
( 2 )不可以当作构造函数,也就是说,不可以使用 new 命令,否则会抛出一个错误。

对于第一点,有一个例子让大家加深理解:

    window.s2 = 10;
    function Timer() {
        this.s1 = 0;
        this.s2 = 0;
//  箭头函数
setInterval(() => this.s1++, 100);
//  普通函数
setInterval(function () {
    this.s2++;
}, 100);
}
var timer = new Timer();
setTimeout(() => console.log(‘s1: ‘, timer.s1), 310);// 3
setTimeout(() => console.log(‘s2: ‘, timer.s2),310);// 0
setTimeout(() => console.log(‘s2: ‘, window.s2), 310);// 13
时间: 2024-12-20 21:10:30

ES6 => 箭头函数的相关文章

es6箭头函数讲解

es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var sum = (num1,num2) => num1+num2 ; //等同于 var sum = function(num1,num2){ return num1+num2 } [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].ma

ES6 — 箭头函数

一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': function () { setInterval(function () { console.log('我叫' + this.name + '我今年' + this.age + '岁!') }, 1000) } } Person.sayHello() 上例的输出结果是什么呢?可能对javascript

es6箭头函数 this 指向问题

es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){return this.a} } }; console.log(new factory().c.b()); // a+ 通过es5的语法调用,返回的是 a+ ,this 的指向是该函数被调用的对象,也就是说函数被调用的时候,这个 this 指向的是谁,哪个对象调用的这个函数,这个 this 就是谁.

ES6 -箭头函数 ,对象的函数解构

ES6 -箭头函数: //es6 中的箭头函数和扩展 //es5的写法 // function add(a,b){ // return a + b; // } // add(1,2); //3 function add1(a,b=1){ if(a==0){ throw new Error('a is zero'); } return a+b; } //console.log(add1(0)) //Uncaught Error: a is zero 主动抛出异常 //严谨模式 function a

Vue ES6箭头函数使用总结

Vue ES6箭头函数使用总结   by:授客 QQ:1033553122   箭头函数 ES6允许使用“箭头”(=>)定义函数: 函数不带参数 定义方法:函数名称 = () => 函数体 let func = () => 1 等同于 function func() { return 1; } 函数只带一个参数 定义方法: 函数名称 = 参数 => 函数体 或者 函数名称 = (参数) => 函数体   let func = state => state.count 等

es6箭头函数

1.先来看看es6对函数做了什么:默认值! function add(a=1,b=2) {//默认值 console.log(a+b) } add(5,6); let a=0; if(a==0){ // throw new Error('错误')//手动报错 } //console.log(add.length)//如果给了默认值,那就不计算在必要参数里,也就是得到0了 //好奇的朋友可以打开注释试一试,这个默认参数和必要参数不一样哦,不给默认值的为必要参数,是你必须要传入的,给了默认值的就不用

【转载】ES6——箭头函数

转载自:https://segmentfault.com/a/1190000004470909 侵删! 箭头函数 定义 定义一个箭头函数很简单,基本语法是: ([param] [, param]) => { statements } param => expression param 是参数,根据参数个数不同,分这几种情况:() => { ... } // 零个参数用 () 表示:x => { ... } // 一个参数可以省略 ():(x, y) => { ... } //

ES6 箭头函数this指向

箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使用arguments对象,该对象在函数体内不存在.如果要用,可以用Rest参数代替. (4)不可以使用yield命令,因此箭头函数不能用作Generator函数. 上面四点中,第一点尤其值得注意.this对象的指向是可变的,但是在箭头函数中,它是固定的. function foo() { setTi

JavaScript ES6箭头函数指南

前言 胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性.有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下文. 箭头函数的产生,主要由两个目的:更简洁的语法和与父作用域共享关键字this.接下来,让我们来看几个详细的例子. 新的函数语法 传统的JavaScript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你