JS 箭頭函式筆記

箭頭函式比普通函式還要簡短，但是她沒有自己的this、arguments、super、new.target
等語法，也不能被用做建構式(constructor)

MDN 範例基本語法

(參數1, 參數2, …, 參數N) => { 陳述式; }

(參數1, 參數2, …, 參數N) => 表示式;
// 等相同(參數1, 參數2, …, 參數N) => { return 表示式; }

// 只有一個參數時,括號才能不加:
(單一參數) => { 陳述式; }
單一參數 => { 陳述式; }

//若無參數，就一定要加括號:
() => { statements }

MDN 範例進階語法

// 用大括號將內容括起來，返回一個物件字面值表示法：
params => ({foo: bar})

// 支援其餘參數與預設參數
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }

// 也支援 parameter list 的解構
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6

箭頭函式如何使用 arguments

原本函式

function average() {
  const nums = Array.from(arguments);
  const total = nums.reduce(function (acc, val) {
    return acc + val;
  }, 0);

  return total / nums.length;
}

console.log(average(1, 2, 3, 4, 5, 6, 7));

改成箭頭函式，使用...arguments再加上參數

const average = (...num) => num.reduce((acc, val) => acc + val, 0) / num.length;

console.log(average(1, 2, 3, 4, 5, 6, 7));

箭頭函式 this

利用箭頭函式沒有this特性在物件內用法

普通函式寫法

const food = {
    data: {

    },
    getData: {
        const self = this;
        $.ajax({
            url: 'https://your.self.api',
            dataType: json,
            success: function(data) {
                console.log(data);
                self.data = data.results[0];
                console.log(`food: ${food.data}`);
            }
        })
    }
}

food.getData();

改成箭頭函式

const food = {
    data: {

    },
    getData: {
        $.ajax({
            url: 'https://your.self.api',
            dataType: json,
            success: (data) => {
                console.log(data);
                this.data = data.results[0];
                console.log(`food: ${food.data}`);
            }
        })
    }
}

food.getData();