ES6中的箭头函数

函数-箭头函数

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

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

基本使用

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

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

参数详解

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

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

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

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

// 等同于

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

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

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

//等同于

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

返回值详解

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

let sum = n1 => {

    let num = n1
    console.log('哈哈')
};

// 等同于

let sum = function(n1) {

    let num = n1   
    console.log('哈哈')
};

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

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

//等同于

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

箭头函数的注意点

1. 箭头函数内部没有this，因此箭头函数内部的this指向了外部的this

2. 在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象；

3. 不能够用作构造函数，因为箭头函数没有this，这就是说，不能够使用new命令，否则就会抛出一个错误；

4. 不能够使用arguments对象；

5. 不能使用yield命令

案例：

// 1. 有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序

let arr1 = [1,3,5,7,9,2,4,6,8,10]

arr1.sort((a, b) => a - b)

console.log(arr1) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 2. 有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序

let arr2 = ['a','ccc','bb','dddd']

arr2.sort((a, b) => a.length - b.length)

console.log(arr2) // ["a", "bb", "ccc", "dddd"]

// 3. 有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组

let arr3 = [57,88,99,100,33,77]

let newArr = arr3.filter(item => item >= 60)

console.log(newArr) // [88, 99, 100, 77]