函数加案例实战加作用域等拓展了解

亦随
433 阅读3分钟

函数加案例实战加作用域等拓展了解

1.函数的认知

函数也是数据类型的一种，它就是可以将需要的元素封装起来，等需要的时候再调用，但是它不止可以调用一次，它可以调用无数次

写法如下

 <script>
        // 1.声明或者定义函数
        // 2.函数的命名（使用有意义的命名，例如前面动词加小驼峰）
        // 3.然后大括号封装
        // 4.外部输入，可以无限次使用
        function sayHi() {
            console.log('我很好');
            console.log('你很好');
            console.log('他不好');
        }

        sayHi() // 输出三句话第一次
        sayHi()// 输出三句话第二次
        sayHi()// 输出三句话第三次


    </script>

1648691530290.png

1648691778546.png

1648692797439.png

案例 函数的调用 -99乘法表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-99乘法表-函数调用</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      span {
        border: 1px solid #000;
        padding: 10px 0;
        width: 100px;
        text-align: center;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <script>
      // 1 声明函数 -  输出  99乘法表
      function calcNum() {
        for (let index = 1; index <= 9; index++) {
          for (let index1 = 1; index1 <= index; index1++) {
            let num = index1 * index;
            document.write(`<span>  ${index1} * ${index} = ${num}     </span>`);
          }
          document.write('<br/>');
        }
      }

      // 2 调用函数-输出三次99乘法表
      calcNum();
      calcNum();
      calcNum();
    </script>
  </body>
</html>

案例 函数的封装

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-函数封装.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 封装的函数不够灵活 无法复用 没有感受到 提高！！ 
      // 计算 3 + 2 的和
      // 计算 1-50 的和

      // 只能计算 100 + 1
      function calcSum1() {
        let a = 100;
        let b = 1;
        console.log(a + b);
      }

      // 计算 3 + 2 的和
      function calcSum3() {
        let a = 3;
        let b = 2;
        console.log(a + b);
      }

      // 只能计算 1-100 和
      function calcSum2() {
        let sum = 0;
        for (let index = 1; index <= 100; index++) {
          sum += index;
        }
        console.log(sum);
      }

      // 计算 1-50 的和
      function calcSum3() {
        let sum = 0;
        for (let index = 1; index <= 50; index++) {
          sum += index;
        }
        console.log(sum);
      }

      calcSum1();
      calcSum2();

      // console.log();
      // document.write()
      // alert(789);
    </script>
  </body>
</html>

2.形参

1648695250905.png

函数-参数

声明函数后面是函数的命名，命名括号里面是形参，就是形式上的参数，没有实际值的，后面函数输出的时候加上实参才算有实际值，形参和实参的位置顺序不能调换如（a，b）（1，2）a对应1，b对应2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-函数参数.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 声明函数
      function getSum(num1, num2) {
        // num1 = 100
        // num2 = undefined
        console.log(num2);
        document.write(num1 + num2);
        // 100 + undefined
      }
      // function getSum(a, b) {
      //   document.write(a + b);
      // }

      // getSum(10, 20);
      // getSum(100, 200);
    </script>
  </body>
</html>

案例 计算数组里面的总值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>08-计算总分.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 函数的声明
      function calcSum(arr) {
        let sum = 0;
        for (let index = 0; index < arr.length; index++) {
          sum += arr[index];
        }
        console.log(sum);
      }
      // 函数的调用

      let arr1 = [1, 3, 4, 2, 22];
      let arr2 = [3, 2, 22, 41, 3];

      calcSum(arr1);
      calcSum(arr2);
    </script>
  </body>
</html>

案例 函数参数的补充

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>09-函数和参数.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // // 函数的声明
      // function sayHi(a) {
      //   a = '大家好';
      //   // a="海贼王";
      //   // a 用来代表这 外部会传入尽量的 一个数据 而已  别名  这个家伙
      //   console.log(a);
      // }
      // // 函数的调用 + 传参
      // // sayHi('你好');

      // sayHi('大家好');

      // let userName = '海贼王';
      // sayHi(userName);

      // 希望有一个函数 可以自动针对传入的 数组 来求和
      function calcSum(a) {
        // 默认a就是一个数组 =[1,2,3]  [4,5,6]
        let sum = 0;
        for (let index = 0; index < a.length; index++) {
          sum += a[index];
        }
        console.log(sum);
      }

      // 实参和形参有几个

      // 函数调用的时候，括号里面有几个数据 就是几个参数
      calcSum([1, 2, 3, 4]);
      calcSum([1, 33, 23, 43]);
    </script>
  </body>
</html>

案例 函数-计算数组的最大值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>10-计算数组的最大值.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // // 写一个函数 接收一个参数-数组 输出最大值
      // let arr = [1, 3, 2, 2, 4, 5];

      // function getMax(abc) {
      //   // 你来写
      // }

      // getMax(arr); // 5
      // getMax([3, 1, 3, 2, 11]); // 11

      // 如果不做函数封装 你能不能写出来 OK-之前的循环的代码 没有写熟

      function getMax(a) {
        // a 就是一个数组
        // let arr = [1, 3, 2, 2, 4, 5];
        let max = a[0];
        for (let index = 0; index < a.length; index++) {
          if (a[index] > max) {
            max = a[index];
          }
        }

        console.log(max);
      }

      getMax([1, 3, 11, 1234]); // 1234
      getMax([3, 1, 3, 2, 11]); // 11
    </script>
  </body>
</html>

案例 函数-求数组里面的奇数和

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>11-计算数组中的奇数的和.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 如何重复写函数的 ？

      let arr = [1, 3, 4, 1, 22, 3, 4, 5];

      function getSum(arr) {
        let sum = 0;
        for (let index = 0; index < arr.length; index++) {
          // 判断当前的数字是不是小数， 如果是 跳过本次循环  continue
          // 判断当前数字是不是小数 很多做法的。。

          // 找到奇数
          if (arr[index] % 2 !== 0) {
            // 奇数
            sum += arr[index];
          }
        }
        console.log(sum);
      }

      getSum(arr); // 数组中 奇数的总和  1 3 7 9 ... +

      // 写一下 求奇数和的代码

      // 补充
      // 你的需求是什么 ？
      // 用户真的输入了 带小数 1.1  不添加，还是取整后 1.1 = 1  再去判断
      // 1.1 => 2  再去判断。。

      // 1.1 判断如果是小数 直接不添加了。。
    </script>
  </body>
</html>

拓展知识-函数-判断当前数字是不是小数案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>12-拓展.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 了解即可 大家不用管实现  超纲  了解

      // 会去判断当前数字是不是小数
      function isFloat(num) {
        // num = 1.1
        // num =>取整   num2= 1   拿 num2 和 num 做比较 不相等 就表示 num = 小数
        // let num2 = parseInt(num); // num = 1
        // // 判断两个变量是否相等
        // if (num !== num2) {
        //   console.log(num, 'num就是小数');
        // } else {
        //   console.log(num, 'num是整数');
        // }

        if (num.toString().includes(".")) {
          console.log(num, 'num就是小数');
        } else {
          console.log(num, 'num是整数');
        }
      }

      isFloat(11);
      isFloat(11.1);
      isFloat(11.3);
      isFloat(15);
    </script>
  </body>
</html>

案例 函数-求两个数之中的最大值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>13-算最大值.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      let num1 = 300;
      let num2 = 300;

      // 写综合案例的时候
      // 1 逻辑思维还在逐渐的形成当中-编码思维
      // 2 代码的结构的熟练度 

      function getMax(n1, n2) {
        if (n1 > n2) {
          console.log('最大的是' + n1);
        } else {
          console.log('最大的是' + n2);
        }
      }

      getMax(num1, num2); // 输出 两个参数中 比较大的那一个值
    </script>
  </body>
</html>

3.函数的返回值加案例实战

return:函数的返回值，注意点是必须在函数的里面，还有要在最下面因为输出了返回值之后在它下面的都不会执行了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>14-函数的返回值.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // function getMax() {}

      // function getSum() {}

      // // 这个num1 就是  函数getMax调用的返回值 （ num1 = 1 2 。。）

      // // let num2 = getSum();

      // let num1 = getMax();// 我们自己写的函数 只能返回 undefined
      // let num3 = parseInt(1.3);// js自己内部写的 返回值  1

      // console.log(num3); //

      function getMax() {
        // 100 就是 函数在执行完毕的时候 会返回的数据
        return 300;
      }

      let num1 = getMax(); // num1 =100

      console.log(num1);
    </script>
  </body>
</html>

函数返回值的使用场景

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>15-函数的返回值的使用场景.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 函数 参数的最大值
      function getMax(n1, n2) {
        if (n1 > n2) {
          return n1;
        } else {
          return n2;
        }
      }

      // 通过 console.log 帮我打印
      // let num1 = getMax(1, 3);
      // console.log(num1);
      // let num1 = getMax(1, 3);
      console.log(getMax(1, 3));

      // 通过 document.write  帮我打印
      // let num2 = getMax(2, 4);
      document.write(getMax(2, 4));

      // 通过 alert 帮我打印
      // let num3 = getMax(6, 8);
      alert(getMax(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,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>16-函数返回值的案例.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      let arr1 = [1, 3, 4, 33, 22];

      // 声明一个函数 用来计算数组的最大值 并且 最大值 返回
      function getMax(arr) {
        let max = arr[0];
        for (let index = 0; index < arr.length; index++) {
          if (arr[index] > max) {
            max = arr[index];
          }
        }

        return max;
      }

      let max = getMax(arr1);
      console.log(max); // max 该数组的最大值 ！

      // 声明一个函数 用来计算数组的最小值
      function getMin(arr) {
        let min = arr[0];
        for (let index = 0; index < arr.length; index++) {
          if (arr[index] < min) {
            min = arr[index];
          }
        }

        return min;
      }

      let min = getMin(arr1);

      console.log(min); // min 输出数组的最小智
    </script>
  </body>
</html>

返回值的补充

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>17-函数返回值补充.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /* 
      1 不能同时执行多次return 第一个return生效 
      2 函数内部 如果写了return ，那么它下面的代码就不会执行！！ 
      3 如果一个函数 没有写return 相当于 写了 return undefined
       */
      function getMax() {
        return undefined;
      }

      let num = getMax();
      console.log(num);
    </script>
  </body>
</html>

函数的嵌套使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function func1() {
            console.log('func1');

            func2();
        }

        function func2() {
            console.log('func2');
            func3();
        }

        function func3() {
            console.log('func3');
        }

        func1(); // 三个函数都输出
    </script>
</body>

</html>

作用域

1648714129547.png

1648717302696.png

作用域的简单演示

作用域的个人理解：分为全局作用域和局部作用域即可，全家就是在script标签里面的就是全局，作用于整个script内部

​ 这里指同名元素，一般我们很少人为创造这样的情况； 局部就是函数之类内部的，作用于内部，但是内部没有会就近原则，找自己的父元素，如果没有就会找全局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>18-作用域的简单演示.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // script标签内的运行环境就是全局作用域
      let num = 100; // 全局作用域

      function getMax() {
        // 这个区域内就不属于全局作用域
        // 局部作用域 或者 也叫做 函数作用域
        let num2 = 200;
      }

      for (let index = 0; index < 4; index++) {
        // 块级作用域
      }

      while (true) {
        // 块级作用域
      }
      if (true) {
        // 块级作用域
      }
    </script>
  </body>
</html>

作用域链

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>27-作用域链-测试.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // let num = 100;
      // function func1() {
      //   let num = 200;
      //   fun2();
      // }

      // function fun2() {
      //   let num = 300;
      //   console.log(num); // 300
      // }

      // func1();

      // 判断当前变量 输出是什么  
      // 就近原则   判断是要根据 函数的定义 来判断 而不是函数的调用 
      // 函数的定义 代码位置来判断  100  这个！！ 
   

      let num = 100;
      function func1() {
        let num = 200;
        // 函数的调用 
        fun2();
      }

   

      // 函数的定义-声明 
      function fun2() {
        console.log(num);
      }

      func1();
    </script>
  </body>
</html>

变量

全局变量

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>29-全局变量.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 定义一个变量 没使用  let 关键字 那么它就是一个全局变量 

      // 都建议 定义变量的时候  都要记得使用let ，不用去记这么规则  
      // userName = '索隆';

      // console.log(userName);

      function func1() {
        //  userName = '索隆'; // 全局变量 没有使用let 关键字 
        let userName = '索隆'; // 局部变量
      }
      func1();

      console.log(userName); // 

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

变量的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>23-变量的使用.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      //  在同一个作用域内 声明两个同样变量 就会出错。

      // 全局变量
      // let num = 100;

      // let num = 200;

      // function getMax() {
      //   let num = 100;
      // }

      // function getMin() {
      //   let num = 200;
      // }

      // for (let index = 0; index < 2; index++) {
      //   let num = 100;
      //   console.log("第一次循环,",num);
      // }

      // for (let index = 0; index < 2; index++) {
      //   let num = 100;
      //   console.log("第二次循环,",num);
      // }

      let arr1 = [1, 3, 4, 33, 22];

    
      function getMax(arr) {
        let max = arr[0];
        for (let index = 0; index < arr.length; index++) {
          if (arr[index] > max) {
            max = arr[index];
          }
        }
        return max;
      }
      function sdfdf(params) {
        
      }
    </script>
  </body>
</html>

匿名函数

了解即可，就是没有名字的函数，但是用法和函数一样，如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>30-匿名函数-了解.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 函数按照有没有名字 分成两种
      // 有名字 具名函数
      // 没有名字 匿名函数

      // 具名函数  函数名称  func1
      // function func1() {
      // }

      // 匿名函数  = function () {}; 匿名函数 了解即可 

      //    let func2 = function () {};  叫做 函数表达式 
      // 表达式 可以表示结果的一段代码  函数表达式  了解 
      let func2 = function () {
        console.log("123");
      };


      // 调用
      func2();
    </script>
  </body>
</html>

自执行函数

就是一次性函数，写法就是两个括号，然后再第一个括号把匿名函数丢进去，写法如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>31-自执行函数-了解.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /* 
      自执行函数 =  匿名函数一起出现  通用的功能是   防止变量污染 
      函数在定义的同时 直接就执行了 

      用在哪里呢  
      适合做一次性的任务- 不希望这个函数可以得到复用！！！ 
        函数包装多段代码  让程序比较简洁

      1 页面打开时候
        1 设置 页面的标题 =  月薪过万
        2 设置 页面的背景颜色 =  黄色 
      
       */

      // 匿名函数
      // function () {
      //   // 设置 页面的标题 =  月薪过万
      //   document.title = '月薪过万';
      //   // 设置 页面的背景颜色 =  黄色
      //   document.body.style.backgroundColor = 'yellow';
      // }

      // let msg = 123;
      // // 自执行函数
      // (function () {
      //   let msg = 123;
      //   // 设置 页面的标题 =  月薪过万
      //   document.title = '月薪过万';
      //   // 设置 页面的背景颜色 =  黄色
      //   document.body.style.backgroundColor = 'yellow';
      // })();

      // console.log(msg);
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