es6 => どういう意味ですか

Apr 19, 2022 pm 05:37 PM
es6

es6 では、「=>」は関数の略語であるアロー関数を指します。構文は (パラメータ)=>{関数本体};" です。アロー関数にはプロトタイプやプロトタイプはありません。 this、arguments、super、および "new.target" はバインドされており、それらの値は周辺にある最も近い非矢印関数によって決定され、new キーワードを介して呼び出すことはできません。

# このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター

es6 => どういう意味ですか

=>

は新しいアロー関数です。 ES6 標準に追加された関数です。名前が示すように、アロー関数は、矢印 (=>) を使用して関数を定義する新しい構文です。アロー関数式の構文は関数式よりも簡潔ですが、従来の関数式とは若干異なりますJavaScript 関数。主に次の側面に焦点を当てています。

this、super、arguments、および new.target のバインディングはなく、その値は、次の最も近い非アロー関数によって決定されます。

  • #新しいキー Word 呼び出しを渡すことができません

  • プロトタイプがありません

  • バインディングこれは変更できません

  • #引数はサポートされていません オブジェクト

  • # は繰り返しの名前付きパラメータをサポートしていません

  • 関数本体内の this のポイントは、それを呼び出すオブジェクトではなく、常にそれが定義されているオブジェクトを指します。es5 で誰が関数を実行するのか、そしてそれが誰を指すのかがわかります。

  • 基本構文

  • (param1, param2, …, paramN) => { statements }
    (param1, param2, …, paramN) => expression
    //相当于:(param1, param2, …, paramN) =>{ return expression; }
    // 当只有一个参数时,圆括号是可选的:
    (singleParam) => { statements }
    singleParam => {statements }
    // 没有参数的函数应该写成一对圆括号:
    () => { statements }
    ログイン後にコピー

簡単な例

x => x * x
ログイン後にコピー

これは次と同等です:

function (x) {
 return x * x;
}
ログイン後にコピー
短い関数の例

        var elements = [
            'Hydrogen',
            'Helium',
            'Lithium',
            'Beryllium'
        ];
        
        elements.map(function(element) { 
            return element.length; 
        }); // 返回数组:[8, 6, 7, 9]
        
        // 上面的普通函数可以改写成如下的箭头函数
        elements.map((element) => {
            return element.length;
        }); // [8, 6, 7, 9]
        
        // 当箭头函数只有一个参数时,可以省略参数的圆括号
        elements.map(element => {
        return element.length;
        }); // [8, 6, 7, 9]
        
        // 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号
        elements.map(element => element.length); // [8, 6, 7, 9]
        
        // 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构
        // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名,
        // 可以替换成任意合法的变量名
        elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
ログイン後にコピー

三項演算子の例

アロー関数では条件付き (三項) 演算子も使用できます。

        var simple = a => a > 15 ? 15 : a;
        simple(16); // 15
        simple(10); // 10

        let max = (a, b) => a > b ? a : b;
ログイン後にコピー
Not new とともに使用されます

アロー関数は使用できませんコンストラクターとして new とともに使用されるとエラーがスローされます。

        var Foo = () => {};
        var foo = new Foo(); // TypeError: Foo is not a constructor
ログイン後にコピー
プロトタイプ属性がありません

アロー関数にはプロトタイプ属性がありません。

        var Foo = () => {};
        console.log(Foo.prototype); // undefined
ログイン後にコピー
関数本体

アロー関数は、「省略された本体」または共通の「ブロック本体」を持つことができます。

##省略された本文では、暗黙的な戻り値を追加した式が 1 つだけ必要です。ブロック本文では、明示的な return ステートメントを使用する必要があります。

        var func = x => x * x;                  
        // 简写函数 省略return(简写体)

        var func = (x, y) => { return x + y; }; 
        //常规编写 明确的返回值(块体)
ログイン後にコピー

アロー関数の再帰

        var fact = (x) => ( x==0 ?  1 : x*fact(x-1) );
        fact(5);       // 120
ログイン後にコピー
ブラウザの互換性

[関連する推奨事項: JavaScript ビデオ チュートリアル

ウェブ フロントエンドes6 => どういう意味ですか]

以上がes6 => どういう意味ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

非同期は es6 または es7 用ですか? 非同期は es6 または es7 用ですか? Jan 29, 2023 pm 05:36 PM

非同期は es6 または es7 用ですか?

ES6 で配列を反転する方法 ES6 で配列を反転する方法 Oct 26, 2022 pm 06:19 PM

ES6 で配列を反転する方法

es6 の 2 つの配列で異なる項目を見つける方法 es6 の 2 つの配列で異なる項目を見つける方法 Nov 01, 2022 pm 06:07 PM

es6 の 2 つの配列で異なる項目を見つける方法

ミニ プログラムで es6 を es5 に変換する必要があるのはなぜですか? ミニ プログラムで es6 を es5 に変換する必要があるのはなぜですか? Nov 21, 2022 pm 06:15 PM

ミニ プログラムで es6 を es5 に変換する必要があるのはなぜですか?

es6 構文が必要ですか? es6 構文が必要ですか? Oct 21, 2022 pm 04:09 PM

es6 構文が必要ですか?

es6 の一時的なデッドゾーンとは何を意味しますか? es6 の一時的なデッドゾーンとは何を意味しますか? Jan 03, 2023 pm 03:56 PM

es6 の一時的なデッドゾーンとは何を意味しますか?

es2015はes6と同じですか? es2015はes6と同じですか? Oct 25, 2022 pm 06:51 PM

es2015はes6と同じですか?

es6 マップは注文されていますか? es6 マップは注文されていますか? Nov 03, 2022 pm 07:05 PM

es6 マップは注文されていますか?

See all articles