函数的使用 + 函数的表达式 +函数的返回值 + 函数中的细节 + 作用域 + 变量的特殊情况 + 立即执行函数 + 逻辑短路(逻辑中断)

函数:就是封装重复执行的代码块

  • function 是声明函数的关键字 必须小写
  • 函数命名一般为动词
  • 函数声明必须调用否则不生效(调用要加小括号())
  • 函数封装就是把 一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的接口  方便多处调用
  • 在函数声明时,可以字函数名称后面的小括号里面添加一些参数 这些参数被称为形式上的参数
  • 在函数调用时 同样需要传入相应的参数 被称为实参
  • 形参:函数定义时设置接收调用时传入的实际参数值,类似一个变量 
  • 实参:函数调用时 传入小括号内的真实数据 
  • 参数的作用:函数内部某些值不固定 我们可以通过参数在调用函数时传递不同的值
  • 函数参数的运用:
  1. 调用的时候实参值是传递给形参的
  2. 形参可以简单的理解为:不用声明的变量
  3. 实参和形参的多个参数
  4. <script>
          // 2. 求 1~100 累加和
          // 需求 让用户输入两个数 封装两个数的和
          // 1.函数声明(形参)
          function getBoth(a, b) {
            let sum = 0;
            for (i = a; i <= b; i++) {
              sum += i;
            }
            console.log(sum);
          }
          // 2.函数调用(实参)//实参可以有多个(函数调用小括号里面的参数我们称之为实参=》实际的参数)======》
    函数的的多次调用互不相干
    getBoth(1, 100); getBoth(50, 200); // ===========多个实参 形参 </script>

     

函数中的默认参数

<script>
      // 函数求和 给了形参(可以给默认参数为0(a=0,b=0))//可以让代码啊变得强壮 这样不会返回undefined
      function getBoth1(start = 0, end = 0) {
        // console.log(start, end);
        let sum = 0;
        for (i = start; i <= end; i++) {
          sum += i;
        }
        console.log(sum);
      }
      getBoth1(20, 50);
      getBoth1(1, 10);
      getBoth1(100, 200);
      getBoth1(); //不给实参 给了形参 返回值时(undefined,undefined)=====》
优化(可以给默认参数为0(a=0,b=0))//可以让代码啊变得强壮 这样不会返回undefined
</script>

函数的实参可以是一个变量

 

 <script>
      // 求 n ~ m 的累加和 ====实参也可以是个变量
      function getBothSum(start, end) {
        let sum = 0;
        for (i = start; i <= end; i++) {
          sum += i;
        }
        console.log(sum);
      }
      let n = +prompt("请输入第一个数据"); //输入的值/是一个变量
      let m = +prompt("请输入第二个数据"); //输入的值/是一个变量
      getBothSum(1, 50); //给定的实参
      getBothSum(10, 50); //给定的实参
      getBothSum(n, m); //实参也可以是一个变量

      
      getBothSum(n, m); //实参和形参一一对应打印正常
      getBothSum(n, m, b); //实参个数多于形参个数====可以正常显示 多出来的实参不显示 不推荐
      getBothSum(n); //实参个数少于形参个数 ===多出来的形参为undefined 返回结果为NaN

    小结:

  • 函数可以带参数也可以不带参数

  • 声明函数的时候,函数名括号里面的是形参,形参的默认值为 undefined

  • 调用函数的时候,函数名括号里面的是实参

  • 多个参数中间用逗号分隔

  • 形参的个数可以和实参个数不匹配,但是结果不可预计,我们尽量要匹配

    </script>

 

函数的返回值

  1. 在函数体中使用return 关键字能将内部的执行结果交给函数外部使用

  2. 函数内部只能出现1 次 return,并且 return 下一行代码不会再被执行

  3. return会立即结束当前函数,并返回指定的值

  4. 函数可以没有return,这种情况默认返回值为 undefined

      

   <script>
      /* 
1.当函数需要返回数据出去时,用return关键字 2. 函数的返回值格式 function 函数名() { return 需要返回的结果; } 函数名(); (1) 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名() 通过return 实现的 (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
(3)返回值多个的时候可以用数组包裹[返回值1, 返回值2]
*/ // 函数的返回值====把return后面的值给到调用者 // function getta(a, b) { // return a + b; // } // let res = getta(1, 2);//函数调用者 // console.log(getta(1, 2));//3 // console.log(res); // function getta() { // return 777; // } // console.log(getta()); //相当于执行了getta()=777 // ========================= // 需求 求三数之和 并且return 出来了 function getSSum(a, b, c) { return a + b + c; //6 } let sum = getSSum(1, 2, 3); //执行了getSSum(1, 2, 3)=6 console.log(sum); console.log(getSSum(1, 2, 3)); </script>

