美文网首页
箭头函数写法

箭头函数写法

作者: 第2世界 | 来源:发表于2020-02-07 11:49 被阅读0次

语法:

1、只有一个参数,可以不用写小括号:

var single = a => a;               //相当于var single = function(a){return a;}
console.log(single('hello, world'))// 'hello, world'
var single = a => console.log(a);  //相当于var single = function(a){console.log(a);}
single('hello, world')             // 'hello, world'
 

2、没有参数,要写一个空的小括号:

var noPare = () => console.log("No parameters"); 
noPare(); //"No parameters"
3、多个参数,参数在小括号中用逗号隔开:

var mulPare = (a,b) => console.log(a+b); 
mulPare(1,2); // 3

4、函数体有多条语句,用大括号包起来:

var differ = (a,b) => {
    if (a > b) {
        return a - b
    } else {
        return b - a
    }
};
differ(5,3);  // 2

5、返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了:

var getObject = object => {
    // ...
    return ({
        name: 'Jack',
        age: 33
    })
}

6、直接作为事件,单条语句也要用大括号包起来:

form.addEventListener('input', val => {
    console.log(val);
});

7、作为数组排序回调,单条语句也要用大括号包起来:

var arr = [1, 9 , 2, 4, 3, 8].sort((x, y) => {
    return x - y ;
})
console.log(arr); // 1 2 3 4 8 9

注意:
1、与普通function实例没有区别,通过 typeof 和 instanceof 都可以判断它是一个function

var fn = a => console.log(a);
console.log(typeof fn); // function
console.log(fn instanceof Function); // true

2、this固定,不需要再多写一句var _this = this;去绑定this指向

fruits = {
    data: ['apple', 'banner'],
    init: function() {
        document.onclick = ev => {
            alert(this.data) 
        }
    }
}
fruits.init(); // ['apple', 'banner']

3、箭头函数不能用new

var Person = (name, age) => {
    this.name = name
    this.age = age
}
var p = new Person('John', 33) // error

相关文章

  • 箭头函数与普通函数的区别

    1、写法箭头函数写法简洁 ()=>{}普通函数可以作为具名函数,也可以是匿名函数2、this指向箭头函数的this...

  • 第2.4章:箭头函数

    新版写法:箭头函数 等价旧版写法:bind(this)

  • ES2015 箭头函数

    箭头函数用法 传统写法: 箭头函数写法: 注意,在只有一个参数和一条执行语句时,可以简化为下面的写法: 注意事项 ...

  • 箭头函数写法

    语法: 1、只有一个参数,可以不用写小括号: 2、没有参数,要写一个空的小括号: 4、函数体有多条语句,用大括号包...

  • 关于箭头函数的一些迷惑点,包括React组件中的使用

    一、 箭头函数是匿名函数的另一种表达形式,简化写法。 转换成箭头函数就是如下的写法: 继续举例 二、关于this指...

  • ES6箭头函数

    ES6 允许使用“箭头(=>)定义函数。箭头函数和传统的函数使用时会有一定区别,箭头函数简化了传统函数的写法,在代...

  • ES6——对象

    对象的简洁语法 下面这段代码中注释部分是老写法,注意,新写法内部使用箭头函数的话,箭头函数的this指向的是win...

  • 箭头函数笔记

    箭头函数的解决的问题: 缩减了代码量 改变this指向 简化方法的写法1,函数不带参数的写法:函数名=()=>函数...

  • ES6笔记:模板字符串和箭头函数

    ${变量名/表达式/有返回值的函数} 箭头函数的内容:原来的函数function(){} 箭头函数:1.写法更简单...

  • 简单说 JavaScript的箭头函数

    说明箭头函数本质还是函数,我们来看看他与JavaScript中普通函数的区别,先看看写法上的区别。 写箭头函数,我...

网友评论

      本文标题:箭头函数写法

      本文链接:https://www.haomeiwen.com/subject/qvrmxhtx.html