JavaScript中的函数

JavaScript中的函数

一、函数基础知识

1.为什么要有函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 函数: 封装一段重复的代码, 只需要声明一次, 多次使用
    // 重复代码, 冗余代码,  垃圾代码

    // 1. 请对以下数组进行排序
    var arr = [1, 3, 5, 7, 9];
    for(var j = 0; j < arr.length - 1; j++) {
      // 假设都排好序了
      var flag = true;

      for(var i = 0; i < arr.length - 1 - j; i++) {
        if (arr[i] < arr[i+1]) {
          var temp = arr[i];
          arr[i] = arr[i+1];
          arr[i+1] = temp;
          // 打脸了
          flag = false;
        }
      }
      // 假设成立
      if (flag) {
        break;
      }
    }
    console.log(arr);

    // 2. 又来了一个数组
    var arr2 = [2,4,6,8,10,1,2];
    for(var j = 0; j < arr2.length - 1; j++) {
      // 假设都排好序了
      var flag = true;

      for(var i = 0; i < arr2.length - 1 - j; i++) {
        if (arr2[i] < arr2[i+1]) {
          var temp = arr2[i];
          arr2[i] = arr2[i+1];
          arr2[i+1] = temp;
          // 打脸了
          flag = false;
        }
      }
      // 假设成立
      if (flag) {
        break;
      }
    }
    console.log(arr2);
  </script>
</body>
</html>

2.函数的声明与调用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 函数分为 : 声明一个函数   调用一个函数
    // 如何声明一个函数?
    // function 函数名() {

    // }

    // 变量名:一般都是名词,,,,,name age 
    // 1. 函数名: 一般都是动词+名词   函数封装一段代码,表示的做一件事情
    // 2. 函数声明的时候不会执行


    // 函数调用才会执行
    // 函数名()
    function tellStory() {
      console.log('从前有座山');
      console.log('山里有座庙');
      console.log('庙里有个老和尚');
      console.log('老和尚对女和尚说');
    }


    // 调用了函数
    tellStory();

    // 函数可以调用多次
    tellStory();

    tellStory();



    /* 
      声明
      function 函数名() { 
        函数体(重复的代码)
      }
      1. 函数声明不执行,只有调用才会执行
      2. 函数名通常 动词+名词  表示函数做一件事情


      调用
      函数名();
      1. 函数只有在调用的时候才会执行
      2. 函数可以调用多次。
    */
    
  </script>
</body>
</html>

3.函数的参数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 封装一个打招呼的函数
    function sayHi() {
      console.log('hello');
      console.log('萨瓦迪卡');
      console.log('扩尼奇瓦');
      console.log('阿尼阿斯有');
      console.log('吃了没');
    }

    sayHi();

    // sayHi 是啥????
    // sayHi () 表示调用了 sayHi这个函数
    // console.log(sayHi);

    // 2. 封装一个函数,计算两个数的和
    function add() {
      var num1 = 11;
      var num2 = 22;
      console.log(num1 + num2);
    }
    add();
    add();

    // 3. 封装一个函数,计算1-100之间所有数的和
    function getSum() {
      var sum = 0;
      for(var i = 1; i <= 100; i++) {
        sum += i;
      }
      console.log(sum);
    }
    getSum();
    getSum();
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
  
    // 计算两个数的和
    // num1 和 num2 就叫做函数的参数
    // 函数的参数,分为形参 实参

    // 形参: 函数声明的时候,可以定义形参。 如果发现某个值不确定
    // 形参类似于变量, 形参不是具体的值, 形式参数
    // 形参只能在函数中使用
    // 形参是没有具体的值和具体的类型的

    // 形参: 形式参数,没有具体的值, 形参的作用:占位置
    // 函数声明的时候,参数,形参,形参只有在函数调用的时候,才会有具体的值
    function add(num1, num2) {
      console.log(num1 + num2);
    }

    // 可以计算任意两个数的和
    // 10 + 20

    // 实参: 实际参数
    // 在函数调用的时候传递的参数
    // 实参是具体的值,
    // 函数调用的时候,实参的值会赋值给形参。
    // 实参: 实际参数,函数调用的时候传递的参数就叫实参。
    // 实参的作用:在函数的调用的时候,把值给形参。
    add(10, 20);

    // 20, 30
    add(20, 30);


    add(100, 200);



    // 声明函数的语法
    //   function 函数的名字(形参1, 形参2...) {
    //      函数体
    //   }
    // 调用函数的语法
    // 函数名(实参1, 实参2...)
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 计算1-n之间所有数的和
    function getSum(n) {
      var sum = 0; 
      for(var i = 1; i <= n; i++) {
        sum += i;
      }
      console.log(sum);
    }

    getSum(5);
    getSum(100);

    // 2. 计算两个数的和
    function add(n1, n2) {
      console.log(n1 + n2)
    }
    add(1, 2);
    add(2, 5);

    // 3. 计算m-n之间所有数的积  1-5   10-20
    function getProduct(n1, n2) {
      var product = 1;
      for (var i = n1; i <= n2; i++) {
        product *= i;
      }
      console.log(product);
    }

    getProduct(8, 5);
    // getProduct(5, 8);

  </script>
