前端架构师进阶之路07_JavaScript函数

Myth丶恋晨 2023-10-16 14:41 3阅读 0赞

### 1 函数的定义与调用 ###

#### 1.1 初识函数 ####

函数是用于封装一段完成特定功能的代码。

相当于将一条或多条语句组成的代码块包裹起来，在使用时只需关心参数和返回值，就能完成特定的功能，而不用了解具体的实现。

// 内置函数
    console.log(parseFloat('7.26e-2'));  // 返回解析后的浮点数：0.0726
    console.log(isNaN(' '));             // 判断是否是NaN：false
    console.log(parseInt('15.99'));      // 返回解析后的整数值：15

*  parseFloat() 用于返回解析字符串后的浮点数。
 *  isNaN() 判断给定参数是否为NaN，判断结果为是，返回true，否则返回false。
 *  parseInt() 用于返回解析字符串后的整数值。

除了使用内置函数外，JavaScript 中还可以根据具体情况自定义函数，提高代码的复用性、降低程序维护的难度。

函数的定义由以下4部分组成：

*  关键字 function。
 *  函数名。
 *  参数。
 *  函数体。

function 函数名([参数1, 参数2, ……])
    {
        
        函数体
        ……
        reutrn
    }

*  function：定义函数的关键字。
 *  函数名：可由大小写字母、数字、下划线（\_）和 $ 符号组成，但是函数名不能以数字开头，且不能是JavaScript 中的关键字。
 *  参数：是外界传递给函数的值，它是可选的，多个参数之间使用“,”分割。
 *  函数体：是专门用于实现特定功能的主体，由一条或多条语句组成。
 *  返回值：在调用函数后若想得到处理结果，在函数体中可用 return 关键字返回。

> 注意：函数的名称最好不要使用 JavaScript 中的保留字，避免在将来被用作关键字导致出错。

#### 1.2 参数设置 ####

函数可以根据参数的设置分为以下两种：

*  无参函数
 *  有参函数

##### 无参函数 #####

无参函数：适用于不需要提供任何数据，即可完成指定功能的情况。

function greet() {
        
        console.log('Hello everybody!');
    }

> 注意：在自定义函数时，即使函数的功能实现不需要设置参数，小括号“()”也不能够省略。

##### 有参函数 #####

有参函数适用于开发时函数体内的操作需要用户传递数据的情况。

*  形参：指的就是形式参数，具有特定的含义，在定义有参函数时设置的参数。简单理解为：不用声明的变量。
    
     *  用于接收实参的
 *  实参：指的是实际参数，也就是具体的值，在函数调用时传递的参数。函数调用的时候实参值是传递给形参的。
 *  实参和形参的多个参数之间用逗号(,)分隔。

function maxNum(a, b) {
        
        a =  parseInt(a);
        b =  parseInt(b);
        return a >= b ? a : b;
    }

获取函数调用时传递的所有实参：适用于开发时函数体形参不确定的情况。

*  实现方式：利用 arguments 对象，在函数体内可获取函数调用时传递的实参。
 *  其他操作：length 属性可获取实参的总数，具体实参值可利用数组遍历方式。

function transferParam() {
        
        console.log(arguments.length);
        console.log(arguments);
    }

##### 形参和实参个数不匹配 #####

<table> 
 <thead> 
  <tr> 
   <th>参数个数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>实参个数等于形参个数</td> 
   <td>输出正确结果</td> 
  </tr> 
  <tr> 
   <td>实参个数多于形参个数</td> 
   <td>只取到形参的个数</td> 
  </tr> 
  <tr> 
   <td>实参个数小于形参个数</td> 
   <td>多的形参定义为 undefined，结果为 NaN</td> 
  </tr> 
 </tbody> 
</table>

function sum(num1, num2) {
        
        console.log(num1 + num2);
    }
    sum(100, 200);             // 300，形参和实参个数相等，输出正确结果
    sum(100, 400, 500, 700);   // 500，实参个数多于形参，只取到形参的个数
    sum(200);                  // 实参个数少于形参，多的形参定义为undefined，结果为NaN

> 注意：在 JavaScript 中，形参的默认值是undefined

##### 含有默认值的参数与剩余参数 #####

函数参数的设置，在 ES6 中提供了更灵活的使用方式，如设置形参的默认值等。

function greet(name, say = 'Hi, I\'m ') {
        
        console.log(say + name);
    }

函数的形参在设置时，还可以为其指定默认值。当调用者未传递该参数时，函数将使用默认值进行操作。

##### 扩展运算符 #####

函数定义时，还可用“…变量名”的方式动态接收用户传递的不确定数量的实参。

