JavaScript-ES6 – 箭头函数[常用到令人发指]

释放双眼,带上耳机,听听看~!
可以让函数的写法简单到令人发指........ b=>b

阮一峰ES6 – 箭头函数

  1. 去掉函数的function替换为=>

  2. 形参只有一个时,可以省略()

  3. 函数体如果只有一行,可以省略{}

  4. 函数体只有一行,并且有返回值,如果省略了{},必须一起省略return

// 无参数 无返回值的函数------
// const func1 = function () {
//   console.log('你好吗!!!^_^')
// }

// 去掉function
// const func1 = () => {
//   console.log('你好吗!!!^_^')
// }

// 去掉 {}
const func1 = () => console.log('你好吗!!!^_^')
// func1()

// 1个参数 无返回值的函数------
// const func2 = function (name) {
//   console.log('哎呀,可算见到你了' + name)
// }
// function 小括号去掉 花括号
const func2 = name => console.log('哎呀,可算见到你了' + name)
// func2('白素贞')

// 2个参数 无返回值的函数---------------
// const func3 = function (name, food) {
//   console.log(`${name}最喜欢吃${food}啦`)
// }

/*
    1. function
    2. {}可以省略
*/
const func3 = (name, food) => console.log(`${name}最喜欢吃${food}啦`)

// func3('花姐', '西兰花炒蛋')
// func3('素素', '土豆')

// 无个参数 有返回值的函数--------------
// const func4 = function () {
//   return '老铁双击66666!!!'
// }

/*
    1. function
    2. {}省略
    3. return必须一起省略
*/
const func4 = () => '老妹儿,吃饭饭!!'

// const data = func4()
// console.log(data)

// 1个参数 有返回值的函数--------------
// const func5 = function (food) {
//   return `牛吃的是${food},产出的是牛肉,五花趾,三花趾,牛百叶,牛板筋.....`
// }

/*
    1. function
    2. 小括号
    3. 花括号
    4. return
*/
const func5 = food => `猪吃的是${food},产出的五花肉,猪蹄,排骨.....`

// const pig = func5('猪饲料')
// console.log(pig)

// 2个参数 有返回值的函数-------------------
// const func6 = function (name, skill) {
//   return `${name}最擅长${skill}了哦!`
// }

/*
    1. function
    2. {}省略
    3. return
*/
const func6 = (name, skill) => `${name}最擅长${skill}了哦!`

// const info = func6('素素', '吃土豆')
// const info = func6('赵信', '打野!!!')
// console.log(info)

// 1个参数 有返回值的函数,函数体多行
// const func7 = function (friend) {
//   console.log(`哎呀,你的好朋友竟然是${friend}`)
//   return '嘤嘤嘤!!'
// }

/*
    1. function
    2. 小括号
*/
const func7 = friend => {
  console.log(`哎呀,你的好朋友竟然是${friend}`)
  return '秋秋秋!!'
}

const voice = func7('皮卡丘')
console.log(voice)

注意1:

  1. 箭头函数主要用来化简匿名函数

  2. 对于化简到最简单的箭头函数如何区分是否有return

  3. // 对于最简的箭头函数 都当他有return
    // 参数为a 直接返回
    const func8 = a => a
    // const func8 = function (a) {
    //  return a
    // }
    
    // a扩大两倍并返回
    const func9 = a => 2 * a
    // 内部打印a的值,并返回 console.log()执行的结果
    // console.log()的返回值是undefined
    const func10 = a => console.log(a)
  4. 箭头函数的thist

    1. 创建时就已经确定,并且不会被改变

  5. 格式化插件

    1. 设置为默认值格式化插件

箭头函数的this

使用了箭头函数之后,this的指向需要注意哦

this的指向:

  1. 谁调用就是谁

  2. call,apply,直接调用函数,并传入具体的this

  3. bind,基于某个函数,创建一个固定了this的新函数

  4. 箭头的函数的this,创建时就确定了,创建是的this是谁,就是谁

    1. 创建时作用域中的this

 

内容投诉

人已赞赏
ES6JavaScript

JavaScript-ES6 - Set数据类型[不常用]

2020-8-22 17:46:37

JavaScriptNode

Node-知识点 - knex模块基本使用[重要]

2020-8-27 18:30:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索