javascript関数(5)

関数

Js関数の定義:繰り返し実行および呼び出すことができるコードブロックをカプセル化します。

目的:多くのコードを再利用できるようにする

機能体験

関数の合計

関数名の命名は動詞であり、変数名の命名は名詞です

<script>
    function getSum(num1, num2) {
        var sum = 0;
        for (var i = num1; i <= num2; i++) {
            sum = sum + i;
        }
        return sum;

    }
    console.log(getSum(1, 100)); //求~100的和
    console.log(getSum(1, 1000)); //求1~1000的和
</script>


ここに画像の説明を挿入

関数の使用

  • 宣言機能
  • 関数を呼び出す

宣言機能

  function 函数名() {
        //函数体
    }

関数を呼び出す

  函数名()

予防

  • functionは関数を宣言するためのキーワードであるため、小文字にする必要があります
  • 関数は何かをすることなので、関数の名前は動詞です
  • 関数自体は実行されません。実行するには呼び出す必要があります
  • 電話をかけるときは括弧を追加することを忘れないでください

関数の簡単な使用

<script>

    //声明函数
    function sayHi() {
        return '尧子陌'
    }

    //调用函数
    console.log(sayHi())
</script>

ここに画像の説明を挿入

関数のカプセル化

簡単に言えば、1つの関数と複数の関数を関数の形でカプセル化し、外部への単純な関数インターフェースを提供することです。

簡単な理解:エクスプレスパッケージに似ています

関数のカプセル化により、1〜10の累積乗算が検出されます


    <script>
        function getSum(num1, num2) {
            var sum = 1;
            for (var i = num1; i <= num2; i++) {
                sum = sum *i;
            }
            return sum;

        }
        console.log(getSum(1, 10)); //求~10的相乘的结果

    </script>

ここに画像の説明を挿入

関数パラメーター

  • 関数パラメーター:仮パラメーター
  • 関数を宣言するとき、関数名の後の括弧内のパラメーターは仮パラメーターと呼ばれます。仮パラメーターは仮パラメーターであり、実際のパラメーターによって渡された値を受け取るために使用されます。
  • 関数を呼び出す場合、関数名の後の括弧内のパラメーターは実際のパラメーターと呼ばれます。
  • 関数内の値は不確実であり、実際のパラメーターを介してさまざまな値を渡すことができます
  • 関数のパラメーターはオプションです

ファンクションケース

関数ケースの任意の2つの数値の合計


    <script>
        // 声明函数
        function getSum(num1, num2) {
            return num1 + num2
        }
        //调用函数
        console.log(getSum(100, 200))
        console.log(getSum(10, 20))
    </script>

ここに画像の説明を挿入

任意の2つの数値の合計を求める関数ケース

<script>
    //声明函数
    function getSum(star, end) {
        var sum = 0;
        for (var i = star; i <= end; i++) {
            sum = sum + i;
        }
        return sum
    }
    //调用函数
    console.log(getSum(20, 50))
    console.log(getSum(1, 100))
</script>

ここに画像の説明を挿入

関数の形状は、引数の数のマッチングに関与します

関数の正式な参加数と実際のパラメーターが同じ場合

関数パラメーターの数が同じ場合、入力結果は正常です

<script>
    //声明函数
    function getSum(num1, num2) {
        return num1 + num2
    }

    //调用函数
    console.log(getSum(10, 20))
</script>

ここに画像の説明を挿入

関数の実パラメータの数が仮パラメータの数よりも多い場合

関数の仮パラメータの数が実際のパラメータの数より少ない場合は、仮パラメータの数が優先されます。

<script>

    //声明函数
    function getSum(num1, num2) {
        return num1 + num2
    }

    //调用函数
    console.log(getSum(1, 200, 500))
</script>

ここに画像の説明を挿入

関数の仮パラメーターが実際のパラメーターよりも大きい場合

関数パラメーターの数が実際のパラメーターの数よりも多い場合、結果はNaNになります

