ES6箭頭函式的使用

洛飞發表於2024-09-28
函式

使用箭頭函式的目的：引入箭頭函式目的是更加更加簡短的函式寫法並且不繫結this，箭頭函式的語法比函式表示式更加簡潔

使用場景：箭頭函式更加適用於哪些本來需要匿名函式的地方

  • 定義語法：
const fn = () => {

}
  • 使用方式一：括號裡面加形參
 // 箭頭函式
    const fn = (x) => {
        console.log(x);
    }
    fn(1)
  • 使用方式二：如果只有一個形參，那麼括號可以省略
const fn1 = x => {
    console.log(x);
}

fn1(88)
  • 使用方式三：只有一行程式碼的時候，我們可以省略大括號
const fn2 = x => x+x;
console.log(fn2(9))
  • 使用方式四：箭頭函式直接返回一個物件
const fn3 = (uname) => ({
     name:uname
})
console.log(fn3('成龍'));

注意：返回一個物件需要用需要用括號將{}包起來。

  • 應用一：利用剩餘變數傳參的方式進行箭頭函式求和
    // 箭頭函式的引數：
    // 利用箭頭函式求和，我們並不知道引數幾個，所以用剩餘引數的寫法,它將所有的引數變成一個陣列
    const getSum = (...arr) => {
        console.log('剩餘引數的值為', arr);
        let sum = 0;
        for (let i=0; i< arr.length; i++) {
            sum +=arr[i]
        }
        return sum;
    }

    console.log(getSum(2, 3)); 
    console.log(getSum(2, 3, 4));

  • 箭頭函式this的用法：箭頭函式不會建立自己的this，他只會從自己的作用域鏈的上一層沿用this。

例：

//箭頭函式內部this  是上一層this的指向，所以這個this輸出的是window
    const fn4 = () => {
        console.log(this);
    }
    fn4()

物件方法箭頭函式this

    // 物件方法箭頭函式this  物件沒有作用域，所以物件中的箭頭方法指向的還是window
    const obj = {
        name:"yansunda",
        sayHi: () => {
            console.log(22);
            console.log(this);
        }
    }
    obj.sayHi();

物件方法的函式里面再寫箭頭函式的this
    // 物件方法的函式里面再寫箭頭函式的this
    //只有函式里面才有this，然後箭頭函式里面的this指的是上一層的this，所以sayHi的呼叫者是obj1，所以this指向obj1
    const obj1 = {
        name:'yansunda',
        sayHi:function(){
            console.log(this);
            let fn = () => {
                console.log(333);
                console.log(this);///箭頭函式指的是sayHi中的this，而sayHi的呼叫者是obj1，所以this指向obj1
                console.log(this.name);
            }
            fn()
        }
    }
    obj1.sayHi()

相關文章