</body>
</html>

4.函数的返回值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // function add(n1, n2) {
    //   console.log(n1 + n2);
    // }

    // 为什么需要返回值: 因为函数做一件事情,函数都是结果,
    // 如果想要获取到这个结果,需要函数使用return把这个结果返回出来。
    function getSum(n) {
      var sum = 0;
      for(var i = 1; i <= n; i++) {
        sum += i;
      }
      // console.log(sum);
      return sum;
    }

    // 我们调用函数,希望能够获取函数最终的计算的结果:
    // 需求:我们需要获取到函数调用的结果
    // 函数的返回值: 可以让函数返回一个结果  return :返回
    // var result = getSum(100);
    // console.log(result * 2);

    var result = getSum(10);
    console.log(result);

    console.log( getSum(1000) );
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // function getSum(n) {
    //   var sum = 0;
    //   for(var i = 1; i <= n; i++) {
    //     sum += i;
    //   }
    //   return sum;
    // }

    // // getSum(100) 
    // // 1. getSum调用了函数
    // // 2. 把 100 赋值给 n
    // // 3. return sum
    // // var result = getSum(100);
    // // console.log(result);

    // console.log( getSum(10) )


    // 1. 计算1-n之间所有数的和,并且返回结果
    // 2. 计算两个数的和,并且返回结果
    // 3. 计算m-n之间所有数的积,并且返回结果

    function add(n1, n2) {
      return n1 + n2;
    }

    console.log(add(1, 3))
    console.log(add(2, 10))


    function getProduct(m, n) {
      var product = 1;
      for(var i = m; i <= n; i++) {
        product *= i;
      }
      return product;
    }

    console.log(getProduct(1, 5));
  </script>
</body>
</html>

5.函数三要素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 定义一个函数: 函数名, 参数,  返回值  函数3要素
    // 1. 定义一个一定要有函数的名字
    // 2. 函数可以没有参数, 如果函数内部有不确定的内容,需要有参数。
    // 3. 函数可以没有返回值, 如果需要访问函数内部的某个值,只能通过函数的返回值
    // 函数名一定要有,参数和返回值可以没有,根据具体的函数分析。

    // 1. 求任意半径的圆的面积
    // console.log(Math.PI);

    // 单行注释
    // /*  */ 多行注释
    // /**  */ 文档注释

    /**
     * 求圆的面积
     * @param r {number} 圆的半径
     * @returns {number} 圆的周长
     */ 
    function getArea(r, n) {
      return Math.PI * r * r;
    }
    console.log(getArea(10));
    // 2. 求任意半径的圆的周长 
    
    function getGirth(r) {
      return 2 * Math.PI * r;
    }

    // 3. 求任意2个数中的最大值
    function getMax(n1, n2) {
      return n1 > n2 ? n1 : n2;
    }

    console.log(getMax(1, 2));


    // 单行注释
    /*  多行注释 */
    /** 
     * 文档注释
     * @param
     * @return
     *
     * */ 
  
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 求任意数组中的最大值
    // 函数名: getMax   参数:一个数组   返回值:最大值
    
    function getMax(arr) {
      var max = arr[0];
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] > max) {
          max = arr[i];
        }
      }
      // 返回这个最大值
      return max;
    }

    console.log( getMax([1,2,3,4,2]) );
    console.log( getMax([1,2,33,4,2]) );

    // 2. 求任意数组中的最小值
    function getMin(arr) {
      var min = arr[0];
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] < min) {
          min = arr[i];
        }
      }
      return min;
    }

    var result = getMin([2,4,-6,8]);
    console.log(result);

    // 3. 翻转任意数组,返回一个新的数组
    function reverse(arr) {
      var newArr = [];
      // 逆序遍历arr
      for(var i = arr.length - 1; i >= 0; i--) {
        newArr.push(arr[i]);
      }
      return newArr;
    }
    console.log(reverse([1,2,3,4]));
    console.log(reverse([6,7,8,9]));


    // 4. 对任意数组从小到大排序
    function bubbleSort(arr) {
      for(var i = 0; i < arr.length -1; i++) {
        var flag = true;
        for(var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j+1]) {
            var temp  = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
            flag = false;
          }
        }
        if (flag) {
          break;
        }
      }
      return arr;
    }

    console.log(bubbleSort([1,2,5,4,7,6,8]));
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="tool.js"></script>
  <script>
    // 求数组最大值
    var max = getMax([1,2,3]);
    console.log(max);
  </script>
