ES6系统学习之函数

箭头函数简化了ES5中的function函数声明语法。

箭头函数和this

() => { }

关于箭头函数的简写

1. 如果有且仅有一个参数，( ) 可以不写；
   以下三种种写法等价：

function fn(num) {
        console.log(++num);
    }

let fn = (num) => {
        console.log(++num);
    }

let fn = num => {
        console.log(++num);
    }

2. 如果有且仅有一个return语句，{ } 可以不写；
   以下四种写法等价：

function fn(num) {
        return ++num
    }

let fn = (num) => {
        return ++num
    }

let fn = num => {
        return ++num
    }

let fn = num => ++num

箭头函数中的this

ES5函数中的this

对于一个在对象方法中嵌套的内层函数而言，this会给我们带来很大的困扰，比如这样的一个对象：

var person = {
    name: "Jack",
    age: 21,
    fn: function () {
    	console.log(this === person)	//true	此时这里的this是person
        var self = this		// 使用一个临时变量储存一下最外层person，便于下面使用
        var addAge = function () {
            console.log(++self.age)		// 22 使用self临时变量可以获取到age
            console.log(this === window)	// true	这里的this是已经指向了window
        }
        addAge()
    }
}
person.fn()     // true, 22, true

首先我先解释一下上面的代码，person对象里有一个fn()方法，fn()函数内部又有一个addAge()函数，现在我想调用addAge()函数实现对person中age的操作。
但问题出现了，我们在addAge（）不能通过this来访问person，原因在第9行，此时的this指向window，所以我只能在与addAge（）同一作用域的区域创建一个变量来储存person。
显然，ES5函数中关于this指向的总是会给我们带来许多麻烦。

ES6箭头函数中的this

依然是上面的对象中的方法又嵌套函数的结构，只不过这次我们的addAge（）函数使用箭头函数来编写：

let person = {
    name: "Jack",
    age: 21,
    fn: function () {
        console.log(this === person)
        let self = this
        let addAge = () => {	// 箭头函数写法
            console.log(++this.age);	// this可以访问到age
            console.log(this === person)	// 此时的this指向person
        }
        addAge()
    }
}
person.fn()     // true, 22, true

可以看到，ES6中的箭头函数的确有所不同，并且更贴近我们写代码的思维，那么ES6箭头函数中的this指向究竟是怎么一回事呢？
事实上，箭头函数本身并没有this，其this全部来自函数的作用域链，取值就在函数作用域链中一层一层向上寻找。而且，箭头函数中this的指向取决于函数声明的地方，只要函数已经声明，this的指向不会再改变。（bind等强行改变this指向方式除外）

原生对象扩展

Array扩展

对于一个数组arr：

let arr = [84, 56, 99, 47, 19]

1.map 映射

一一对应，进去几个出来几个。比如我们想要将上面的数组进行简单的处理，大于60分的为及格，小于60分的就是不及格，这里我们就可以使用map映射的概念。

let pass = arr.map(item => item >= 60 ? "及格" : "不及格")

2.reduce 缩减

多对一，不论进去几个，只返回一个。对于上面的数组，假如我们现在想要算出这些数据的平均数，那么我们就可以用上reduce了，这里reduce接收三个参数，item，pre，index，这里的pre参数比较特殊，在第一次操作时它是初始值，之后都为上一操作的结果，我们就用它来储存前两项相加之和。

let avg = arr.reduce((item, pre, index) => {
        if (index == arr.length - 1)	// 当计算到最后一个数时，计算平均数
            return (pre + item) / arr.length
        else return pre + item
    })

3.filter 过滤

依次判断，确认是否保留。对于上面的数组，我们只保留奇数，那么我们可以这么做。
以下两种写法等价：

let odd = arr.filter(item => {
    if (item % 2 == 0)
        return false
    else return true
})

let odd = arr.filter(item => item % 2)

4.forEach 遍历

循环。现在我想在遍历这几个数据，让他们以此展示出来。

let show = arr.forEach((item, index) => console.log("第" + index + "个:" + item))