// 一个确定形参
    function transferParam(num1, ...theNums) {
        
        theNums.unshift(num1);
        console.log(theNums);
    }
    
    // 无确定的形参
    function transferParam(...theNums) {
        
        console.log(theNums);
    }
    
    transferParam(99, 33, 56, 88, 90, 662);

#### 1.3 函数的调用 ####

*  当函数定义完成后，要想在程序中发挥函数的作用，必须得调用这个函数。
 *  函数的调用非常简单，只需引用函数名，并传入相应的参数即可。
 *  函数声明与调用的编写顺序不分前后。

函数名称([参数1, 参数2, ……])

\[参数1，参数2…\]是可选的，用于表示形参列表，其值可以是零个、一个或多个。

#### 1.4 练习作业 ####

*  字符串大小写转换
    
     *  编写HTML表单，设置两个文本框和两个按钮，文本框显示转换前后数据，按钮用于转换。
     *  为按钮添加点击事件，并利用函数处理。
     *  编写函数，根据传递的不同参数执行不同的转换操作。
     *  将转换后的数据显示到对应位置。
 *  封装函数，求2个数中的最大值
    
     *  求出求两个数中的最大值；求出三个数中的最大值。

### 2 变量的作用域 ###

声明变量后就可以在任意位置使用该变量嘛？不是的。

函数内 var 关键字声明的变量，不能在函数外访问。

function info() {
        
        var age = 18;
    }
    // 输出结果：Uncaught ReferenceError: age is not defined
    console.log(age);

变量的使用是有作用域范围的。

作用域划分：全局作用域、函数作用域和块级作用域（ES6提供的）。

不同作用域对应的变量：全局变量、局部变量、块级变量（ES6提供的）。

// demo.js 全局作用域
    // -- 函数 函数作用域
    // -- 语句(含有{}) 块级作用域
    
    // 全局作用域
    var global = 'global';
    function add(){
        
        // 函数作用域
        var fuc = 'fuc';
        // 块级作用域
        for(let a=1;a<5;a++){
        
            console.log(a);
        }
    }

*  全局变量：不在任何函数内声明的变量（显示定义）或在函数内省略 var 声明变量（隐式定义）都称为全局变量。
    
     *  作用范围：它在同一个页面文件中的所有脚本内都可以使用。

// 全局变量
    var global = 'global';
    function add(){
        
        // 全局变量
        fuc = 'fuc';
    }

*  局部变量：在函数体内利用 var 关键字定义的变量称为局部变量，它仅在该函数体内有效。

var global = 'global';
    function add(){
        
        // 局部变量
        var fuc = 'fuc';
    }

*  块级变量：ES6 提供的 let 关键字声明的变量称为块级变量，仅在“\{\}”中间有效，如 if、for 或 while 语句等。

function add(){
        
        // 块级变量
        let fuc = 'fuc';
        // 块级变量
        for(let a=1;a<5;a++){
        
            console.log(a);
            console.log(fuc);
        }
        console.log(fuc);
        console.log(a);
    }

> 注意：
> 
>  *  当使用 var 来声明或者声明并赋值变量时，无论声明位置在何处，声明本身这个语句会在当前 script 标签中的最顶端被执行
>  *  无论函数在何处被声明，函数声明本身会在任何代码前被执行

#### 垃圾回收机制 ####

*  在 JavaScript 中，局部变量只有在函数的执行过程中存在，而在这个过程中会为局部变量在（栈或堆）内存上分配相应的空间，以存储它们的值，然后在函数中使用这些变量，直到函数结束。
 *  一旦函数执行结束，局部变量就没有存在必要了，此时 JavaScript 就会通过垃圾回收机制自动释放它们所占用的内存空间。
 *  当创建对象之后对所有这个对象的变量赋值为null时，这个对象就永远无法被操作，这个对象就称为垃圾
 *  js 拥有自动的垃圾回收机制，不需要也不能手动地回收垃圾，能做的只有将不再使用的对象赋值为 null

在开发中若要保留局部变量的值，可以通过以下两种方式实现：

// 第1种方式：利用return返回
    function test(num) {
        
        num = num + 1;
        return num;
    }
    var num = test(24);
    console.log(num); // 输出结果：25
    
    // 第2种方式：利用全局变量保存
    var memory;
    function test(num) {
        
        memory = num + 1;
    }
    test(24);
    console.log(memory); // 输出结果：25

### 3 匿名函数 ###

#### 3.1 函数表达式 ####

所谓函数表达式指的是将声明的函数赋值给一个变量，通过变量完成函数的调用和参数的传递，它也是 JavaScript 中另一种实现自定义函数的方式。