</body>
</html>

二、函数高级知识

1.函数调试

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 断点调试-----函数
    // F8: 跳到下一个断点,如果后面断点,代码执行结束
    // F10: 可以让代码一步一步执行,注意,跳过函数的调用
    // F11: 可以让代码一步一步执行, 注意:进入函数的内部执行
    // shift + F11: 可以跳出当前函数
    function fn() {
      console.log('早上9:00开始备课');
      fn1();
      console.log('晚上21:00结束备课');
    }

    function fn1() {
      console.log('早上9:30开始吃鸡');
      console.log('晚上20:30结束吃鸡');
    }

    // 在fn中调用fn1
    fn();



    /* 
      为什么需要断点调试:
        1. 可以让代码一步一步执行。 跟踪代码的执行的情况, 如果有bug,非常清晰的定位到哪一步。

      怎么用?
        1. F12打开控制台
        2. 找到sources,找到对应的文件
        3. 在需要停止代码的地方打一个断点
        4. 刷新页面,就会发现代码停留在断点处。

        F8: 跳到下一个断点
        F10: 让代码一步一步执行,如果是函数调用,跳过内部的调用
        F11: 让代码一步一步执行,如果是函数调用,进入到函数内部
        shift + F11: 直接跳出当前函数


        如果有变量,配合watch来使用 

    */
    
  </script>
</body>
</html>

2.函数内部可以调用函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 封装函数: 判断某个数组是否包含某个值   返回值: true或者false
    // 判断value是否在arr中存在
    // function contain(arr, value) {
    //   var flag = false;
    //   for(var i = 0; i < arr.length; i++) {
    //     if (arr[i] === value) {
    //       flag = true;
    //       break;
    //     }
    //   }
    //   return flag;
    // }


    // return可以结束整个函数
    function contain(arr, value) {
      for(var i = 0; i < arr.length; i++) {
        if (arr[i] === value) {
          return true;
        }
      }
      return false;
    }

    // var result = contain([1,2,3], 5);
    // console.log(result);
    function uniq(arr) {
      var newArr = [];
      // 遍历arr,判断arr[i]在新数组中是否存在
      for (var i = 0; i < arr.length; i++) {
        if( contain(newArr, arr[i]) ) {
          // 说明返回的true
          continue;
        }
        newArr.push(arr[i])
      }
      return newArr
    }

    // 对数组去重
    console.log( uniq([1, 2, 3, 4, 3, 2, 1]) )
    console.log( uniq([1, 2, 3, 4, 3, 2, 2, 2, 2]) )

  </script>
</body>
</html>

