ES6箭头函数及函数身上新增的东西

为了更方便的书写和使用函数，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时，不省略{}

箭头函数具有以下特性

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);

2. 箭头函数不能当作构造函数，不能new；

let fn = (...args) =>{
    console.log(args)//[1,2,3]
}
new fn();//Uncaught TypeError: fn is not a constructor

3. 箭头函数没有原型属性

let fn = (...args) =>{
    console.log(args)
}
console.log(fn.prototype);//undefined

4. 箭头函数不能换行；

一下两种情况都是语法错误
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)

5. 箭头函数中的 this继承自外围父作用域（父级非箭头函数)
   箭头函数运行时会首先到父作用域找，如果父作用域还是箭头函数，那么接着向上找，直到找到我们要的this指向

6. 用call或者apply调用箭头函数时，无法对this进行绑定，传入的第一个参数被忽略

let fn = (...args) => {
    console.log(args)
};
const obj = {
    name:"Alice",
}
fn.call(obj,1,2,3);

所以call和apply调用箭头函数，跟函数正常执行没啥区别

所以使用箭头函数的好处在于：简洁的语法，更直观的作用域和 this的绑定，它能让我们能很好的处理this的指向问题。

箭头函数使用场景性

1. 简化回调函数

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((val, index) => {
    console.log(index, val)
});

2. 在添加为元素添加事件的处理函数的时使用

document.body.addEventListener('click', event=>console.log(event, this)); 

3. 解决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中函数还有一些其他的变化

1. 函数可以有默认参数，格式：变量名 = 默认值

function show(a = 1, b = 2, c = 3) {
    console.log(a,b,c)
}
show();// 1 , 2 , 3

2. 函数参数默认已经被定义，在里面不能再使用let或者const声明；

function show(a = 1, b = 2, c = 3) {
    let a ;//Uncaught SyntaxError: Identifier 'a' has already been declared
}

3. 可以使用扩展运算符...展开数组或重置成数组，也可以接受函数的剩余参数

function fn(...args){
  console.log(...args);//[1,2,3]
}
fn(1,2,3)

以上就是ES6函数相关的所有东西！