// 函数表达式
    var fn = function sum(num1, num2) {
        
        return num1 + num2;
    };
    fn();
    
    // 函数声明方式
    sum();
    function sum(num1, num2) {
        
        return num1 + num2;
    };

*  函数的定义方式不同
 *  函数的调用方式不同
 *  函数定义与调用顺序不同

#### 3.2 匿名函数 ####

匿名函数指的是没有函数名称的函数。

可以有效的避免全局变量的污染以及函数名的冲突问题。

既是函数表达式的另一种表示形式，又可通过函数声明的方式实现调用。

// 函数表达式中省略函数名
    var fn = function (num1, num2) {
        
      return  num1 + num2;
    };
    fn(1, 2);
    
    // 自调用方式
    (function (num1, num2) {
        
      return  num1 + num2;
    })(2, 3);
    
    // 处理事件
    document.body.onclick  = function () {
        
      alert('Hi, everybody!');
    };

##### 箭头函数 #####

ES6 中引入了一种新的语法编写匿名函数，我们称之为箭头函数。

一个箭头函数表达式的语法比一个函数表达式更短。

// 语法
    (p1, p2, …, pN) => {
         statements }
    /*
    参数：
    多个参数：(p1, p2, …, pN)
    一个参数：(p1)  或 p1
    没有参数：() 或 _
    
    函数体：
    函数体：{ statements }
    返回值：{ return expression; }
    函数体只有一条语句：expression
    */
    
    // 设置1个参数
    var fn1 = x => x + 2;
    console.log(fn1(4)); // 输出结果：6
    
    // 设置2个参数
    var fn2 = (x, y) => x + y;
    console.log(fn2(1, 2) ); // 输出结果：3

箭头函数中箭头“=>”不是操作符或者运算符，但是箭头函数相比普通的函数受操作符的优先级影响。

#### 3.3 回调函数 ####

所谓回调函数指的就是一个函数 A 作为参数传递给一个函数 B，然后在 B 的函数体内调用函数 A。此时，我们称函数 A 为回调函数。

匿名函数常用作函数的参数传递，实现回调函数。

函数体中某部分功能由调用者决定，此时可以使用回调函数。

在 JavaScript 中还为数组提供了很多利用回调函数实现具体功能的方法。

<table> 
 <thead> 
  <tr> 
   <th><strong>方法名称</strong></th> 
   <th><strong>功能描述</strong></th> 
   <th>格式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>find()</td> 
   <td>返回数组中满足回调函数的第一个元素的值，否则返回 undefined</td> 
   <td>array.find(function(currentValue, index, arr),thisValue);</td> 
  </tr> 
  <tr> 
   <td>every()</td> 
   <td>测试数组的所有元素是否都通过了回调函数的测试</td> 
   <td>array.every(function(currentValue,index,arr), thisValue);</td> 
  </tr> 
  <tr> 
   <td>some()</td> 
   <td>测试数组中的某些元素是否通过由回调函数实现的测试</td> 
   <td>array.some(function(currentValue,index,arr),thisValue);</td> 
  </tr> 
  <tr> 
   <td>forEach()</td> 
   <td>对数组的每个元素执行一次提供的函数</td> 
   <td>array.forEach(function(currentValue, index, arr), thisValue);</td> 
  </tr> 
  <tr> 
   <td>map()</td> 
   <td>创建一个新数组，其结果是该数组中的每个元素都调用一次提供的回调函数后返回的结果</td> 
   <td>array.map(function(currentValue,index,arr), thisValue);</td> 
  </tr> 
  <tr> 
   <td>reduce()</td> 
   <td>对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值</td> 
   <td>array.reduce(function(total, currentValue, currentIndex, arr), initialValue);</td> 
  </tr> 
  <tr> 
   <td>reduceRight()</td> 
   <td>接收一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值</td> 
   <td>array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue);</td> 
  </tr> 
 </tbody> 
</table>