3.全局变量与局部变量

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 作用域:变量起作用的区域
    // 全局变量: 在script标签内,函数外定义的变量叫做全局变量,
      // 全局变量: 在所有地方都能使用
    // 局部变量: 在函数内部定义的变量,叫做局部变量
      // 局部变量只有在当前函数内部才生效

    // var num = 11;
    // console.log(num);

    // function fn() {
    //   console.log(num);
    // }

    // fn();


    function fn() {
      var num = 11;
      console.log(num);
    }

    function fn2() {
      console.log(num);
    }
    fn();
    fn2();
    console.log(num);
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>

    // 变量访问规则:  把自己当成浏览器
    var num = 11;
    function fn() {
      var num = 22;
      console.log(num);
    }

    fn();
    console.log(num);

    // var num = 11;


    // // 函数会形成一个局部作用域
    // function fn() {
    //   console.log(num);
    // }

    // fn();


    // function fn() {
    //   var num = 10;
    //   console.log(num);
    // }

    // fn();
    // console.log(num);


    /* 
    
      全局变量: 在函数的外面定义的变量叫做全局变量,在所有的地方都能访问到
      局部变量:在函数的内部定义的变量,只有在函数的内部才能使用。
    */
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 44 11
    // 44 44

    // 练习1:
    // var num = 11;// 全局变量
    // function fn() {
    //   num = 44;// 全局变量
    //   console.log(num);
    // }
    // fn();
    // console.log(num);
    

    // 练习2
    // 一句话: 变量,如果当期作用域自己有,用自己的,改自己的
    // 如果没有,往外找, 用的是全局的,改的也是全局的
    // var num = 11;
    // function fn() {
    //   var num = 22;
    //   num = 33;
    //   console.log(num);
    // }
    // fn();
    // console.log(num);



  //  var num1 = 11; 
  //  var num2 = 22; 
  //  function fn() {
  //    var num1 = 33;
  //    num1 = 44;
  //    num2 = 55;
  //    console.log(num1);
  //    console.log(num2);
  //  }
  //  fn();

  //  console.log(num1);
  //  console.log(num2);


    // 如果没有使用var定义的变量,会把他叫做隐式全局变量。
    // 隐式全局变量尽可能避免。
    // 以后使用变量,都应该先声明。
    // function fn() {
    //   num = 33;
    //   console.log(num);
    // }

    // fn();
    // console.log(num);


    // 33 44 11 44
    // var num1 = 11; 
    // function fn() {
    //   var num1 = 22; 
    //   num1 = 33; 
    //   num2 = 44; 
    //   console.log(num1); 
    //   console.log(num2);
    // }
    // fn();
    // console.log(num1);
    // console.log(num2);

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 函数会形成一个局部作用域(函数作用域)
    // 如果函数内部还有函数,也会形成作用域,作用域一层套一层,形成作用域链
    var num1 = 11;
    function fn() {
      var num2 = 22;
      function fn2() {
        var num3 = 33;
        console.log(num3);
        console.log(num2);
        console.log(num1);
      }
      fn2()
      console.log(num2);
      console.log(num1);
      // console.log(num3);
    }
    fn();

    
  
  </script>
</body>
</html>

4.预解析

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 预解析: 预先解析
    // js代码从上往下一行一行执行.
    // undeinfed   报错   11

    // 1. js有一个预解析的过程
      // 目的:1. 确保代码没有语法错误
      // 目的  2: 确定有多少变量
    // 2. js代码从上往下一行一行执行的
    // var num;


    // 1. 把所有的var声明的变量提升到当前作用域的最前面,不会提升变量的赋值
    // 2. 把所有function声明的变量提升到当前作用域的最前面。
    console.log(num);
    var num = 11;
    console.log(num);

    // 语法错误: 编辑器就能辨别  for(;;)
    // 运行时错误:运行时才能确定这个错误
    // console.log(hahah);
  
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 预解析  
        // 1. 提升所有的var声明,不会提升赋值, 如果有同名的var声明,会忽略
        // 2. 提升所有的函数的声明,不会提升调用。如果有同名的function声明,会覆盖。
        // 3. 如果变量名和函数名重名, 函数优先。
    // 2. 代码一行一行执行
    // console.log(num);
    // var num = 11;

    // fn();
    // function fn() {
    //   console.log('哈哈');
    // }


    // console.log(num);
    // var num = 11;
    // var num = 22;
    // console.log(num);
    // function getCool() {
    //   console.log('小莲子是这个班级最美的人')
    // }
    // getCool();

    // function getCool() {
    //   console.log('汪汪是这个班级最美的人');
    // }
    // getCool();
    
    console.log(a);
    function a () {
      console.log('哈哈')
    }
    var a = 10;
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    //1. 
    var num = 10;
    fn1();
    function fn1() {
      console.log(num);
      var num = 20;
    }


    var a = 18;
    fn2();
    function fn2() {
      var b = 9;
      console.log(a);
      console.log(b);
    }


    // // 9 9 9 9 9 报错
    // // 9 9 9 报错 
    // fn3();
    // console.log(c);
    // console.log(b);
    // console.log(a);
    // function fn3() {
    //   // c = 9
    //   // b = 9
    //   // a = 9
    //   var a = b = c = 9;
    //   console.log(a);
    //   console.log(b);
    //   console.log(c);
    // }


    /* 
      1. 先把所有的var的声明提前,不会提升赋值
      2. 把所有的function声明提前,不会提升调用
      3. 如果var和function同名,函数优先
    */
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 整个函数   1
    // 两个函数
    // undefined 
    // console.log(a);
    // function a() {
    //   console.log("aaaaa");
    // }
    // var a = 1;
    // console.log(a);


    // 4 6 哈 10
    // 4 6 哈 哈
    // 4 6 报错
    // var a = 4;
    // console.log(a);
    // a = 6;
    // console.log(a);
    // function a() {
    //   console.log('哈');
    // }
    // a();
    // a = 10;
    // console.log(a);


    // 千万不要让变量和函数名重名
    var fn = 12;
    console.log(fn);

    function fn() {
      console.log('哈哈');
    }
    fn();

  </script>
