ES6箭头函数(三)-应用场景

直接作为事件handler

document.addEventListener('click', ev => {
    console.log(ev)
})

作为数组排序回调

var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
    if (a - b > 0 ) {
        return 1
    } else {
        return -1
    }
})
arr // [1, 2, 3, 4, 8, 9]

this不再善变

obj = {
    data: ['John Backus', 'John Hopcroft'],
    init: function() {
        document.onclick = ev => {
            alert(this.data) // ['John Backus', 'John Hopcroft']
        }
        // 非箭头函数
        // document.onclick = function(ev) {
        //     alert(this.data) // undefined
        // }
    }
}
obj.init()

比如你有一个有值的数组，你想去 map 遍历每一项，这时使用箭头函数非常理想：

    var arr = ['hello', 'WORLD', 'Whatever'];
    var arrNew = arr.map(function (item) {
        return item.toLowerCase();
    })
    var arrNew = arr.map(item=>item.toLowerCase())
    console.log(arrNew);   

对象集合和返回(重新封装对象)

let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})
​
省略写法
const users=res.items.map(item => ({
    url: item.html_url,      
    img: item.avatar_url,      
    name: item.login,
    })
);

promise场景

this.doSomethingAsync().then((result) => {
  this.storeResult(result);
});