/* array.find(function(currentValue, index, arr),thisValue);
    currentValue 必需。当前元素
    index 可选。当前元素的索引值
    arr 可选。当前元素所属的数组对象
    注意: find() 对于空数组，函数是不会执行的。
    注意: find() 并没有改变数组的原始值。
    */
    // 获取数组中年龄大于 18 的第一个元素
    var ages = [3, 10, 18, 20];
    function checkAdult(age) {
        
        return age >= 18;
    }
    console.log(ages.find(checkAdult));
    
    /* array.every(function(currentValue, index, arr),thisValue);
    currentValue 必需。当前元素
    index 可选。当前元素的索引值
    arr 可选。当前元素所属的数组对象
    注意: every() 对于空数组，函数是不会执行的。
    注意: every() 并没有改变数组的原始值。
    */
    // 检测数组中所有元素是否都大于等于 18
    var ages = [32, 33, 16, 40];
    function checkAdult(age) {
        
        return age >= 18;
    }
    console.log(ages.every(checkAdult));
    
    /* array.some(function(currentValue, index, arr),thisValue);
    currentValue 必需。当前元素
    index 可选。当前元素的索引值
    arr 可选。当前元素所属的数组对象
    注意: some() 对于空数组，函数是不会执行的。
    注意: some() 并没有改变数组的原始值。
    */
    // 检测数组中是否有元素大于 18
    var ages = [3, 10, 18, 20];
    function checkAdult(age) {
        
        return age >= 18;
    }
    console.log(ages.some(checkAdult));
    
    /* array.forEach(function(currentValue, index, arr), thisValue);
    currentValue 必需。当前元素
    index 可选。当前元素的索引值
    arr 可选。当前元素所属的数组对象
    注意: forEach() 对于空数组，函数是不会执行的。
    注意: forEach() 并没有改变数组的原始值。
    */
    // 获取数组中所有值的总和
    var sum = 0;
    var numbers = [65, 44, 12, 4];
    numbers.forEach(function (item) {
        
        sum += item;
    });
    console.log(sum);
    
    /* array.map(function(currentValue,index,arr), thisValue);
    currentValue 必需。当前元素
    index 可选。当前元素的索引值
    arr 可选。当前元素所属的数组对象
    注意: map() 对于空数组，函数是不会执行的。
    注意: map() 并没有改变数组的原始值。
    */
    var arr = ['a', 'b', 'c'];
    arr.map(function(value, index) {
        
        console.log(value, index);
    });
    
    /* array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
    total 必需。初始值, 或者计算结束后的返回值。
    currentValue 必需。当前元素
    currentIndex 可选。当前元素的索引
    arr 可选。当前元素所属的数组对象
    initialValue 可选。传递给函数的初始值
    reduce() 对于空数组是不会执行回调函数的。
    */
    var numbers = [65, 44, 12, 4];
    function getSum(total, num) {
        
        return total + num;
    }
    console.log(numbers.reduce(getSum));
    
    /* array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue);
    total 必需。初始值, 或者计算结束后的返回值。
    currentValue 必需。当前元素
    currentIndex 可选。当前元素的索引
    arr 可选。当前元素所属的数组对象
    initialValue 可选。传递给函数的初始值
    reduce() 对于空数组是不会执行回调函数的。
    */
    var numbers = [65, 44, 12, 4];
    function getSum(total, num) {
        
        return total + num;
    }
    console.log(numbers.reduceRight(getSum));

*  参数：map() 的参数是一个回调函数fn。fn的第1个参数表示当前数组的元素。fn的第2个参数表示对应元素的索引下标。
 *  返回值：回调函数每次执行后的返回值会组合起来形成一个新数组。
 *  结果：在控制台依次可查看到，“a 0”、 “b 1”和“c 2”。

// 利用 map() 方法实现二维数组的转置
    var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];  // 待转置的数组
    var reverse = arr[1].map(function (col, i) {
          // 利用i获取转置后数组元素的下标
        return arr.map(function (row) {
        	          // 返回转置后新组合而成的数组元素
            return row[i];			              // 返回转置前数组元素的指定索引的元素
        });
    });
    console.log(reverse);

### 4 嵌套与递归 ###

#### 4.1 函数嵌套与作用域链 ####

嵌套函数是在一个函数内部存在另一个函数的声明。

内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域，我们称这种链式的查询关系为作用域链。

var i = 10;
    
    function fn1() {
        
        fn2();
    }
    
    function fn2() {
        
        console.log(i);
    }
    
    fn1();

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2022-02-08_2F202202081737383.png_pos_id_img-f8cxWt8j-1695692095153]

#### 4.2 递归调用 ####

递归调用是函数嵌套调用中一种特殊的调用。它指的是一个函数在其函数体内调用自身的过程，这种函数称为递归函数。

简单理解： 函数内部自己调用自己，这个函数就是递归函数

function factorial(n){
        
        if(n==1){
        
            return 1;
        }
        return n*factorial(n-1);
    }
    console.log(factorial(4));

> 注意：递归调用虽然在遍历维数不固定的多维数组时非常合适，但它占用的内存和资源比较多，同时难以实现和维护，因此在开发中要慎重使用函数的递归调用。
> 
> 由于递归很容易发生"栈溢出"错误，所以必须要加退出条件 return

#### 4.3 练习作业 ####