</body>
</html>

5.声明函数的两种方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 常见的数据类型
    // 简单数据类型: number string boolean undefined null
    // 复杂数据类型: array function
    // function fn() {
    //   console.log('哈哈哈');
    // }

    // 我们不要把函数给特殊化, 函数其实就是一个值,复杂类型的值。  fn通常可以调用
    
    // 声明函数的2种方式
    // 1. 函数声明
    function fn() {
      console.log('哈哈哈');
    }
    fn();
    

    // 2. 函数表达式, 声明函数的第二种方式
    // webapi里面用的很多,,,,注册事件
    var fn1 = function() {
      console.log('呵呵呵')
    }
    fn1();
    

    // 二者的区别
    // function直接声明的函数,可以提升的,可以先调用,在声明
    // 函数表达式必须先声明函数,才能调用。
  </script>
</body>
</html>

6.匿名函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 匿名函数:没有名字的函数
    // 匿名函数不能直接使用,会报错,因为没有名字。

    // 匿名函数使用1: 赋值给变量   函数表达式
    // 匿名函数使用2: 匿名函数自调用


    // 自调用函数
    // var fn = function () {
    //   console.log('嘻嘻');
    // }
    // fn();


    // 自调用函数
    // (function fn() {
    //   console.log('哈哈');
    // })()

    // 匿名函数自调用  沙箱 (非常有用)
    // 全局变量污染
    (function() {
      console.log('哈哈哈')
    })();
  
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 全局变量污染:
    // 李四的代码
    // 沙箱:
    (function () {
      var fn = 12;
      function num() {
        console.log('嘻嘻嘻');
        console.log(fn);
      }
      num();
    })();

    
    (function () {
      // 张三的代码
      var num = 12;
      function fn() {
        console.log('哈哈哈');
        console.log(num);
      }
      fn();
    })();

  </script>
</body>
</html>

7.递归函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 冒泡排序   递归  算法类

    // 递归函数: 在函数内部调用了自己的函数   
    // 注意:递归函数一定要有出口

    // 递归:化归思想, 把一个复杂的问题变得简单。

    // 1 - 100   1-99  + 100   ........   1 = 1
    // 1 * 10 的结果

    // 问: js如果不加分号,他怎么知道代码如何执行
    // Js会自动在每行的默认添加 ; 作为结束

    // vue 作者 在vue的源码里面,全部都没有分号
    // function getProduct(n) {
    //   if(n === 1) {
    //     return 1;
    //   }
    //   return getProduct(n-1) * n;
    // }
    // console.log(getProduct(5));


    // 兔子数  第一个 + 第二月  = 第三个月
    // 求第n个月 = 第n-1个月 + 第n-2个月
    // function getTu(n) {
    //   if(n === 1 || n === 2) {
    //     return 1;
    //   }
    //   return getTu(n-1) + getTu(n-2);
    // }

    // console.log(getTu(12));


    // 兔子数  可以不用递归实现
    // 数学
    var n1 = 1; 
    var n2 = 1;
    var sum = 0;
    for(var i = 3; i <= 24; i++) {
      // sum第3个月
      sum = n1 + n2;
      // n2往后挪一个月
      n1 = n2;
      n2 = sum;
    }
    console.log(sum);
  </script>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值