Javascript矢印関数

6949 ワード
JavaScript テキストリンク

JavaScript矢印関数の注意事項

const Button = () => (
    <button>Hello world</button>
)
矢印関数-JavaScript|MDNによれば、矢印関数は、カッコ()で囲まれた部分(戻り文を記入する必要はありません)を返します.
逆に、文が返されていない場合、次の関数は戻り値を返しません.
const Button = () => {
    <button>Hello world</button>
}

console.log(Button); // undefined
したがって、カッコ{}を使用して値を返す関数を作成するには、次のように、戻り文を使用してコードを記述する必要があります.
const Button = () => {
    return <button>Hello world</button>
}

基本構文

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함:  => { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }

高度な構文

// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
params => ({foo: bar})

// 나머지 매개변수 및 기본 매개변수를 지원함
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// 매개변수 목록 내 비구조화도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6
杭電OJ——1032 The 3 n+1 problem
[プログラマー]偽装