【15.0】JavaScript之函数

【15.0】JavaScript之函数

【一】js中函数的概念

• 也是对代码体进行封装，将我们需要执行的功能封装到函数内，但是python中函数的格式更固定

【二】js函数基本构成

【1】语法结构

• //普通的函数
  function 函数名（参数）{代码体}
  //js代码中（）基本上放初始的条件{}放的是运行的代码
  

• //匿名函数
  //函数表达式---将函数作为一个结果 res=function 函数名....
  

【2】函数类型

• 无参

  // 无参函数
  function func1(){
      console.log("我是无参函数")
  }
  
  func1()
  

• 有参（形参和实参）

  • 形参–已经给值的参数
  • 实参–调用的时候需要传值（关键字和位置传参都可以）

  // 有参函数 //调用需要传参//和py不同，参数传多了，也不会报错
  function func2(a,b){
      console.log(a,b)
  };
  
  func2(1,2)
  

【3】函数的返回值

• 【返回值】和py一样，return也是作为函数代码体运行结束的标志，return带着函数的返回值

• 【默认返回值】如果没有return这种显式的返回值，默认返回值是undefined

• 【返回值应用】

  • 直接输出

  • 作为另一个函数的参数

    • 例如，我们对一个函数的返回值作为参数，作为Array.prototype.sort()方法的参数，利用其返回值来决定数组元素的排列顺序

      //套娃函数，先进行运算，将结果作为参数，进行运算结果的排序
      //这个嵌套，先执行内层的函数，在执行外层的函数
      function compareNumbers(a, b) {
          return a - b; // 返回a与b的差值，sort()会根据这个差值决定元素的顺序
      }
      
      const numbers = [5, 2, 9, 1, 5, 6];
      numbers.sort(compareNumbers); // 排序后的数组：[1, 2, 5, 5, 6, 9]
      

【4】函数调用

• //直接函数名+（）
  //无参直接加括号，有参加括号传参
  函数名（参数1，参数2）
  

【三】js函数中参数相关

【1】arguments对象

• 【概念】

  • js中arguments对象是一个特殊的对象，也是当前函数的一个内置属性
  • arguements会接收这个函数的所有实参（也就是我们传入的参数的个数），再通过length属性可以获得目前实参长度(个数)
  • arguments看起来像一个数组，但并不是一个数组，所以不具有数组的属性

• 【示例】

  • 定义一个含有三个实参的函数

    function fun(a,b,c,d=4){
    	console.log(arguments)
    	console.log(a,b,c)
    }
    

  • 给函数传参

    //正常传三个
    fun(1,2,3)
    [Arguments] { '0': 1, '1': 2, '2': 3 }
    1 2 3 4
    //少传c
    fun(1,2)
    [Arguments] { '0': 1, '1': 2 }
    1 2 undefined 4
    //多传 多传的第一个被当做d其余的吸收
    fun(1,2,3,5,6)
    [Arguments] { '0': 1, '1': 2, '2': 3, '3': 5, '4': 6 }
    1 2 3 5
    

• 【拓展】

  • 增加可玩性，创建一个生成参数的函数，用arguments接收参数，其长度就是变量的长度，可以切片加for遍历取所有的参数

  • function sum(...args){
    	let total=0;
    	//遍历得到所有的实参
    	for(let i=0;i<arguments.length;i++){
    		total += argumrnts[i];
    	}
    	return total;
    }
    console.log(sum(2,2,4,4,5));
    //17
    

【2】参数和函数的作用域

• 【概念】函数的参数也是局部变量，只能在函数内部使用
• 【作用域】函数内部的变量也是局部变量，可以任务函数体本身也是一个独立的作用域

【3】作用域链和遮蔽效应

• 遮蔽效应
  • 在整个程序中遇到一个变量时，使用时作用域的查找顺序是先从自己所在的层次找，再去向上找
  • 类似一个变量名备用了好多次，是从自己所在的层次网上找的
• 补充：
  • 例如： a=2 不写var声明会被转化成全局变量，可以理解为这个是个js的bug
  • 建议定义变量时必须使用声明关键字

【四】其他函数类型

【1】匿名函数

• 【概念】

  • 正常的函数是由函数的名字的，但是匿名函数没有名字，直接对参数进行操作
  • 匿名函数，也称为无名函数或者lambda表达式，是一种没有名称的js函数定义形式

• 【语法格式】

  • 基本形式

    function(){/*执行的函数体*/}
    

  • 自动执行的匿名函数

    //即在后面我们直接加括号调用
    (function(){
    	console.log("This is an anonymous function.");
    })();
    

  • 将匿名函数赋值给变量

    //就是将运行的结果都传递给变量a
    var a=function(){
    	console.log("Variable 'a' holds an anonymous function.")
    }();
    

• 【特点与用途】

  • 无名/临时作用域：由于匿名函数没有名字，它们的变量和参数只能在其所在的作用域内有效，不会污染全局命名空间，适用于一些短暂或局部需求的场合
  • 闭包：当匿名函数作为另一个函数的参数传递或返回时，它可以访问到外部函数的局部变量和参数，形成闭包，这对于实现数据封装、模块化编程以及实现私有变量等功能非常有用
  • 【用处2】通过使用立即调用表达式，匿名函数可以在定义的同时就被执行，比如初始化数据，防止变量污染全局命名空间等场景
  • 【用处1】长用于一次性使用的简单计算，事件处理，高阶函数等场景，因为他们不需要被赋给特定的变量或者作为对象的方法来使用

【2】箭头函数

• 【概念】

  • 箭头函数是新引入的一种定义函数的方法，更具有易读性和简便性

• 【语法结构】

  • 单个参数

    • 箭头函数用于表示接收一个参数并直接返回该参数值的情况

    //使用 =>
    //也就是直接从变量x 指向结果fx(直接指向结果) 没有语法框架了比较简洁
    var func=(v) => v;
    
    //传统写法
    var func = function(v) {
    	return v;
    };
    

  • 多个参数

    • 箭头写法

    var func=(args1,args2) =>agrs1+args2;
    

    • 传统写法

    var func=function(args1,args2){
    	return args1+args2;
    };
    

  • 无参数

    • 没有参数，返回值是空

    // 没有参数，返回 undefined
    var func3 = () => {};
    

    • 没有参数，返回值有

    // 没有参数，返回一个简单的值
    var func4 = () => "Hello World";
    

• 【特殊情况】

  • 函数体只有一条语句

  • 如果函数体只包含一条语句且不涉及复杂逻辑，可以将这条语句后的分号;去掉，并使用=代替return关键字，使表达式更加紧凑。

  • // 返回数字10
    var func5 = value => value * 10;
    
    // 相当于
    var func5 = value => value * 10; // 注意这里去掉了分号
    

• 【this绑定】

  • 在箭头函数中，this的值是在创建函数的时候确定的，而不是在调用时动态绑定，通常指向定义函数的对象（即上厦门环境）
  • 这意味，箭头函数不像普通函数那样拥有this值，在处理时间回调/类方法等情况时需要注意