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

阮一峰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. 设置为默认值格式化插件

   2. 

箭头函数的this

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

this的指向:

1. 谁调用就是谁

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

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

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

   1. 创建时作用域中的this