JavaScriptのreturnメソッドを詳しく解説-jsチュートリアル-php.cn

JavaScriptのreturnメソッドを詳しく解説

醉折花枝作酒筹

リリース： 2023-01-06 11:16:56

オリジナル

5936 人が閲覧しました

js では、return メソッドは現在の関数を終了し、現在の関数の値を返します。構文形式は「return [[expression]];」です。 return は式の値を返しますが、これを無視した場合、つまり "return;" を指定した場合は unknown を返します。

JavaScriptのreturnメソッドを詳しく解説

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

最近、フロントエンドを勉強している友人から、関数の return の使い方や意味を漠然と理解している人が多いと聞きましたので、return の使い方について皆さんと議論するためにここにブログを書きます。

1. 定義

return、文字通り「return」を意味します。公式定義の return ステートメントは、現在の関数を終了し、現在の関数の値を返します。以下を参照してください。サンプルコード:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <title>Title</title>
      <script>
         function func1(){
              while (true){
                  return 1;
             }
         };
         alert(func1());
     </script>
 </head>
 <body>
 
 </body>
 </html>

ログイン後にコピー

関数内に無限ループを記述し、以下で呼び出したことがわかります。return ステートメントが記述されていない場合、ブラウザは常にループ内のステートメントを実行し、直接スタックします。 ;

return ステートメントを記述した後、関数は直接中断され、値 1 が関数に返されます。これは、関数の実行後、関数本体に関数の戻り値が割り当てられることを意味します。ここでは 1 が返されます;

2. 書き方

return の正式な定義の後には、次のように続きます。値。つまり、JavaScript で値を続けることができます。任意のデータ型、数値、文字列、オブジェクトなど。もちろん、関数を返すこともできます。例:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script>
          function func1(){
              return function (){
                  alert(1);
             }
         };
         alert(func1());  //!func1()();   这个注释是通过自执行函数调用返回的函数
         </script>
 </head>
 <body>
 
 </body>
 </html>

ログイン後にコピー

サンプル画像:

# もちろん関数であれば呼び出すことができますので、次のように書くこともできます。 func1()(); これは理解するのが簡単です。 func1(); を出力すると、これは return が続く無名関数です。その後、自己実行関数の形式で呼び出すことができます。ここに渡されます。関数 body(); の形式で呼び出されます。

#3. 演習

return ステートメントを使用してループを実装します。

アイデア: return ステートメントは関数を返すことができるということは、それ自体を返すことができ、後で呼び出すとループ関数を実現できることを意味します;

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script>
          var i=1;      //定义循环变量
          function func1(){
              i++;       //改变循环变量
             if(i<5){　　　　　　　　//小括号为循环条件
                 document.write(i+&#39;<br>');      //这里是循环体
                 return func1();
             }                 
         }
         !func1()();               //调用函数
</script>
 </head>
 <body>
 
 </body>
 </html>

ログイン後にコピー

の各部分の関数ループコード内のコメントに関数が記述されています。ブロガーは自分で試すことができます。以下は実行レンダリングです。

#4. 定義します。 javascript auto メソッド内のコールバック関数

return の使用法については既に詳細に学習しました。次に、JavaScript 独自のメソッド内のコールバック関数を学習します。ここでは、配列内の sort(); を使用します。並べ替えメソッドの例:

sort() で、配列の並べ替え規則を指定するコールバック関数を作成できることは周知のとおりです。サンプルコード:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
     <title>Title</title>
      <script>
          var arr = [1,3,2,6,5];
          arr.sort(function(a,b){
              return a-b;
         });
         console.log(arr); 
</script>
 </head>
 <body>
 
 </body>
 </html>

ログイン後にコピー

実行レンダリング:

それでは、なぜこんなことが起こるのでしょうか? return と何の関係があるのでしょうか? 悩んでいるブロガーも多いと思いますが、実験して return の後の a-b を -1 に置き換えてみましょう。 ; 変更が小さい場合、コードはアップロードされなくなります。友人は手動で変更できます。

実行レンダリング:

これは、いつでも確認できます。 a 負の数が -1 の場合、変化は起こりません。以下では、return 後の a-b を 0 に置き換えます。

実行レンダリング:

ご覧のとおりです。 0 が返された場合、変更は発生しません。以下では、戻り後の a-b を正の数 1 に置き換えます。

実行レンダリング:

次のことができます。を参照してください。1 が返されると、配列の順序が逆になります。

次に、次の結論を導き出すことができます:

a-b<=0 の場合、a が前にあり、b が前にあります。は後ろにあります;

a-b>0 の場合、a は後、b は前になります;

この時点で、a と b とは何かという疑問を持つブロガーもいるはずです。次のコードが出力されます:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script>
          var a = [1,3,2,6,5];
          a.sort(function(a,b){
              console.log('a是:'+a+'\t b是:'+b+'<br>');
             return a-b;
         });
         console.log(a);
</script>
 </head>
 <body>
 
 </body>
 </html>

ログイン後にコピー

Execution rendering: