为了更方便的书写和使用函数，ES6最重要点的是引入了箭头函数， 允许使用=>来定义函数，箭头函数是一种简写的函数表达式
根据传参个数和函数体中语句条数不同，简写的语法形式会有所差异
1. 一个参数一条语句的情况
x => x+2
2. 多个参数一条语句的情况
(x,y) => x + y
3. 一个参数多条语句的情况
x = > { x++; return x}
4. 多个参数多条语句的情况
(x,y) => { x++;y++;return x*y}
5. 没有参数的情况
() => 1
6. 返回如果是一个对象，需要用()将对象包起来
x =>({key:x})
小结：
看上去很多格式，其实只要记住完整的格式：
() => {
//语句
//return
}
剩下的就是看什么情况省略()，什么情况省略{}
也是由规律的：
当函数参数个数为1时，可省略()
当函数参数个数大于1或者没有参数时，不省略()
当右边语句只有一句return语句时，可以省略{}
当右边语句个数大于1时，不省略{}
箭头函数具有以下特性
- 箭头函数没有 arguments；(可以使用...args,变成数组)
let fn = (...args) =>{
// console.log(arguments);//Uncaught ReferenceError: arguments is not defined
console.log(args)//[1,2,3]
}
fn(1,2,3);
- 箭头函数不能当作构造函数，不能new；
let fn = (...args) =>{
console.log(args)//[1,2,3]
}
new fn();//Uncaught TypeError: fn is not a constructor
- 箭头函数没有原型属性
let fn = (...args) =>{
console.log(args)
}
console.log(fn.prototype);//undefined
- 箭头函数不能换行；
一下两种情况都是语法错误
let fn = (...args)
=>{
console.log(args)
}
//或者
let fn = (...args) =
>{
console.log(args)
}
其实就是箭头符号的等号前面换行或者后面换行才会报错。其他都不会
let fn
=
(...args) =>
{
console.log(args)//正常执行[1,2,3]
}
fn(1,2,3)
- 箭头函数中的 this继承自外围父作用域（父级非箭头函数)
箭头函数运行时会首先到父作用域找，如果父作用域还是箭头函数，那么接着向上找，直到找到我们要的this指向
- 用call或者apply调用箭头函数时，无法对this进行绑定，传入的第一个参数被忽略
let fn = (...args) => {
console.log(args)
};
const obj = {
name:"Alice",
}
fn.call(obj,1,2,3);
所以call和apply调用箭头函数，跟函数正常执行没啥区别
所以使用箭头函数的好处在于：简洁的语法，更直观的作用域和 this的绑定，它能让我们能很好的处理this的指向问题。
箭头函数使用场景性
- 简化回调函数
let arr = ['a', 'b', 'c', 'd'];
arr.forEach((val, index) => {
console.log(index, val)
});
- 在添加为元素添加事件的处理函数的时使用
document.body.addEventListener('click', event=>console.log(event, this));
- 解决this问题
如：定时循环器，正常函数里面的this指向window，一般时在父级保存以下this，var self = this;但如果用箭头函数，则也同样可以指向继承父级函数里面的this。
function fn() {
// let self = this;//使用箭头函数可以省略这步
for (let i = 0; i < 1; i++) {
setTimeout(() => {
console.log(this)
}, 20);
}
}
fn();//window
let obj={}
fn.call(obj);//obj
除了新增箭头函数的语法形式，ES6中函数还有一些其他的变化
- 函数可以有默认参数，
格式：变量名 = 默认值
function show(a = 1, b = 2, c = 3) {
console.log(a,b,c)
}
show();// 1 , 2 , 3
- 函数参数默认已经被定义，在里面不能再使用let或者const声明；
function show(a = 1, b = 2, c = 3) {
let a ;//Uncaught SyntaxError: Identifier 'a' has already been declared
}
- 可以使用扩展运算符...展开数组或重置成数组，也可以接受函数的剩余参数
function fn(...args){
console.log(...args);//[1,2,3]
}
fn(1,2,3)
以上就是ES6函数相关的所有东西！
网友评论