ES6箭頭函式的使用

箭頭函式是 es6 裡面乙個簡寫函式的語法方式

箭頭函式只能簡寫函式表示式，不能簡寫宣告式函式

functionfn(
)// 不能簡寫
const
fun=
function()
// 可以簡寫
const obj =
// 可以簡寫
}

語法： (函式的行參) =>

constfn=
function
(a, b)
// 可以使用箭頭函式寫成
const
fun=
(a, b)
=>
const obj =
}// 可以使用箭頭函式寫成
const obj2 =
}

箭頭函式內部沒有 this，箭頭函式的 this 是上下文的 this

// 在箭頭函式定義的位置往上數，這一行是可以列印出 this 的
// 因為這裡的 this 是 window
// 所以箭頭函式內部的 this 就是 window
const obj =
,// 這個位置是箭頭函式的上一行，但是不能列印出 this
fun:()
=>
}obj.fn(
)obj.
fun(
)

按照我們之前的 this 指向來判斷，兩個都應該指向 obj

但是 fun 因為是箭頭函式，所以 this 不指向 obj，而是指向 fun 的外層，就是 window

箭頭函式內部沒有 arguments`這個引數集合

const obj =
,  fun:()
=>
}obj.fn(
1,2,
3)// 會列印乙個偽陣列 [1, 2, 3]
obj.
fun(1,
2,3)
// 會直接報錯

函式的行參只有乙個的時候可以不寫 ()其餘情況必須寫

const obj =
,  fn2: a =>
,  fn3:
(a, b)
=>
}

函式體只有一行**的時候，可以不寫 {}，並且會自動 return

const obj =
,  fun: a => a +10}
console.
log(fn(
10))// 20
console.
log(
fun(10)
)// 20

我們在定義函式的時候，有的時候需要乙個預設值出現

就是當我不傳遞引數的時候，使用預設值，傳遞引數了就使用傳遞的引數

function
fn(a)fn(
)// 不傳遞引數的時候，函式內部的 a 就是 10fn(
20)// 傳遞了引數 20 的時候，函式內部的 a 就是 20

在 es6 中我們可以直接把預設值寫在函式的行參位置

function
fn(a =10)
fn()// 不傳遞引數的時候，函式內部的 a 就是 10fn(
20)// 傳遞了引數 20 的時候，函式內部的 a 就是 20

這個預設值的方式箭頭函式也可以使用

constfn=
(a =10)
=>fn(
)// 不傳遞引數的時候，函式內部的 a 就是 10fn(
20)// 傳遞了引數 20 的時候，函式內部的 a 就是 20

注意：箭頭函式如果你需要使用預設值的話，那麼乙個引數的時候也需要寫（）

es6箭頭函式

本例是在了解es6知識後在原來定義函式的基礎上進行理解var searchvalue 查詢匹配物件 var button var input var select button if searchvalue.input undefined button.click else 重新整理 tableli...

es6 箭頭函式

1.單引數 function cheng a 3 let cheng a 3 a a console.log cheng 9 2.多引數 function add a,b let add a,b a b 預設返回值 console.log add 3,9 3.無返回值 function add a,...

ES6 箭頭函式

es6 中，箭頭函式就是函式的一種簡寫形式，使用括號包裹數，跟隨乙個緊接著是函式體 var getprice function 箭頭函式 var getprice 9.15 箭頭函式不僅僅是讓變得簡潔，函式中 this 總是繫結總shi 指向物件自身 function person 1000 使...

ES6箭頭函式的使用

es6箭頭函式

es6 箭頭函式

ES6 箭頭函式

相關推薦