js函数的基础

js函数

1.为什么需要函数

1.为什么需要函数

可以实现代码复用,提高开发效率

2.函数是什么?

function执行特定任务的代码块

2.函数的使用

1.掌握函数语法,把代码封装起来
1.函数的声明法
<script>
           // 函数名
        function sayHi () {
            // 函数体
            document.write('你好呀~~')
        }
    </script>
2.函数的名命名规范

1.和变量命名基本一致 2.尽量小驼峰式命名法 3.前缀应该为动词 4.命名建议:常用动词约定

   <script>
        function getNsum() { }
        function getMax() { }
        function getmin() { }
    </script>
3.调用函数的用法
<script>
        function getSum() { 
            console.log('你好呀');
        }
        // 函数名 调用
        getSum()
    </script>
4.函数体
<script>
        function getSum() { 
            console.log('你好呀');
        }          
        getSum()
    </script>
5.总结
1。函数是用那个关键字声明的?

function

2.函数不调用会执行吗?如何调用函数?

函数不调用自己不执行 调用方式: 函数名()

3.函数的复用代码和循环重复代码有什么不同?

循环代码写完即执行,不能很方便控制执行位置 随时调用,随时执行,可重复调用

3.函数的传参

1.有差函数的声明和调用
1调用函数时,需要传入几个数据就写几个,用逗号隔开
<script>
                // 函数名  
        function getSum(num1,num2) { 
            
        }          
        // 8和28的值会给num1和num2调用
        getSum(8,28) 
    </script>
2.形参和实参
1.开发中尽量保持形参和实参个数一致
  <script>
                      //  形参
        function getSum(num1, num2) {
            document.write(num1 + num2)
        }
        //   实参
        getSum(10, 20)
        // getSum(100,200)
    </script>
3.总结
1.函数传递参数的好处是?

可以极大的提高了函数的灵活性

2.函数参数可以分为那两类?怎么判断他们是那种参数?

1.函数可以分为形参和实参 2.函数声明时,小括号里面的是形参,形式上的参数 3.函数调用时,小括号里面的是实参,实际的参数 4.尽量保持形参和实参的个数一致

3.参数中间用什么符号隔开?

逗号

4.函数的返回值

1.返回值的使用
 <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>
2.返回值的使用场景
 <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>
3.返回值的案例
 <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>
4.返回值的补充

1 不能同时执行多次return 第一个return生效 2 函数内部 如果写了return ,那么它下面的代码就不会执行!!

​ 3 如果一个函数 没有写return 相当于 写了 return undefined

5.函数的作用域

 <script>
      // 直接写在全局作用域下的变量 =  全局变量  在任意的地方来访问

      let num = 100; // 全局变量   在任何地方都可以访问 

      function getMax() {
        console.log('函数 访问全局变量', num);
      }

      getMax();

      for (let index = 0; index < 2; index++) {
        console.log('for循环内 块级作用域 访问全局变量', num);
      }

      if(true){
        console.log("if语句 也 可以访问全局变量",num);
      }
   </style>
  </head>
  <body>
    <script>
      // 局部变量
      // 如果是在函数内部定义的变量 就叫做局部变量
      // 局部变量 不能在 它的大括号之外使用的,否则就会报错!! 
      
      let msg = 10000; // 全局变量

      // 局部变量  函数内部 声明的变量
      function getMax() {
        // 声明一个数字
        let num = 200; // 局部变量
      }


      // 局部变量 不能在 超出它的大括号来使用
      console.log(num); // 会报错 
    </script>

6.匿名函数

<script>
      // 函数按照有没有名字 分成两种
      // 有名字 具名函数
      // 没有名字 匿名函数

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

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

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


      // 调用
      func2();
    </script>
2自执行函数
 <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>