es6 箭头函数

es6 箭头函数

一 箭头函数的结构

const/let 函数名 = 参数 => 函数体

二 如何将普通函数改写成箭头函数

// 如何将一般函数改写成箭头函数
// 一般函数形式function add() {}
// 箭头函数形式const add1 = () => {};

三 箭头函数的使用

1、无参数无返回值：

const aaa=function(){}
const aaa1= () =>{ 
	}

2、放入一个参数：

//单个参数可以省略圆括号
const sum = function(num) {return num*num}
const sum1=num=>{
		return num*num
	}

3、放入两个参数：

const sun=function(num1,num2){return num1+num2}
const sum=（num1,num2）=>{
	return num1+num2
	}

4、可变参数

var fn = function(a, b, …args) {}
var fn1 = (a, b, …args) => {}

5、有多行函数体：

const demo=function(){
	console.log('hello world')
	console.log('Hello demo')
}
const demo1=（）=>{
	console.log('hello world')
	console.log('Hello demo')	
}

6、只有单行函数体：

//单行函数体可以同时省略｛｝和return
const nul=function(num1，num2){
	return num1+num2
}
const nul1=（num1，num2）=>num1+num2

7、只有单行函数体且函数体为对象：

const nul=function(x,y)｛
return {sum:x+y}
｝
//如果箭头函数返回单行对象，可以在｛｝外面加上（），让浏览器不再认为那是函数体的｛｝
const nul1=（x，y）=>({sum:x+y})

箭头函数与普通函数写法的this指向区别：

1、这种普通函数写法它会调用call，所以window就是它的this
function（）{
console.log(this)
}

2、箭头函数它会向外层作用域中一层层向外查找this，直到有this的定义：
const obj={
（）=>{console.log（this）} / /因为最外层是object类型所以是object也可以说是obj对象
}