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

rest パラメータ

官方注解：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 モード

code

 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

code

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))

上記のアロー関数と一般的に作成する関数の違いを見てみましょうEs5 では、英語の文字数が大幅に削減されました。記述がより簡潔になりました。実際、アロー関数は通常の関数と同様の機能を備えています。シンプルで理解しやすく、相互にネストすることができます。非常に便利です。独自のコードをすっきりさせるのに役立ちます。皆さんには、アロー関数をもっと使用することをお勧めします。その後、いくつかのアロー関数があります。誰もが次のことを覚えておく必要があることに注意してください。

関数本体の this オブジェクトは、使用されているオブジェクトではなく、定義されているオブジェクトです (この点は修正されています)
1. はコンストラクターとして使用できません。つまり、新しいコマンドは使用できません。そうでない場合は、エラーがスローされます
2. 関数本体に存在しない引数オブジェクトは使用できません。これを使用したい場合は、代わりにrestパラメータを使用できます。
3. yieldコマンドは使用できないため、アロー関数をジェネレータ関数として使用できません(この関数については最後に説明します。見てください)

テール呼び出し

 通俗的解释：就是在函数中最后一步调用函数

コード

  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 環境ではエラーは発生しません。es5 も試してみましたが、エラーは報告されません。試してみてください。

関数の拡張はここで終了です。学ぶ必要がある最も重要なことアロー関数と残りのパラメータ値の転送、および厳密モードでの関数の操作です。

この記事はここですべてです。その他のエキサイティングなコンテンツについては、注目してください。 PHP 中国語 Web サイトの JavaScript チュートリアル ビデオ 列にアクセスしてください。

以上がes6 機能の拡張紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。