*  求斐波那契数列第N项的值
    
     *  斐波那契数列又称黄金分割数列，如 “1, 1, 2, 3, 5, 8, 13, 21……”
     *  这个数列从第3项开始，每一项都等于前两项之和。
     *  代码实现原理：
        
         *  小于0，给出错误提示信息。
         *  等于0，返回0。
         *  等于1，返回1。
         *  大于1，按找到的规律并利用函数递归调用实现。

### 5 闭包函数 ###

#### 5.1 什么是闭包函数 ####

在 JavaScript 中，内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内部变量和嵌套函数。此时就可以使用“闭包”来实现。

所谓“闭包”指的就是有权访问另一函数作用域内变量（局部变量）的函数。它最主要的用途是以下两点：

*  可以在函数外部读取函数内部的变量。
 *  可以让变量的值始终保持在内存中。

> 注意：由于闭包会使得函数中的变量一直被保存在内存中，内存消耗很大，所以闭包的滥用可能会降低程序的处理速度，造成内存消耗等问题。

#### 5.2 闭包函数的实现 ####

闭包的常见创建方式：就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。

// 闭包（closure）指有权访问另一个函数作用域中变量的函数。
    // 一个作用域可以访问另外一个函数的局部变量 
    // 我们 fn 外面的作用域可以访问 fn 内部的局部变量
    // 闭包的主要作用: 延伸了变量的作用范围
    function fn() {
        
        var num = 10;
        return function() {
        
            console.log(num);
        }
    }
    var f = fn();
    f();

**点击 li 输出索引号**

<body>
        <ul class="nav">
            <li>榴莲</li>
            <li>臭豆腐</li>
            <li>鲱鱼罐头</li>
            <li>大猪蹄子</li>
        </ul>
        <script>
            var lis = document.querySelector('.nav').querySelectorAll('li');
            for (var i = 0; i < lis.length; i++) {
          
                lis[i].index = i;
                lis[i].onclick = function() {
          
                    // console.log(i);
                    console.log(this.index);
    
                }
            }
            // 2. 利用闭包的方式得到当前小li 的索引号
            for (var i = 0; i < lis.length; i++) {
          
                // 利用for循环创建了4个立即执行函数
                // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
                (function(i) {
          
                    // console.log(i);
                    lis[i].onclick = function() {
          
                        console.log(i);
                    }
                })(i);
            }
        </script>
    </body>

### 6 练习作业 ###

*  使用函数实现从小到大排序
    
     *  给出一组数据，要求按照从小到大进行排序。
 *  函数求阶乘
    
     *  给出一个数，利用函数直接可以求出阶乘计算结果和求出阶乘函数的和。
 *  判断是否是闰年
    
     *  用户输入一个年份，通过函数来判断输入的年份是闰年还是平年。
 *  函数计算圆的面积和周长
    
     *  定义周长和面积函数，用程序来计算圆的面积和周长。
 *  两个整数相互交换
 *  点击为盒子添加边框样式
 *  网页计算器
    
     *  编写HTML页面，两个文本框用于输入数据，4个按钮用于完成加减乘除运算，最后一个文本框显示计算结果。
     *  编写calc()函数，获取并转换输入的数据，判断，不合法给出提示，调用指定函数完成相关计算。  
        ) \{  
        // 利用for循环创建了4个立即执行函数  
        // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量  
        (function(i) \{  
        // console.log(i);  
        lis\[i\].onclick = function() \{  
        console.log(i);  
        \}  
        \})(i);  
        \}

\`\`\`

### 6 练习作业 ###

*  使用函数实现从小到大排序
    
     *  给出一组数据，要求按照从小到大进行排序。
 *  函数求阶乘
    
     *  给出一个数，利用函数直接可以求出阶乘计算结果和求出阶乘函数的和。
 *  判断是否是闰年
    
     *  用户输入一个年份，通过函数来判断输入的年份是闰年还是平年。
 *  函数计算圆的面积和周长
    
     *  定义周长和面积函数，用程序来计算圆的面积和周长。
 *  两个整数相互交换
 *  点击为盒子添加边框样式
 *  网页计算器
    
     *  编写HTML页面，两个文本框用于输入数据，4个按钮用于完成加减乘除运算，最后一个文本框显示计算结果。
     *  编写calc()函数，获取并转换输入的数据，判断，不合法给出提示，调用指定函数完成相关计算。
     *  编写函数，实现加、减、乘、除运算。

[20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2022-02-08_2F202202081737383.png_pos_id_img-f8cxWt8j-1695692095153]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2022-02-08%2F202202081737383.png&pos_id=img-f8cxWt8j-1695692095153