Javascript——函数数据类型（Function）

• 函数的概念

  函数就是将一个能完成一个特定功能的一段代码进行封装，当需要使用时，直接调用即可

• 函数的特点

  • 可实现代码复用
  • 使代码结构变得简洁，方便后期的维护
  • 使用时机明确，需要时就调用

• 函数的定义方式

  • 声明式函数

  function 函数名(形参){
    JS代码;
  }

  • 赋值式函数

  var 变量名 = function(形参){
    JS代码;
  }

  • 声明式函数可调用后，在进行函数定义；赋值式函数必须先定义，在调用

• 函数的调用

  函数名(实参);

• 函数的形参与实参之间数量关系

  • 当形参与实参一样多时，实参依次对形参赋值
  • 当形参比实参多时，实参依次对形参赋值，未赋值的形参未undefined
  • 当形参比实参少时，实参依次对形参赋值，没有形参接收的实参无法直接进行使用

• 函数中的 arguments

  • arguments 是函数自带的一个变量，是一个伪数组，里面存储着传过来的所有实参
  • arguments 的 length属性 表示伪数组长度，使用 arguments.length可获取传入实参的个数，也可进行设置伪数组的长度
  • arguments 使用索引进行记录数据，索引从 0 开始，通过arguments[索引]可获取对应索引位置的数据，也可对对应索引位置上的数据进行修改

• 函数的返回值

  • 函数使用 return关键字返回数据，外界可进行接收返回的数据
  • 函数执行时遇见return时，将跳出函数，函数内return后面的代码也将不再执行
    语法：return 表达式(返回值)

• 递归函数

  • 一个函数在函数内部进行调用自己本身来完成一个功能叫做递归函数

  • 递归函数的两个必要条件

    1. 结束递归的条件
    2. 一个递归调用的语句
  • 函数递归应用

  function quickSort(arr) {
    //递归结束条件
    if (arr.length < 1) {
        return arr;
    }
    var midIndex = parseInt(arr.length / 2);    //中间元素的下标
    var mid = arr.splice(midIndex, 1)[0];        //中间元素的值
    var left = [];                                //放小于mid的数
    var right = [];                                //放大于mid的数
    //遍历数组
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < mid) {
            // 
            left.push(arr[i]);
        }
        else {
            right.push(arr[i]);
        }
    }
    //将排好序的数组进行合并
    return quickSort(left).concat(mid, quickSort(right))
  }

• 事件处理函数

  • 当页面某个元素触发行为时，函数可作为一个事件处理函数

  // 元素绑定一个滚动事件
  window.onscroll = function () {
    var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + windowHight;
    var ulHeight = listBox.offsetHeight + ulOffsetTop;
    if (curPage === totlePage) return;         //最后一页加载完后不在加载
    if (scrollTop < ulHeight) return;
    if (!flag) return;
    flag = false;                             //为false时，不执行滚动事件
    loading.classList.add('active');
    console.log(flag)
    setTimeout(function () {
        curPage++;
        bindHtml();
    }, 500)
  }

• 自执行函数

  • 自执行函数就是当它被定义出来，就会自动执行的函数
  • 自执行函数一般用于外部 JS文件中，防止JS文件中的变量污染全局，当需要一个全局变量时，可将变量挂载在全局

  // 语法一：
  (function (形参){})(实参)
   //(function (形参){})属于函数定义部分，(实参)表示调用函数
  
  // 语法二：
   ~function (形参){}(实参)
  //~function (形参){}属于函数定义部分，(实参)表示调用函数
  
  // 语法三：
   !function (形参){}(实参)
  //!function (形参){}属于函数定义部分，(实参)表示调用函数

• 函数的节流与防抖

  • 防抖：在一个时间节点中，多次触发同一个事件，但是每次只需要在一个固定时间内执行一次事件，不需要重复操作的时候需要用到函数的防抖，使用计时器进行计时，触发后在一段时间内触发事件没有效果
  • 节流：在固定时间内会重复触发同一个事件，但是在固定时间内只需要执行第一次，后面的不需要进行执行，当固定的时间到达在执行下一次事件，定义一个flag变量记录状态，为true时可以进行触发事件，为false时无法触发事件