予防

  • 関数の正式なパラメーターは未割り当ての変数と見なすことができ、値は未定義です。
  • undefinedに任意の値を追加すると、最終結果はNaN(数値ではありません)になります
<script>
    //声明函数
    function getSum(num1, num2, num3) {
        return num1 + num2 + num3
    }

    //调用函数
    console.log(getSum(100, 200)) //形参的个数大于实参的个数的情况下 
    console.log(getSum(100, 200, 500)) //形参的个数与实参的个数一致的情况下
</script>

ここに画像の説明を挿入

関数パラメーターの要約

  • 関数はパラメーターを受け取ることも、パラメーターを受け取らないこともできます
  • 関数に複数のパラメーターがあり、英語でコンマで区切られている場合
  • 関数を宣言する場合、関数の後の括弧内のパラメーターは仮パラメーターであり、デフォルト値は未定義です。
  • 関数を呼び出す場合、関数の後の括弧内のパラメーターは実際のパラメーターです。
  • パラメータの形式と実際のパラメータは一貫している必要があります。そうしないと、結果を予測するのが困難になります。

関数の戻り値

関数は、特定のことまたは特定の関数を実現し、最終的に関数の呼び出し元に戻り値を返すことです。

関数の実行中にreturnが発生すると、結果は関数の呼び出し元に返されます。

<script>
    //声明函数
    function getResult() {
        return 520
    }
    //调用函数
    console.log(getResult())
</script>

ここに画像の説明を挿入

関数の戻り値は、2つの数値の間の最大値を見つけます

最初のタイプ:ifステートメントを使用します

<script>
    function comParison(num1, num2) {
        if (num1 > num2) {
            return num1
        } else {
            return num2
        }
    }
    console.log(comParison(20, 50))
</script>

2番目のタイプ:3項式を使用する

<script>
    function comParison(num1, num2) {
        return num1 > num2 ? num1 : num2
    }
    console.log(comParison(20, 50))
</script>

ここに画像の説明を挿入

関数の戻り値は、配列の最大値を見つけます

実際の開発では、変数は通常、関数の戻り値を受け取るために使用されます


<script>
    function getMax(arr) {
        var max = arr[0]
        for (var i = 0; i < arr.length; i++) {
            if (max <= arr[i]) {
                max = arr[i]
            }

        }
        return max;
    }

    var result = getMax([5, 10, 52, 38, 98,69]);
    console.log(result);
</script>

ここに画像の説明を挿入

戻る

戻り値:終了関数

返品後のステートメントは実行されません

<script>
    function getSum(num1, num2) {
        return num1 + num2;
        alert('hello word')
    }
    getSum(10, 20);
    console.log(getSum(10, 20));
</script>

ここに画像の説明を挿入

返却後に返却できる値は1つのみです

<script>
    function fn(num1, num2) {
        return num1, num2
    }
    console.log(fn(20, 50));
</script>

ここに画像の説明を挿入

戻り配列を使用すると、複数の値を返すことができます

<script>
    function fn(num1, num2) {
        return [num1 * num2, num1 / num2, num1 - num2, num1 + num2]
    }
    console.log(fn(20, 50));
</script>

ここに画像の説明を挿入

ブレークコンティニューリターンの違い

  • ブレーク:現在のループを終了します
  • 続行:現在のループを終了し、次のループに進みます
  • return:入力しない場合は、ループから飛び出して関数本体のコードを終了し、結果を関数の呼び出し元に返すことができます。

ジューサーを通して機能を通して見る

ここに画像の説明を挿入

引数の使用

        実際のパラメーターがいくつあるかわからない場合は、関数の組み込みオブジェクトであり、渡されたすべての実際のパラメーターを格納するargumentsオブジェクトを使用できます。