求函数最大值

   <script>
      // [1,5,7,8,99,100]返回最大值  数组的默认值给空 arr=[]
      function getMax(arr = []) {
        // arr=[1,5,7,8,99,100]
        let max = arr[0];
        let min = arr[0];
        for (i = 0; i <= arr.length - 1; i++) {
          // console.log(arr[i]);
          max = max > arr[i] ? max : arr[i];
          min = min < arr[i] ? min : arr[i];
        }
        // console.log(max);
        return [max, min];//多个返回值中括号包裹[]
      }
      let res = getMax([1, 5, 7, 8, 99, 100]);
      console.log(res);
      let res1 = getMax([1, 5, 7, 8, 99, 100, 777]);
      console.log(res1);
    </script>

 函数中的细节

 

 <script>
      // 1.在同一页面函数名相同会被覆盖

      // 2.return 后面的不会被执行 ===return后面只能写一个值 如果写多个只会返回最后一个===========》 想返回多个值可以使用数组[]包裹,号隔开
      function f2(a, b) {
        return a + b, b - a; //写多返回值只会返回最后一个
        // return [a + b, b - a];//会返回一个数组
      }
      let res = f2(1, 2);
      console.log(res);
      // 3.没有return或者return为空则没有返回值 打印调用者就是undefined
      function f1() {
        return;
      }
      console.log(f1()); //undefined
    </script>

 

 

 

作用域

 

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

 

1 .全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

处于全局作用域内的变量,称为全局变量

2 .局部作用域

作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。

处于局部作用域内的变量称为局部变量

3 .变量的特殊情况

  1. 在函数内部不声明 直接赋值(强烈不推荐)

  2. 形参可以看做是函数的局部变量

  3. 作用域链:内部函数访问变量,先在自身作用域找声明,如果没有,往外层找,直到找到全局,如果有,采取就近原则

  4. 推荐使用局部作用域 原因:函数作用域调用后就会被销毁(创建=》销毁的过程)可以提高性能节省内存空间

     

      // 1. 全局变量声明在<script>中===全局有效(不声明直接赋值 在全局没有声明 则是全局变量声明) ====var可以提升作用域
      let age = 10;
      // 2.局部作用域作用于函数内部的代码环境====》因为跟函数有关也称为函数作用域=====只在局部有效
      function fn() {
        let age1 = 18;
      }
      fn();
      if (true) {
        // 3.块级作用域===只在块级中有效 let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问
        let a = 10;
      }
    </script>

函数表达式/也称匿名函数

 

<script>
      function fn() {
        //只有命名函数/具名函数有声明提升
        console.log(11);
      }
      fn();
      // ================
      let fun = function () {
        console.log("函数表达式/匿名函数");
      };
      fun(); //调用一定写在式子下面 因为不具有函数声明的提升
    </script>

 

 

 

立即执行函数

 

<script>
      // 立即执行函数(防止变量污染)====避免命名冲突==>数据可视化时使用更方便===》
1.无需调用立即执行,本质上已经调用了
2.如果有多个立即执行函数必须加结束符英文;分号 !是隔断的效果和结束符的作用一样
// 第一种写法 (function () { let num = 3; let user = "张三"; console.log(999); })(); (function () { console.log(1999); })(); // 第二种写法 (function () { console.log("第二种"); })(); </script>

 

 

匿名函数

函数可以分为具名函数(命名函数)和匿名函数

匿名函数:没有名字的函数,无法直接使用。

 

 

短路运算(逻辑中断)

 

  • 逻辑与&&只要碰到了假值(false),就会短路,并返回该假值, 只要短路,不会继续执行后面的表达式。逻辑与一假则假

  •  逻辑或 | (只要碰到了真值(true),就会短路,并返回该真值, 只要短路,不会继续执行后面的表达式。(一般用作默认值))逻辑或一真则真

转换布尔类型

 

 <script>
      // 布尔类型返回值为true false
      // 除了0 '' null NaN undefined false 只有 这些为false
      // console.log(Boolean("123"));
      // console.log(Boolean("0"));
      // console.log(Boolean("false"));
      // console.log(Boolean(false));
      // console.log(Boolean(0));
      // console.log(Boolean(null));
      // console.log(Boolean(NaN));

      // 需求 :封装函数 求用户输入的一个数 判断是否是一个质数 如果是返回一个质数
      function getNum(a) {
        if (a === 1) {
          return "不是质数";
        }
        let flag = "质数";
        for (let i = 2; i < a; i++) {
          if (a % i === 0) {
            flag = "不是质数";
          }
        }
        return flag;
      }
      let num = parseInt(+prompt("请输入一个数字"));
      let res = getNum(num);
      console.log(res);
    </script>

 

 

 

 

 

 

 

  •  

 

posted @ 2022-11-29 20:23  噢噢噢J  阅读(43)  评论(0编辑  收藏  举报