ES6 箭头函数(详细讲解)

灰太狼 2022-12-21 06:05 99阅读 0赞

*  function 省略掉，替换为 =>
 *  参数只有一个时，可以省略 ()
 *  函数体只有一行时，可以省略 \{\}
 *  函数体只有一行，并且有返回值时，如果省略了\{\},必须省略return

//无参数，一行，无返回值的函数
    let func1 = function(){ 
      console.log('hello World')
    }
    
    let func1 = () => console.log('hello World')
    
    func1()

//1个参数，一行，无返回值的函数
    let func2 = function(p1){ 
      console.log(p1)
    }
    
    let func2 = p1 => console.log(p1)
    
    func2()

//2个参数，多行 ，无返回值的函数
    let func3 = function(p1,p2){ 
     console.log(p1)
     console.log(p2)
    }
    
    let func3 = (p1,p2) =>{ 
     console.log(p1)
     console.log(p2)
    }
    
    func3()

//无参数，一行，有返回值的函数
    let func4 = function(){ 
    return 'Hello World!';
    }
    
    let func4 = ()=> 'Hello World!'
    
    let func4Res = func4()

//1个参数，一行，有返回值的函数
    let func5 = function(p1){ 
    return p1 + 'Hello World!';
    }
    
    let func5 = p1 => p1 + 'Hello World!'
    
    let func5Res = func5('张三')

//1个参数，一行，有返回值的函数
    let func6 = function(p1,p2){ 
    return   p1 + p2 +'Hello World!';
    }
    
    let func6 = (p1,p2)=>{ 
    return p1 + p2 +'Hello World!';
    }
    
    let func6Res = func6('张三','李四')

*  箭头函数的this
 *  创建的时候this是谁运行的时候this就是谁

let person = { 
      name:'张三',
      age:'19',
      sayHi(){ 
      console.log(this)//输出的是person对象
      //保存this
      let that = this
      // window.setTimeout(function(){ 
          console.log(this)//输出window对象
          console.log(that)//person对象
      })
        setTimeout(()=>{ 
        console.log(this)//输出的是person对象
        },100)
      }
        person.sayHi()
    
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6----箭头函数

目录基本语法是：基本用法：注意：普通函数和箭头函数区别? 1.this指向问题 2.普通函数 arguments保存实际参数 3.箭头函数 rest参数保

本是古典何须时尚/ 2024年04月06日 09:21/ 0 赞/ 82 阅读

相关 Es6箭头函数

`箭头函数`是Es6新增加的一个语法特性，在简化编码方面，有着巨大亮点。下文就是我对于箭头`(=>)`函数的定义与实用说明。用法一（无参数）定义语法

不念不忘少年蓝@/ 2024年03月31日 09:05/ 0 赞/ 44 阅读

相关 ES6 箭头函数

ES6 中添加了函数新的定义语法——`箭头函数`，当有大于一个形参的时候，必须使用`()`代表部分参数，函数体大于一行时，必须使用`{}`将函数体括起来，并使用 `return

一时失言乱红尘/ 2023年08月17日 16:07/ 0 赞/ 148 阅读

相关 Es6箭头函数

let和const let 声明的变量只在 let 命令所在的代码块内有效。 const 声明一个只读的常量，一旦声明，常量的值就不能改变“（let）用来替代var声

红太狼/ 2023年07月09日 04:25/ 0 赞/ 7 阅读

相关 ES6 箭头函数(详细讲解)

function 省略掉，替换为 => 参数只有一个时，可以省略 () 函数体只有一行时，可以省略 \{\} 函数体只有一行，并且有返回值时，如果省略了

灰太狼/ 2022年12月21日 06:05/ 0 赞/ 100 阅读

相关 ES6_箭头函数

优化函数的写法如何去定义函数方式一： function sum (x, y) { return x+y } const

Bertha 。/ 2022年09月10日 02:18/ 0 赞/ 219 阅读

相关 es6 箭头函数

1.单参数 function cheng(a=3)\{ return a\a; \} let cheng= (a=3)=>a\a; console

落日映苍穹つ/ 2022年06月08日 02:12/ 0 赞/ 155 阅读

相关 ES6 — 箭头函数

一为什么要有箭头函数我们在日常开发中，可能会需要写类似下面的代码 const Person = { 'name': 'little

港控/mmm°/ 2022年05月27日 04:13/ 0 赞/ 172 阅读

相关 ES6-箭头函数

<script> //1.es6允许使用箭头=>定义函数 var f = v => v; f(44);//44

￡神魔★判官ぃ/ 2022年03月19日 15:37/ 0 赞/ 277 阅读

相关 ES6箭头函数

ES6箭头函数一、什么是箭头函数二、写法三、箭头函数中this 一、什么是箭头函数简化了匿名函数的写法，二、写法 fu

快来打我*/ 2021年09月07日 06:10/ 0 赞/ 358 阅读