<script>
    function fn() {


        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
    fn(5, 20, true, false, '李小龙', '张飞');
</script>

ここに画像の説明を挿入
予防

  • 引数は疑似配列であり、本当の意味での配列ではありません
  • 引数には長さ属性があり、インデックスでソートされます
  • 引数は、push、popなどの実際の配列メソッドを使用できません

引数を使用して、配列の最大値を見つけます

アイデア:配列の最大値を見つけるというアイデアは同じです

<script>
    function fn() {
        //声明一个最大值变量max
        var max = 0;
        for (var i = 0; i < arguments.length; i++) {
            if (max < arguments[i]) {
                max = arguments[i]
            }
        }
        return max

    }
    var result = fn(2, 5, 15, 20, 25, 85, 55, 64);
    console.log(result);
</script>

ここに画像の説明を挿入

機能包装ケース

関数パッケージの場合に任意の配列を反転します

<script>
    function reserve(arr) {
        var newArray = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArray[newArray.length] = arr[i]
        }
        return newArray;

    };
    console.log(reserve([20, 50, 60, 80, 100]));
</script>

ここに画像の説明を挿入

バブルソートを実現するための関数のカプセル化

<script>
    function fn(arr) {
        for (var i = 0; i <= arr.length - 1; i++) { //外层负责趟数
            for (var j = 0; j <= arr.length - i - 1; j++) { //内层负责每次交换的次数
                if (arr[j] > arr[j + 1]) {

                    var temp = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j + 1] = temp
                }
            }

        }
        return arr
    }
    console.log(fn([20, 80, 15, 2, 69, 35]));
</script>

ここに画像の説明を挿入

関数のカプセル化を使用して、うるう年と通常の年を決定します

ロックを宣言します。うるう年の場合はtrueを返し、うるう年でない場合はfalseを返します。

ここに画像の説明を挿入


<script>
    function isRunYear(year) {

        var flag = false;
        if (year % 4 == 0 && year % 400 != 0 || year % 400 == 0) {
            flag = true;
        }
        return flag
    }
    console.log(isRunYear(2000))
    console.log(isRunYear(2001))
</script>

ここに画像の説明を挿入

関数間の相互呼び出し

各コードは特別なコードブロックであり、特別なタスクを完了するために、関数は相互に呼び出すことができます

<script>
    function fn1() {
        console.log(111);
        fn2()
    }
    fn1();

    function fn2() {
        console.log(222);
    }
</script>

ここに画像の説明を挿入

関数の相互呼び出しの場合

<script>
    function fn1() {
        console.log(111);
        fn2();
        
        console.log('fn1')

    }

    function fn2() {
        console.log(222);
        console.log('fn2')
    }
    fn1()
</script>

ここに画像の説明を挿入

関数間で呼び出す2月の日数

      feBruary関数では、isRunYear関数がif判定ステートメントで呼び出され、渡されます。trueの場合は2月に29日、falseの場合は2月に28日となります。

<script>
 function  feBruary() {
     var year = prompt("请输入当前的年份")
    if(isRunYear(year)) {
        alert('当前是闰年 2月份有29天')
        
    }else {
        alert('当前是平年 2月份有28天')
    }
 }


 feBruary() //调用函数


    function isRunYear(year) {
        
        var flag  = false;
        if(year % 4 ==0 && year % 400 != 0 || year % 400 == 0) {
            flag = true;
        }
        return flag
    }
  
</script>


ここに画像の説明を挿入

関数を宣言する2つの方法

関数キーワード宣言

<script>
    function fn(str) {
        console.log(str);
    }
    fn('hello')
</script>

ここに画像の説明を挿入

関数式宣言関数


<script>
    var fn = function(str) {
        console.log(str)
    }
    fn('hello word')
</script>

ここに画像の説明を挿入
注意

  • fnは変数名であり、関数名ではありません
  • 関数を宣言する方法は、一方が変数を格納し、もう一方が関数を格納することを除いて、変数の宣言と似ています。
  • 関数式はパラメーターを渡すこともできます。

おすすめ

転載: blog.csdn.net/weixin_45419127/article/details/111660682