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);
});