第一章 入门 【23.函数】

23.  函数

• 函数是实现特定功能的代码块，可以重复调用。
• 通过函数可以封装逻辑、提高代码复用性和可维护性。
• 函数有名称（匿名函数除外）、参数列表和函数体。
• JS中函数也是对象，可以赋值、作为参数、返回值。

23.1  创建函数 

• 函数声明：使用function关键字直接声明，可提前调用（提升）。

  例：function fn() {}
  注意：同名函数声明后者会覆盖前者。

• 函数表达式：将函数赋值给变量，不能提前调用。

  例：let fn = function() {}
  注意：表达式只在赋值后可用，常用于回调。

• 箭头函数：ES6语法，简洁，适合回调和数组方法，this指向外层。

  例：let fn = () => {}
  注意：没有arguments、this。

• 自调用函数（IIFE）：定义后立即执行，常用于创建独立作用域，防止变量污染。

  例：(function(){})() 或 (() => {})()
  注意：IIFE内部变量不会污染外部作用域。

//创建方式1  声明式
    function fn1() {
      console.log('这是函数fn1');

    }

    //表达式创建
    let fn2 = function () {
      console.log('这是函数fn2');

    }

    // 完全不推荐的方式:new关键字创建
    let fn3 = new Function("console.log('这是函数fn3')")

    fn1()
    fn2()
    fn3()
    fn1()
    fn1()
    fn1()

23.2  函数的参数

• 形参：函数定义时的小括号内变量，用于接收外部传入的数据。
• 实参：函数调用时传入的具体值，对应形参。
• arguments对象：普通函数内部可用，包含所有实参，类数组，可用于处理不定数量参数。

  注意：箭头函数没有arguments对象。

• 剩余参数...args：ES6语法，将多余参数收集为数组，常用于箭头函数和不定参数场景。
• 参数默认值：ES6支持为形参设置默认值，未传值时使用默认。
• 形参与实参个数不一致时，多余实参不会报错，少传为undefined。

    //函数 ====封装相似的操作
    function sayHi(name) {
      document.write(`<h1>欢迎${name},登录浏览网站</h1>`)

    }

    //通过参数可以将任意值传入内部
    sayHi("张三")
    sayHi("李四")
    sayHi("王二麻子")

function 关键字首先出现，然后是 函数名，然后是括号之间的 参数 列表（参数超过一个用逗号分隔），最后是花括号之间的代码（即“函数体”）。

1.  案例

    //创建求和函数
    function add(x, y) {  //创建函数的参数叫做形参
      console.log(x + y);
      document.write(x + y + '<br>')

    }

    //使用
    add(2, 3)//传参  函数的实参
    add(2554, 3663)
    add(245, 3)


    function round(x) {
      console.log(`圆周长为：${3.14 * (x * 2)}`);
      console.log(`圆面积为：${3.14 * (x ** 2)}`);

    }
    round(5)

2.  参数的详细解释如下

    function fn1(a = 100) {//形参 默认值
            console.log(a);
        }

        function fn2(a, b) {
            // console.log(a, b);
            a()//调用
        }

        function fn3(a, b, c) {
            console.log(a, b, c);
        }

        // 实参和形参一一对应
        fn3(1, 2, "abc", 3, 3)

        // 参数可用复杂数据对象和数组
        fn1([9, 8, 7, 6])
        fn1({
            name: '旺财',
            age: 3
        })
        // 参数是函数
        fn2(function () {
            console.log('参数');
        }, 0)

        // 未传参
        fn1()

3.  参数的默认值和剩余情况

//默认值 有形参可能未传值
    function fn1(a = 100, b = 600) {
      console.log(a + b);

    }

    // 剩余参数  传参过多，没有形参接收的情况
    function fn2(a, b, c, ...params) {
      console.log(a);
      console.log(b);
      console.log(c);
      console.log(params);//表现为数组形式

    }

    fn1()
    fn2(12, 25, 32, 22, 2, 1, 2, 3, 6, 9, 8, 7, 5, 444, 555, 666, 12, 324, 58)

23.3  函数的返回值

• return语句：用于返回结果，函数执行到return即结束。
• 没有return时，函数默认返回undefined。
• 可以返回任意类型的数据（如数值、对象、函数等）。
• return后语句不会被执行。
• 可用作提前结束函数执行。

let str = "你好，张三";

    //求和函数
    function add(a, b) {
      // console.log(a + b);
      let c = a + b
      //返回值
      return c
    }

    let jieguo = add(45, 23)
    console.log(jieguo);
    document.write(jieguo)

指令 return 可以在函数的任意位置。当执行到达时，函数停止，并将值返回给调用代码（分配给上述代码中的 jieguo）。

只使用 return 但没有返回值也是可行的。但这会导致函数立即退出。

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "Showing you the movie" ); // (*)
  // ...
}

在上述代码中，如果 checkAge(age) 返回 false，那么 showMovie 将不会运行到 alert。