JavaScript 関数の定義と基本的な使い方について話しましょう

WBOY
リリース: 2022-07-01 11:59:04
転載
1979 人が閲覧しました

この記事では、javascript に関する関連知識を提供します。主に、関数ステートメントによる定義、関数呼び出し、未定義な​​ど、関数の定義と基本的な使用法に関連する問題を整理します。実際に見てみましょう。パラメータなど、皆さんのお役に立てれば幸いです。

JavaScript 関数の定義と基本的な使い方について話しましょう

[関連する推奨事項: JavaScript ビデオ チュートリアル Web フロントエンド ]

1. 次のように定義します。関数ステートメント

まず例を示します。この関数の機能は、配列要素の合計を返すことです。

function sumArray(arr) {  
    var sum = 0;  
    for(var i = 0,aLength = arr.length;i < aLength;i++) {  
        sum += arr[i];  
    }  
    return sum;  }
ログイン後にコピー

キーワード function の後に空白が続きます。スペース、sumArray は関数の名前であり、その命名規則は変数名の場合と同じです。 には文字、数字、アンダースコア、ドル記号のみを含めることができ、数値またはキーワードになります。

括弧内のパラメータは、仮パラメータとも呼ばれます。パラメータ名のみが必要です。パラメータは 01、またはそれ以上で、{} で区切られ、中央の 関数本体#に含まれます。 ##。 1 つ以上のステートメントが含まれます。関数本体は、関数の機能を実装するために使用されます。

Keyword

return の後には、関数の 戻り値 が続きます。関数には戻り値がない場合もあります。関数の実行が終了すると、return この文は操作を終了します。return次の文 は実行されなくなります。戻り値は関数の出力です。

この方法で定義された関数の場合、関数とその関数を呼び出すステートメントが同じソース ファイル内にある限り、関数は関数定義の前後の両方で呼び出すことができます

2. 式定義の使用

式の形式で関数を定義します。これは、代入式

を使用して関数を変数

に代入することです。実際に関数が変数に入っているものとして見ることができます。このとき、関数には名前があってもなくてもよく、名前のない関数を匿名関数と呼びます。

