箭头函数的使用

箭头函数    用更短的语法定义函数。

箭头函数可用于替代传统函数function() {}。

   箭头函数 属于表达式函数  不存在函数提升     先声明再调用

普通函数

function fn(a, b) {
   return a + b
}

console.log(fn(1,2))

函数表达式  是匿名函数

const fn = function() {
console.log(123)
}

ES6中引入了一种新的语法编写匿名函数，我们称之为箭头函数。

一、箭头函数基本语法：

const fn = (a,b) => {
return a+b
}

console.log(fn(1,2))

声明一个变量  =      (形参) => return要返回的值

  声明了一个箭头函数之后，输入{  }希望运行的任何代码。

1.只有一个形参，可以省略小括号。

// 一个形参可以省略小括号
const fn = a = >{
return    a*a   // 4
} 

console.log(fn(4)) 


// 两个参数 小括号就不能省了
const fn = (a,b) = > a+b

console.log(fn(1,2)) // 3


// 函数没有参数 需要使用空括号
const fn = () = > {
console.log("hello") 
}

2.只有一行代码时,可以省略大括号。

const fn = a = > console.log(a)   // 1

fn(1)

3.  只有一行代码时,可以省略return   自动作为返回值被返回  

const fn = (a,b) = > a+b

4.箭头函数可以直接返回一个对象,

因为这个对象和函数的大括号冲突,所以拿小括号包起来

加括号的函数体   返回   对象字面量表达式

const fn =uname => ({name:uname})

const fn =(uname)=>({name:uname})

console.log(fn('肖战'))    // {uname:'肖战'}

uname是形参 name是属性名 uname属性值


const fn =(uname)=>{

return {name:uname}

}

//省略return 省略{}后变成 
const fn =(uname)=> {name:uname}


 console.log(fn('肖战'))  //undefined               

// 由于对象是{}容易和省略的{}混  
// undefined 理解成了函数体的{}    返回单个字面量对象 需要用(包起来)

拓展 

箭头函数 不具有arguments伪数组

使用箭头函数来编写一个函数,实现动态参数传递进行求和

// ...加一个变量
// ...arr
 let getSum = (...arr) => {
console.log(arguments) //  未捕获的引用错误arguments is not undefined 这个变量找不到
// console.log(arr)  // 使用的时候不需要写 ...
 let sum = 0
 for (let index = 0; index < arr.length; index++) {
   sum += arr[index]
        }
        console.log(sum)
      }
    getSum(2, 3) //
    getSum(1, 2, 3, 4, 5) // 15