箭头函数简化了ES5中的function函数声明语法。
箭头函数和this
() => {
}
关于箭头函数的简写
- 如果有且仅有一个参数，( ) 可以不写；
以下三种种写法等价：
function fn(num) {
console.log(++num);
}
let fn = (num) => {
console.log(++num);
}
let fn = num => {
console.log(++num);
}
- 如果有且仅有一个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))
