箭头函数的使用及注意事项【自学笔记】_箭头函数只有一行可以省略大括号

语法

省略函数function，然后在（）后面加上=>{}
例

const fn = function（）{
	
}
1
2
3

改为

const fn = （）=> {

}
1
2
3

如果只有一个形参时可以省略小括号（）

例

const fn = item => {

}
1
2
3

有两个形参或以上时箭头前面必须加上小括号

例

const fn = （item1，item2）=>{

}
1
2
3

函数内有return且只有一行代码的时候可以省略大括号{ }和return并且写成一行

例

const test = ()=>{
	return '111111'
}
1
2
3

改为
const test = () =>‘111111’

但是如果返回的是一个对象须在大括号外面加上小括号,否则系统无法识别

例

const test = () => {
	return {
		name: '坤哥',
		age: 2.5
	}
}
1
2
3
4
5
6

改为

const test = () => ({
	name: '坤哥'
	age: 2.5	
})
1
2
3
4

箭头函数的this指向的是父作用域

例

const rel = document.querySelector('#rel')
        rel.addEventListener('click', item => {
            console.log(this)//指向的是window
            const test = () => {
                alert(11)
                console.log(this) //指向的是window
            }
            console.log(test());
})
1
2
3
4
5
6
7
8
9

const rel = document.querySelector('#rel')
       rel.addEventListener('click', function(item) {
           console.log(this)//指向的是rel
           const test = () => {
               alert(11)
               console.log(this) //指向的是rel
           }
           console.log(test());
})
1
2
3
4
5
6
7
8
9

箭头函数无法访问arguments，无法new