アロー関数とは-フロントエンドQ&A-php.cn

アロー関数とは

醉折花枝作酒筹

リリース： 2021-04-13 11:32:38

転載

2422 人が閲覧しました

この記事ではes6のarrow機能について紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

アロー関数とは

矢印関数

ES6 では、矢印構文を使用して構文関数式を定義する機能が追加されています。アロー関数によってインスタンス化された関数オブジェクトは、ほとんどの場合、形式的な関数式によって作成された関数オブジェクトと同じように動作します。アロー関数は、関数式が使用されるときはいつでも使用できます

    let fn = (a, b) => {
        return a + b    }

    let fun = function (a, b) {
        return a + b    }

    console.log(fn(1, 2))   // 3
    console.log(fun(1, 2))  // 3

ログイン後にコピー

アロー関数は埋め込み関数に適しています

    let arr = [1, 2, 3, 4];
    console.log(
        arr.map(function (item) {
            return item + 1
        })
    )   // [2,3,4,5]

    console.log(
        arr.map((item) => {
            return item + 1
        })
    )   // [2,3,4,5]

ログイン後にコピー

アロー関数パラメータが 1 つだけの場合、括弧は省略できます

    let a = (i) => {
        console.log(i)
    }
    // 当前箭头函数只有一个参数，所以可以省略括号变成以下写法，
    let a = i => {
        console.log(i)
    }

ログイン後にコピー

アロー関数に複数のパラメーターがある場合は、コンマを使用してそれらを区切ります。

    // 如果有多个参数，中间用逗号隔开
    let a = (i, j, k) => {
        console.log(i, j, k)
    }

ログイン後にコピー

パラメーターがない場合は、かっこを追加する必要があります

    // 如果没有参数，则圆括号必须加
    let a = () => {
        console.log("箭头函数没有参数")
    }

ログイン後にコピー

アロー関数は中括弧を省略することもできます, しかし、これは変わります関数の動作は中括弧を使用した通常の関数と同じです. 関数本体には複数のステートメントを記述することができます. 中括弧がない場合は、後続のステートメントが 1 つだけであることを意味します

    let a = () => {
        console.log("我是带花括号的箭头函数")
        console.log("我是带花括号的箭头函数")
        console.log("我是带花括号的箭头函数")
    }

    let a = () => console.log("我是不带花括号的箭头函数")

    let b = i => i + 1
    console.log(b(1))   // 这个时候箭头函数隐式的返回了i+1的值，所以打印结果为2

ログイン後にコピー

アロー関数の構文は単純ですが、使用に適さないシナリオはまだ多くあります。アロー関数では、引数、super およびを使用できません。アロー関数にはプロトタイプ属性がありません。

推奨学習: JavaScript ビデオチュートリアル

以上がアロー関数とはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。