ホームページ > 記事 > ウェブフロントエンド > es6 機能の拡張紹介 (コード例)
この記事では、es6 の関数 (コード例) の詳細な紹介を提供します。これには一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。
関数パラメータのデフォルト値
関数を宣言すると仮パラメータを設定できることは誰もが知っていますが、仮パラメータで直接デフォルト値を設定できることを考えたことはありますか?
Code
function f(x,y=2) { return x+y } console.log(f(2)) // 4
上記の小さな例では、デフォルト値 2 を設定するだけであり、この関数を使用するときはパラメータのみを渡します。 x の 2 なので 4 が得られますが、パラメータ 1 を y に渡すとどうなるでしょうか?どのような結果が得られますか? 引き続き下の例を見てください。
function f(x,y=2) { return x+y } console.log(f(2,1)) // 3
実際のパラメータを渡すと、デフォルト値が置き換えられるため、3 が得られます。その他の例では、全員が自分で実験する必要があります! ! !
function f(x,x,y=2) { return x+y } console.log(f(2,2, 1)) // 报错
同じパラメータを設定できないため、上の例ではエラーが報告されます
let x = 3 function f(x,y=x) { return x+y } console.log(f(2)) var x = 3 function f(x,y=x) { return x+y } console.log(f(2)) function f(x,y=x) { console.log(x,y) // 2 2 var x = 3 console.log(x,y) // 3 2 return x+y } console.log(f(2)) // 5
上の 3 つの例は、関数パラメータのスコープの例です。1 つ目と 2 つ目を見てみましょう。デフォルトサンプル関数の値には独自の別のスコープがあるため、変更された x を外部で宣言しても機能しません。しかし 3 番目の例では、関数内で x を変更すると、出力した値を確認できます。宣言する前は、x と y は両方とも 2 です。ここでは変数の昇格はありません。宣言後、x は 3 になり、y は変更されないため、5
官方注解:ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中# を取得します。 # #Code
function f(...x) { console.log(x) // [1,2,3] } f(1,2,3)上記の例では、定義されたとおりの配列を取得します。これにより、冗長変数が 1 つの配列にまとめられます
function f(arr,y,...x) { console.log(x) } function f(arr,...x,y) { }2 つのうち最初の 1 つです。上記の例 1 つ目は実行でき、必要な結果が得られますが、2 つ目では、rest パラメータは最後のパラメータ位置でのみ使用できるため、エラーが報告されます。
厳密モードでのrestの使用方法?
从Es5开始函数内已经可以定义严格模式了,但Es6规定函数参数默认值定义严格模式会报错,但也要看严格模式定义在局部还是全局strict モードが理解できない場合は、これを見て、
strict モード
function fn(a=5) { 'use strict'; console.log(a) } fn()上の例を理解してください。 、関数内で strict モードを設定しましたが、期待どおりの結果が返されず、エラーが報告されました。公式の説明を見てみましょう: 関数内の Strict モードは、関数本体と関数パラメーターの両方に適用されます。ただし、関数が実行されるときは、関数パラメータが最初に実行され、次に関数本体が実行されます。つまり、関数内で strict モードが定義されている場合、関数のパラメータが最初に実行され、次に関数本体が実行されます (strict モードが定義されていない場合は、関数のパラメータが最初に実行されます)。そのため、パラメータが正しいかどうかを検証するのは不合理です。関数本体では厳密モードになっています
では、このような間違いを避けるにはどうすればよいでしょうか? コード
'use strict'; function fn2(a=5) { console.log(a) } fn2() function fn() { 'use strict'; return function (a=5) { console.log(5) } } fn()() // 5厳密モードをグローバルに定義することも、関数内で定義してパラメーター付きの関数を返すこともできるため、実行関数のパラメーターをバイパスして関数本体を実行できます。エラーはありません。 name 属性
官方注解: 函数的name属性,返回该函数的函数名 使用方式 函数名.name
function a() { } console.log(a.name) // a function b() { } console.log(b.name) // a上記の 2 つの例では、name 属性を使用して関数の名前を取得します。もちろん、Es5 Es6 環境と Es5 環境でテストしてみることもできますアロー関数
let fn = a => a console.log(fn(10)) // 10 // 对比 let fn1 = function (a) { return a } console.log(fn1(10)) //10 let fn2 = (a,b) => a+b console.log(fn2(1,2)) // 对比 let fn21 = function (a,b) { return a+b } console.log(fn2(1,2))
通俗的解释:就是在函数中最后一步调用函数
let fn = () => { console.log(123) return () => 5 } console.log(fn()()) // 123 5テール再帰
let fn = (a,b) => { if(a===b) return b console.log(1) return fn(a+1, b) } console.log(fn(1,5))関数内の最後のステップで自分自身を再帰的に呼び出して、目的を達成します。再帰効果 関数 パラメータの末尾のカンマ
Es7中允许函数形参最后一个带有逗号,以前都是不允许带有逗号的 let fn = (a,) => { console.log(a) } fn(1)
以上がes6 機能の拡張紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。