ES6允许使用箭头函数，箭头函数没有this，没有arguments，没有prototype，没有super。

箭头函数的写法

常规写法：

function fn (){
    console.log("我是一个函数");
}
fn()

箭头函数写法：

let fn = (a) => {
    console.log("我是一个函数",a);
}
fn(12)

箭头函数的简写：

// 1. 省略小括号：当形参有且只有一个时，可以省略小括号
let fn = a => {
    console.log(a+a);
}
fn(8) //16

// 2. 省略花括号，当代码体只有一条语句时，可以省略花括号
//而且语句的执行结果就是函数的返回值
let fn = a => a+a
console.log(fn(6))

箭头函数的this

this 是静态的，this始终指向函数声明时所在作用域下的 this 的值。

箭头函数的缺陷

构造函数

不能作为构造实例化对象

// 构造函数
var Person = function(name,age){
    this.name = name,
    this.age = age
}

let me = new Person("lisi",22)
console.log(me);

// 箭头函数不能作为构造函数
let Person = (name,age) =>{
    this.name = name,
    this.age = age
}

let me = new Person("lisi",22)
console.log(me);//Person is not a constructor

arguments

不能使用arguments变量（arguments,用于介绍形式参数）

let fn = () => {
    console.log(arguments);
    // arguments is not defined
}
fn(1,2,3)

// 常规写法
let fn = function() {
    console.log(arguments);
    // 1,2,3
}
fn(1,2,3)

回调

箭头函数适合与 this 无关的回调，定时器，数组的方法回调。

不适合与this回调有关的回调，比如dom的回调,比如事件的回调。

this.name = "aaa"
let obj = {
    name: "lisi",
    getName: () =>{
        // 指向外层this的值，aaa
        console.log(this.name);
    }
}
obj.getName()

let obj = {
    name: "lisi",
    getName: function(){
        // this指向调用该方法的对象,输出lisi
        console.log(this.name);
    }
}
obj.getName()

练习

点击box 2s后变色

常规写法

// 点击box 2s后改变颜色
let box = document.querySelector(".box")
box.addEventListener('click',function(){
    // 保存this的值，等下到内层去使用
    let _this = this;
    alert("等待两秒");
    setTimeout(function(){
        // console.log(this)
        // settimeout是同步语句，在执行栈执行，执行栈的作用域是window，所以这里的this是window
        // 如果是在定时器外面，this的指向则是box
        _this.style.backgroundColor = "pink"
    },2000)
})

箭头函数写法

// 点击box 2s后改变颜色
let box = document.querySelector(".box")
box.addEventListener('click',function(){
    alert("0.5秒");
    // JavaScript 内置函数的回调函数 this 一般都指向 window，箭头函数因为没有自己的this，找到外部函数的 this，也就是 box
    // 这里箭头函数的 this指向box
    setTimeout(() => {
        this.style.backgroundColor = "pink"
    },500)
})

从数组中返回偶数

常规写法

const arr = [1,2,3,4,5,6,7,8,9,10,12,121,23]
// filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。
const result = arr.filter(function(item){
    if(item % 2 == 0){
        return true;
    }
    else{
        return false;
    }
})
console.log(result);

箭头函数写法

const arr = [1,2,3,4,5,6,7,8,9,10,12,121,23]
const result = arr.filter(item => item % 2 === 0)
console.log(result);