この記事では、javascript に関する関連知識を提供します。主にアロー関数の適用に関する問題を紹介します。アロー関数式は、本来匿名関数が必要な場所に適しており、使用できません。皆さんの参考になれば幸いです。
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
アロー関数式の構文は関数式よりも簡潔であり、独自の this、引数、super または new.target を持ちません。アロー関数式は、匿名関数が必要であり、コンストラクターとして使用できない場合に適しています。 ---- MDN
(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于:(param1, param2, …, paramN) =>{ return expression; } // 当只有一个参数时,圆括号是可选的: (singleParam) => { statements } singleParam => { statements } // 没有参数的函数应该写成一对圆括号。 () => { statements }
let add1 = (num1, num2) => { num1 + num2 }; let add2 = (num1, num2) => { return num1 + num2 }; let add3 = (num1, num2) => (num1 + num2); let add4 = (num1, num2) => num1 + num2; console.log(add1(2, 3)); // undefined console.log(add2(2, 3)); // 5 console.log(add3(2, 3)); // 5 console.log(add4(2, 3)); // 5
//加括号的函数体返回对象字面量表达式: let func = () => ({foo: 'bar'}) console.log(func()); // {foo: 'bar'} //支持剩余参数和默认参数 (param1, param2, ...rest) => { statements } (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } //同样支持参数列表解构 let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6
why?構文はより簡潔で、これはより期待に沿ったものです
関数のロジックが非常に複雑な場合は、名前付き関数を使用する必要があります。
// bad[1, 2, 3].map(function (x) { const y = x + 1; return x * y;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});
// bad [1, 2, 3].map(number => { const nextNumber = number + 1; `A string containing the ${nextNumber}.`; }); // good [1, 2, 3].map(number => `A string containing the ${number}.`); // good [1, 2, 3].map((number) => { const nextNumber = number + 1; return `A string containing the ${nextNumber}.`; }); // good [1, 2, 3].map((number, index) => ({ [index]: number, })); // No implicit return with side effects function foo(callback) { const val = callback(); if (val === true) { // Do something if callback returns true } } let bool = false; // bad foo(() => bool = true); // good foo(() => { bool = true; });
why? 関数の始まりと終わりはより明確です
// bad['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, ));// good['get', 'post', 'put'].map(httpMethod => ( Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, )));
// bad[1, 2, 3].map((x) => x * x);// good[1, 2, 3].map(x => x * x);// good[1, 2, 3].map(number => ( `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`));// bad[1, 2, 3].map(x => { const y = x + 1; return x * y;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});
// badconst itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;// badconst itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;// goodconst itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);// goodconst itemHeight = (item) => { const { height, largeSize, smallSize } = item; return height > 256 ? largeSize : smallSize;
アロー関数は new を使用してコンストラクターのインスタンスを作成できませんが、通常の関数は使用できます。 (アロー関数が作成されるとき、プログラムはそのための構築メソッドを作成しません。つまり、構築能力がなく、使用後に破棄されます。再利用される通常の関数とは異なり、コンストラクター プロトタイプ、つまりプロトタイプ属性は自動的に生成されません)
プログラムはアロー関数の引数オブジェクトを作成しません
これ通常の関数では動的ですが、アロー関数の this は、アロー関数をタイトにラップするオブジェクト (定義時に決定) を指します。
アロー関数は、 this の値を変更することはできません。 bind、call、apply は実行できますが、これらのメソッドを呼び出すことはできます (this の値がこれらのメソッドによって制御されないだけです)
[関連する推奨事項: javascript ビデオ チュートリアル、ウェブ フロントエンド]
以上がES6 アロー関数の実践コード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。