名前付き;
  • var funct = function getMax(a,b) {  
        return a>b?a:b;  };//注意这后面的分号不能少,因为我们定义的是一个变量!
    ログイン後にコピー
    と は関数ステートメントで定義されます

    違いは、これらは 関数定義の後にのみ定義できることですstateこの関数を呼び出します。呼び出し時に使用できるのは 変数名 funct のみです。次のような関数名 getMax は使用できません。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var funct = function getMax(a,b) {       return a&gt;b?a:b;   };   console.log(funct(1,2));//输出2</pre><div class="contentsignin">ログイン後にコピー</div></div>

    匿名関数;
      いわゆる匿名関数は、キーワード
    • function
      の後にパラメータ リストが直接続くものです:
      var funct = function(a,b) {  
          return a>b?a:b;  };
      ログイン後にコピー
    • この関数名前はなく、変数
    funct

    に代入されるため、匿名関数と呼ばれます。同様に、 はこのステートメントの後にのみこの関数を呼び出すことができます。

    var funct = function(a,b) {  
        return a>b?a:b;  };  console.log(funct(1,2));//输出2
    ログイン後にコピー

    概要: 式を使用して関数を定義すると、使用する準備が整いました。一度定義すると、関数はこのステートメントの後でのみ呼び出すことができます

    3 .Function calling

    4 回目のトレーニングで、オブジェクトが独自のメソッドを持つことができることを紹介しましたが、もちろんこれらは関数でもあります。この関数の呼び出しは、前の 2 つのレベルで定義された関数とは少し異なります。

    //函数的定义:求三个数的最大值  
    function max(a,b,c) {  
        if(a > b) {  
            if(a > c)  
                return a;  
            else   
                return c;  
        }  
        else {  
            if(b > c)  
                return b;  
            else   
                return c;  
        }  
    }  
    //调用该函数  
    var result = max(1,2,3);//result为3  
    console.log(result);//输出3
    ログイン後にコピー

    関数を呼び出すときは、仮パラメータと同じ数の特定の値を渡す必要があります。上記の関数には

    3

    パラメータがあるため、以下を呼び出すときに渡します 3 の特定の値では、1 はパラメータ a に渡され、2 はパラメータ b に渡されます。 3 パラメータ c を渡します。関数の戻り値は、代入記号 = を介して変数 result に渡されます。関数本体に return キーワードがない場合は、unknown が返されます。 オブジェクトで定義された関数の呼び出し:

    var ob = {  
        id:1,  
        getMax:function(a,b) {  
            return a>b?a:b;  
        }  };  var result = ob.getMax(2,1);//result值为2  var result1 = ob["getMax"](2,1);//result1的值也是2
    ログイン後にコピー

    上記との違いは、ここで関数を見つけるには、

    オブジェクト名を使用する必要があることです。関数名

    または オブジェクト名 ["関数名"]、他は同じです。 4. 未定義の実パラメータ

    ほとんどのプログラミング言語では、関数呼び出し時に渡される実パラメータの数と型がチェックされ、

    JavaScript

    両方 は、 実パラメータの型や実パラメータの数をチェックしません。 JavaScript
    の実パラメータは、左から右へ の順序で仮パラメータと一致します。例:

    function myFunction(a,b,c) {  
        console.log(a);  
        console.log(b);  
        console.log(c);  }  myFunction(1,2,3);
    ログイン後にコピー
    actualparameters

    1

    受信仮パラメータ a、実パラメータ 2 受信仮パラメータ b、受信実パラメータ 3 受信仮パラメータ c。実パラメータの数が仮パラメータよりも少ない場合、値 未定義 が右側の仮パラメータに渡されます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function myFunction(a,b,c) {       console.log(a);       console.log(b);       console.log(c);  }  myFunction(1,2);</pre><div class="contentsignin">ログイン後にコピー</div></div>実際のパラメータ

    1

    仮パラメータを渡すa,実際のパラメータ2仮パラメータを渡すb, unnamed仮パラメータcを渡します。右側のパラメータにのみデータを渡したい場合は、最初のいくつかの実際のパラメータに unknown を渡すことができます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function myFunction(a,b,c){  console.log(a);  console.log(b);  console.log(c);  }  myFunction(undefined,1,2);</pre><div class="contentsignin">ログイン後にコピー</div></div>上記の 2 つの方法は十分に厳密ではありません。ベスト プラクティスは、

    未定義

    で渡される可能性がある仮パラメータに デフォルト値を設定することです。価値。のように:###

    function getSum(a,b,c) {  
        if(c === undefined)   
            c = 0;  
        console.log(a+b+c);  }  myFunction(1,2);
    ログイン後にコピー

    5.实参对象

    JavaScript一切都是对象,实参也是一个对象,有一个专门的名字arguments,这个对象可以看成一个数组(类数组,不是真的数组),实参从左到右分别是arguments[0]、arguments[1]...arguments.length表示实参的个数。

    //求参数的和  function getSum() {  
        var aLength = arguments.length;  
        var sum = 0;  
        for(var i = 0;i < aLength;i++) {  
            sum += arguments[i];  
        }  
        return sum;  }  console.log(getSum(1,2,3,4,5))//输出15
    ログイン後にコピー

    这里的形参直接省略,使用arguments[i]表示。

    6.对象作为参数

    复杂的函数通常多达十几个参数,尽管JavaScript不做参数个数和类型的检查,但是调用时实参的顺序不能乱。开发人员需要检查每一个实参和形参的对应关系,这样效率很低。一种很好的解决方案是使用对象作为参数,函数会根据对象的属性名操作参数。

    function myFunction(obj) {  
        console.log(obj.name);  
        obj.number++;  
        return obj.number;  }  myObj = {name:"myObj",number:34};  myFunction(myObj);//输出myObj  console.log(myObj.number);//输出35
    ログイン後にコピー

    7.函数对象作为另一个函数的参数

    一个函数(为方便行文,称为a函数)可以作为另外一个函数(称为b函数)的参数b函数最终可以返回一个具体的值。

    从原理上来说,b函数在自己的函数体内调用了a函数,所以需要把a函数的名字作为实际参数传递给b函数。如下:

    //求最大值  function getMax(a,b) {  
        return a>b?a:b;  }  //求最小值  function getMin(a,b) {  
        return a<b?a:b;  }  //下面这个函数以函数作为参数,并最终返回一个值  function getM(func,num1,num2) {  
        return func(num1,num2);  }  getM(getMax,1,2);//返回2  getM(getMin,1,2);//返回1
    ログイン後にコピー

    我们把a函数的名字(getMax或者getMin)传给b函数(getM()),然后在b函数内部调用传入的a函数,得到相关的结果。

    【相关推荐:javascript视频教程web前端

    以上がJavaScript 関数の定義と基本的な使い方について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート