JavaScript中的函数-CSDN博客

本文链接：https://blog.csdn.net/weixin_48735790/article/details/133671494

1.函数使用

声明语法：

function 函数名 ( ) { 函数体 }

命名规范：
和变量名基本一致
使用小驼峰命名法
前缀尽量为动词
命名建议：常用动词约定

调用语法

函数名（）

案例：计算1~100的累计和

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      function getSum() {
        let sum = 0;
        for (let i = 1; i <= 100; i++) {
          sum += i;
        }
        document.write(sum);
      }
      getSum();
    </script>
  </body>
</html>

2.函数传参

若函数完成功能需要调用者传入数据，那么就需要用有参数的函数
这样可以提高函数的灵活性
声明语法：

function 函数名（参数列表）{ 函数体 }

参数列表：

传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开

调用语法

函数名（传递的参数列表）

调用函数时，需要传入几个数据就写几个，用逗号隔开

3. 函数的传参

形参：声明函式时写在函数名右边小括号里的叫形参，也称为函数内声明的变量
实参：调用函数时写在函数名右边小括号里的叫实参，实际的参数

参数默认值：
形参：可以看做变量，

undefined：如果不给变量数据，则默认为undefined
NaN：如果用户不输入是实参，则会出现NaN的结果

我们可以进行改进，用户不输入实参，可以给i形参默认，默认为0，如下操作：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      function getSum(x = 0, y = 0) {
        document.write(x + y);
      }
      getSum();//结果为0
      getSum(1 , 2);//结果为3
    </script>
  </body>
</html>

这个默认值只会在缺少实参参数传递时，才会被执行，所以有参数会优先执行传递过来的实参，否则默认为undefined

4. 函数返回值

当调用某个函数，这个函数会返回一个结果出来，这就是有返回值的函数
函数在很多情况下是需要返回值的，使用return关键词

语法：

return 返回值

注意：

在函数体中使用return关键词能将内部的执行结果交给函数外部使用。
return后面的代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写。
return函数可以没有return，这种情况函数默认值为undefined。

返回 多数据 时，则返回一个数组

代码案例：计算用户输入的最大和最小值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      let arry = [];
      for (let i = 0; i < 5; i++) {
        let arr = prompt("输入数字");
        arry.push(arr);
      }
      let mmax = arry[0];
      let min = arry[0];
      function getMax1(arry) {
        for (let i = 1; i < arry.length; i++) {
          if (mmax < arry[i]) {
            mmax = arry[i];
          }
          if (min > arry[i]) {
            min = arry[i];
          }
        }
        //想要返回最大最小值，则需要返回一个数组
        return [mmax, min];
      }
      let max1 = getMax1(arry);
	//输出时，使用数组的下标进行输出
      document.write(`最大值${max1[0]}`);
      document.write(`最小值${max1[1]}`);
    </script>
  </body>
</html>

补充：

两个相同的函数后面的会覆盖前面的函数
再javaScript中，实参的个数和形参的个数可以不一致，
如果形参过多，会自动填桑undefined如果实参过多，
那么多余的实参会被忽略（函数内部有一个arguments，里面装着所有的实参）
函数一旦碰到return就不会往下执行，结束使用return

5. 作用域

介绍

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

作用

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

作用域：

1. 全局作用域

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

2. 局部作用域

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

作用域中的变量

根据作用域的不同，变量还分为：全局变量，以及局部变量

全局变量：指函数外部let的变量，全局变量再 任何区域 都可以访问和修改
局部变量：指函数内部let的变量，局部变量只能在 当前函数内部 访问和修改

变量的访问原则

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，南无在这个作用域中就又可以诞生一个作用域
访问原则：在能够访问到的情况下，先局部，既不没有再找全局，使用的就近原则的方式。

6. 匿名函数

没有名字的函数，无法直接使用

使用方式

函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们称之为函数表达式

表达语法：

let fn = function ( ) {
//函数体
}
//调用
fn（）

代码演示

      let fu = function () {
        console.log("hello");
      };
      fu();
      let fun = function (x, y) {
        console.log(x + y);
      };
      fun(1, 2);

立即执行函数

作用：防止变量污染

语法

（ function （）{ console.log ( 11 ) } ) ()
（ function （）{ console.log ( 11 ) } () )

代码演示

     //第一种写法
      (function () {
        console.log("ji");
      })();

      (function (x, y) {
        console.log(x + y);
      })(1, 3);

      //第二种写法
      (function () {
        console.log("Grr");
      }());

      (function (x, y) {
        console.log(x + y);
      }(1, 3));