关于前端学习:Javascript函数

40次阅读

共计 1894 个字符，预计需要花费 5 分钟才能阅读完成。

函数的概念

函数就是将一个能实现一个特定性能的一段代码进行封装，当须要应用时，间接调用即可
函数的特点
- 可实现代码复用
- 使代码构造变得简洁，不便前期的保护
- 应用机会明确，须要时就调用
函数的定义形式
- 申明式函数
```
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 时无奈触发事件