ES6 箭头函数

最新推荐文章于 2023-03-09 15:24:03 发布

原创最新推荐文章于 2023-03-09 15:24:03 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #前端

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了ES6中引入的箭头函数，对比了传统函数的使用方式，强调其简洁性。详细讲解了箭头函数的细节，包括单参数时括号的省略、单行代码时花括号的省略、不具有的`arguments`对象以及不同作用域下的`this`指向。同时，通过实例展示了箭头函数如何实现默认参数，并讨论了其在回调函数中的应用，如`setTimeout`内的`this`值。

ES6 箭头函数

在es6版本出来之前，我们声明函数的方式都是利用function关键字来声明，显然，这种方式在有些时候显得有些麻烦，ECMAScript6推出了箭头函数。

首先来一段代码

       let test = function () {
            console.log('1111');//1111
        }
        let test1 = () => {
            console.log('1111');//1111
        }
        test()
        test1()

这两种代码的方式都是等价的！第二种方式就是我们所称的箭头函数！

下面我们来看看箭头函数的几个细节

只有一个形参时候括号可以省略

   let test = (a) => {
            console.log(a);
        }
        let test1 = a => {
            console.log(a)
        }
        test(1)
        test1(1)

只有一句代码或者只有返回值的时候，可以省略{}

   let test = a => console.log(a);

        let test1 = a => {
            console.log(a)
        }
        test(1)
        test1(1)

箭头函数没有arguments

arguments就是当函数没有形参的时候，传入实参所接受的地方！

    let test = function () {
            console.log(arguments);//arguments[3]
        }

        let test1 = () => {
            console.log(arguments)//报错
        }
        test(1, 2, 3)
        test1(1, 2, 3)

箭头函数没有this | this指向父级作用域的

        <input type="text" id="mytext">
		mytext.oninput = function () {
            // var that = this
            setTimeout(() => {
                console.log(this.value)//input
            }, 1000)
        }

        mytext.oninput = function () {
            // var that = this
            setTimeout(function () {
                console.log(this)//window
            }, 1000)
        }

函数的默认参数

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