ES6箭头函数学习笔记

sydMobile 发布于2019-08-21 10:51 / 2809人阅读

摘要：普通函数里代表了调用时传入的参数，但是箭头函数不然，箭头函数会把当成一个普通的变量，顺着作用域链由内而外地查询。不能被箭头函数不能与关键字一起使用，会报错。

语法

具有一个参数的简单函数

var single = a => a
single("hello, world") // "hello, world"

没有参数的需要用在箭头前加上小括号

var log = () => {
    alert("no param")
}

多个参数需要用到小括号，参数间逗号间隔，例如两个数字相加

var add = (a, b) => a + b
add(3, 8) // 11

函数体多条语句需要用到大括号

var add = (a, b) => {
    if (typeof a == "number" && typeof b == "number") {
        return a + b
    } else {
        return 0
    }
}

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

var getHash = arr => {
    // ...
    return ({
        name: "Jack",
        age: 33
    })
}

直接作为事件handler

document.addEventListener("click", ev => {
    console.log(ev)
})

作为数组排序回调

var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
    if (a - b > 0 ) {
        return 1
    } else {
        return -1
    }
})
arr // [1, 2, 3, 4, 8, 9]

特性

this：用function生成的函数会定义一个自己的this，而箭头函数没有自己的this，而是会和上一层的作用域共享this。

apply & call：由于箭头函数已经绑定了this的值，即使使用apply或者call也不能只能起到传参数的作用，并不能强行改变箭头函数里的this。

arguments：普通函数里arguments代表了调用时传入的参数，但是箭头函数不然，箭头函数会把arguments当成一个普通的变量，顺着作用域链由内而外地查询。

不能被new：箭头函数不能与new关键字一起使用，会报错。

typeof运算符和普通的function一样：

var func = a => a
console.log(typeof func); // "function"

instanceof也返回true，表明也是Function的实例:

console.log(func instanceof Function); // true

海外云主机 GPU服务器箭头函数学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86297.html

ES6学习笔记之箭头函数

摘要：特性介绍箭头函数是新增的特性之一，它为这门语言提供了一种全新的书写函数的语法。用生成的函数会定义一个自己的，而箭头函数没有自己的，而是会和上一层的作用域共享。本文同步自我得博客：http://www.joeray61.com JS中的箭头箭头在JS里并不算是个新鲜的玩意儿，一直以来，JS都支持-->这样的箭头。很早的时候有些浏览器还不支持JS，当时的人们为了兼容这些浏览器，需要这...

Vultr 2019-08-19 18:12 评论0 收藏0
es6学习笔记-箭头函数_v1.0_byKL

摘要：因为箭头函数本身没有所以不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。箭头函数不可以使用对象，该对象在函数体内不存在。 es6学习笔记-箭头函数_v1.0 箭头函数使用方法 var f = v => v; //普通函数配合箭头函数写法,这里并且是传参的 //相当于 var f = function(v) { return v; }; /*-----------...

lushan 2019-08-20 14:47 评论0 收藏0
ES6学习笔记

摘要：所以，如果一个数组成员不严格等于，默认值是不会生效的因为不严格等于对象解构对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。 http://es6.ruanyifeng.com/?se... 一、作用域 let //i作用域在全局，每次循环i都被重新赋值了而覆盖了之前的值 var a = []...

Gu_Yan 2019-08-20 14:34 评论0 收藏0
学习ES6笔记──工作中常用到的ES6语法

摘要：但是有了尾调用优化之后，递归函数的性能有了提升。常被用来检查对象中是否存在某个键名，集合常被用来获取已存的信息。循环解构对象本身不支持迭代，但是我们可以自己添加一个生成器，返回一个，的迭代器，然后使用循环解构和。一、let和const 在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。对于变量来说，在ES5中...

curried 2019-08-26 12:16 评论0 收藏0
《深入理解ES6》笔记——函数（3）

摘要：错误的写法错误的写法中的构造函数新增了支持默认参数和不定参数。箭头函数的简单理解箭头函数的左边表示输入的参数，右边表示输出的结果。但是有了尾调用优化之后，递归函数的性能有了提升。作为前端切图仔，越发觉得自己离不开函数了。说到JavaScript函数，脑子里都是匿名函数、普通函数、闭包函数、构造函数......然后还能说出一大堆函数的概念。如果你达到这个水平，那么函数对你来说没有难度...

DoINsiSt 2019-08-20 18:04 评论0 收藏0