función javascript (5)

función

La definición de la función Js: encapsula un bloque de código que se puede ejecutar y llamar repetidamente.

Propósito: Permitir que se reutilice una gran cantidad de código

Experiencia funcional

Suma de funciones

La denominación del nombre de la función es un verbo y la denominación del nombre de la variable es un sustantivo

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


Inserte la descripción de la imagen aquí

Uso de funciones

  • Declarar función
  • Funciones de llamada

Declarar función

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

Funciones de llamada

  函数名()

Precauciones

  • función es una palabra clave para declarar una función, por lo que debe estar en minúsculas
  • La función es hacer algo, por lo que el nombre de la función es un verbo
  • La función en sí no se ejecuta, se debe llamar para ejecutar
  • No olvide agregar paréntesis cuando llame

Uso simple de funciones

<script>

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

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

Inserte la descripción de la imagen aquí

Encapsulación de funciones

En pocas palabras, encapsula una función y múltiples funciones en forma de funciones y proporciona una interfaz de función simple al exterior.

Comprensión simple: similar al embalaje expreso

La encapsulación de la función encuentra la multiplicación acumulada entre 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>

Inserte la descripción de la imagen aquí

Parámetros de función

  • Parámetros de función: parámetros formales
  • Al declarar una función, los parámetros entre paréntesis después del nombre de la función se denominan parámetros formales.Los parámetros formales son parámetros formales y se utilizan para recibir los valores pasados ​​por los parámetros reales.
  • Al llamar a una función, los parámetros entre paréntesis después del nombre de la función se denominan parámetros reales.
  • El valor dentro de la función es incierto y se pueden pasar diferentes valores a través de los parámetros reales
  • Los parámetros de la función son opcionales

Caso de función

La suma de dos números cualesquiera en un caso de función


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

Inserte la descripción de la imagen aquí

Caso de función para encontrar la suma entre dos números cualesquiera

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

Inserte la descripción de la imagen aquí

La forma de la función participa en la coincidencia del número de argumentos

Cuando el número de participación formal de la función y los parámetros reales es el mismo

Si el número de parámetros de función es el mismo, el resultado de entrada es normal

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

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

Inserte la descripción de la imagen aquí

Cuando el número de parámetros reales de una función es mayor que el de parámetros formales

El número de parámetros formales de función es menor que el número de parámetros reales, entonces prevalecerá el número de parámetros formales.

<script>

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

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

Inserte la descripción de la imagen aquí

Cuando los parámetros formales de la función son mayores que los parámetros reales

El número de parámetros de función es mayor que el número de parámetros reales, el resultado es NaN

Precauciones

  • Los parámetros formales de la función pueden considerarse variables no asignadas y el valor no está definido;
  • Agregue cualquier valor a indefinido, el resultado final es NaN (no un número)
<script>
    //声明函数
    function getSum(num1, num2, num3) {
        return num1 + num2 + num3
    }

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

Inserte la descripción de la imagen aquí

Resumen de los parámetros de la función

  • La función puede tomar parámetros o no tomar parámetros
  • Cuando la función tiene varios parámetros, separados por una coma en inglés
  • Al declarar una función, los parámetros entre paréntesis después de la función son parámetros formales y el valor predeterminado no está definido.
  • Al llamar a una función, los parámetros entre paréntesis después de la función son parámetros reales
  • La forma y los parámetros reales de los parámetros deben ser consistentes; de lo contrario, el resultado es difícil de predecir.

El valor de retorno de la función

La función es lograr una determinada cosa o una determinada función y, finalmente, devolver el valor de retorno al llamador de la función.

Durante la ejecución de la función, cuando se encuentra return, el resultado se devolverá al llamador de la función.

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

Inserte la descripción de la imagen aquí

El valor de retorno de la función encuentra el valor máximo entre dos números.

El primer tipo: use la declaración if

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

El segundo tipo: usa expresiones ternarias

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

Inserte la descripción de la imagen aquí

El valor de retorno de la función encuentra el valor máximo de la matriz.

En el desarrollo real, las variables se utilizan generalmente para recibir el valor de retorno de la función.


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

Inserte la descripción de la imagen aquí

regreso

retorno: función de terminación

La declaración después de la devolución no se ejecutará

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

Inserte la descripción de la imagen aquí

Solo se puede devolver un valor después de la devolución

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

Inserte la descripción de la imagen aquí

El uso de la matriz de retorno puede devolver múltiples valores.

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

Inserte la descripción de la imagen aquí

La diferencia entre romper continuar regresar

  • romper: finaliza el ciclo actual
  • continuar: finaliza el ciclo actual y continúa con el siguiente ciclo
  • return: si no ingresa, puede saltar del bucle y finalizar el código en el cuerpo de la función, y devolver el resultado al llamador de la función

Ver a través de la función a través del exprimidor

Inserte la descripción de la imagen aquí

Uso de argumentos

        Cuando no estamos seguros de cuántos parámetros reales hay, podemos usar el objeto de argumentos, que es un objeto integrado de la función y almacena todos los parámetros reales pasados.

<script>
    function fn() {


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

Inserte la descripción de la imagen aquí
Precauciones

  • argumentos es una pseudo-matriz, no una matriz en el verdadero sentido
  • Los argumentos tienen un atributo de longitud y están ordenados por índice
  • Los argumentos no pueden utilizar métodos de matriz reales, como push, pop

Use argumentos para encontrar el valor máximo en la matriz

Idea: la idea de encontrar el valor máximo de una matriz es la misma

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

Inserte la descripción de la imagen aquí

Estuche de embalaje funcional

Voltear matriz arbitraria en el caso del paquete de funciones

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

Inserte la descripción de la imagen aquí

Encapsulación de funciones para lograr la clasificación de burbujas

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

Inserte la descripción de la imagen aquí

Utilice la encapsulación de funciones para determinar los años bisiestos y los años normales

Declare un candado, si es un año bisiesto, devuelva verdadero, si no es un año bisiesto, devuelva falso

Inserte la descripción de la imagen aquí


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

Inserte la descripción de la imagen aquí

Llamadas mutuas entre funciones

Cada código es un bloque de código especial, para completar una tarea especial, las funciones pueden llamarse entre sí

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

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

Inserte la descripción de la imagen aquí

Caso de convocatoria mutua de funciones

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

    }

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

Inserte la descripción de la imagen aquí

El número de días en febrero para llamar entre funciones.

      En la función de febrero, se llama a la función isRunYear en la sentencia if y se pasa. Si es verdadera, habrá 29 días en febrero, y si es falsa, habrá 28 días en febrero.

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


Inserte la descripción de la imagen aquí

Dos formas de declarar funciones

declaración de palabra clave de función

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

Inserte la descripción de la imagen aquí

Función de declaración de expresión de función


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

Inserte la descripción de la imagen aquí
Nota

  • fn es un nombre de variable, no un nombre de función
  • La forma de declarar funciones es similar a declarar variables, excepto que una almacena la variable y la otra almacena la función
  • Las expresiones de función también pueden pasar parámetros.

Supongo que te gusta

Origin blog.csdn.net/weixin_45419127/article/details/111660682
Recomendado
Clasificación