函数-箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

基本使用

var fn = function(x, y) {
    console.log(x + y);
}

相当于
//语法： (参数列表) => {函数体}
var fn = (x, y) => {
    console.log(x + y);
}

参数详解

• 如果没有参数列表，使用()表示参数列表

var sum = () => {
    console.log('哈哈')
};
// 等同于：
var sum = function() {    
    console.log('哈哈')
};

• 如果只有一个参数，可以省略()

// 等同于：
var sum = function(n1) {    
    console.log('哈哈')
};

var sum = n1 => {
    console.log('哈哈')
};

• 如果有多个参数，需要使用()把参数列表括起来

var sum = function(n1, n2) {    
    console.log('哈哈')
};

var sum = (n1, n2) => {
    console.log('哈哈')
};

返回值详解

• 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来

var sum = function(n1) {    
    console.log('哈哈')
};

var sum = n1 => {
    console.log('哈哈')
};

• 如果函数体只有一行一句，那么可以省略{}和return

var fn = function(n1, n2) {
    return n1 + n2;
}

var fn = (n1, n2) => n1 + n2;

案例

1. 有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序
2. 有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
3. 有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组

箭头函数的注意点

1. 箭头函数内部没有this，因此箭头函数内部的this指向了外部的this
2. 箭头函数不能作为构造函数，因为箭头函数没有this

【定义一个对象，定时器打招呼】

苦口婆心一下：箭头函数刚开始用，肯定会有点不习惯，但是任何东西都有一个习惯的过程，慢慢接受就好了，多用，多练

默认参数

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

综合大练习

给定一个数组

let list = [
  // wu: 武力    zhi:智力
  { id: 1, name: '张飞', wu: 97, zhi: 10 },
  { id: 2, name: '诸葛亮', wu: 55, zhi: 99 },
  { id: 3, name: '赵云', wu: 97, zhi: 66 },
  { id: 4, name: '周瑜', wu: 80, zhi: 98 },
  { id: 5, name: '吕布', wu: 100, zhi: 8 },
  { id: 6, name: '司马懿', wu: 30, zhi: 98 }
]

• 求数组中所有英雄的武力平均值

• 得到一个新数组，只保留英雄的名字， ['张飞', '诸葛亮', '赵云', '周瑜', '吕布', '司马懿']

• 得到一个新数组，新数组中只保留武力值超过90的英雄

• 删除数组中名字为周瑜的英雄

• 判断数组中所有英雄的武力是否都超过60， 最终打印结果： 全是猛将 还有弱鸡 使用两种方式实现

• 删除数组中名字叫所有智力低于60的英雄

• 找到数组中id为2的英雄，求他的武力+智力的综合