1. 技术文章
  2. JavaScript-函数

JavaScript-函数

由 孤人 提交于 2020-01-20 03:01:32

函数

什么是函数？

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

函数使用分为两步：声明函数和调用函数

  1. 声明函数

     // function 函数名() {
 //     // 函数体
 // }
 function sayHi() {
     console.log('hi~~');

 }
 // (1) function 声明函数的关键字 全部小写
 // (2) 函数是做某件事情，函数名一般是动词 sayHi 
 // (3) 函数不调用自己不执行

  2. 调用函数

     // 函数名();
 sayHi();
 // 调用函数的时候千万不要忘记加小括号

函数的封装

  • 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
  • 简单理解：封装类似于将电脑配件整合组装到机箱中(类似快递打包)

利用函数计算1-100之间的累加和

    // 1. 声明函数
    function getSum() {
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);

    }
    // 2. 调用函数
    getSum();
    getSum();

函数的参数

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

  • 形参：形式上的参数，函数定义的时候传递的参数，当前并不知道是声明。
  • 实参：实际上的参数，函数调用的时候传递的参数，实参是传递给形参的。

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

// 1. 函数可以重复相同的代码 // function cook() { // console.log('酸辣土豆丝'); 
    // }
    // cook();
    // cook();
    // 2. 我们可以利用函数的参数实现函数重复不同的代码
    // function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参 （形式上的参数）
    // }
    // 函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）
    // 3. 形参和实参的执行过程
    function cook(aru) { // 形参是接受实参的  aru = '酸辣土豆丝' 形参类似于一个变量
        console.log(aru);

    }
    cook('酸辣土豆丝');
    cook('大肘子');
    // 4. 函数的参数可以有，也可以没有个数不限
    // 5 多个参数之间用逗号隔开
    // 6 形参可以看做是不用声明的变量

函数形参和实参匹配问题

  1. 如果实参的个数和形参的个数一致，则正常输出结构
  2. 如果实参的个数多于形参的个数，只取到形参的个数
  3. 如果实参的个数小于形参的个数，多的形参定义为undefined，结果为NaN
  4. 在JavaScript中，形参的默认值是undefined

函数的返回值return

    函数的返回值格式
    // function 函数名() {
    //     return 需要返回的结果;
    // }
    // 函数名();
    // (1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的
    // (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者  函数名() = return后面的结果
    // 3. 代码验证
    // 4. 求任意两个数的和
    function getSum(num1, num2) {
        return num1 + num2;
    }
    console.log(getSum(1, 2));

求数组中的最大值

// 利用函数求数组 [5,2,99,101,67,77] 中的最大数值。
    function getArrMax(arr) { // arr 接受一个数组  arr =  [5,2,99,101,67,77]
        var max = arr[0];
        for (var i = 1; i <= arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        return max;
    }
    // getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
    // 在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单
    // var re = getArrMax([5, 2, 99, 101, 67, 77]);
    var re = getArrMax([3, 77, 44, 99, 143]);
    console.log(re);

函数返回值注意事项

  1. return 终止函数

     function getSum(num1, num2) {
     return num1 + num2; // return 后面的代码不会被执行 
     alert('我是不会被执行的哦！')
 }
 console.log(getSum(1, 2));

  2. return 只能返回一个值

     function fn(num1, num2) {
     return num1, num2; // 返回的结果是最后一个值
 }
 console.log(fn(1, 2));

  3. 我们求任意两个数的加减乘除结果

     function getResult(num1, num2) {
     return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
 }
 var re = getResult(1, 2); // 返回的是一个数组
 console.log(re);

  4. 我们的函数如果有return 则返回的是 return 后面的值，如果函数么有 return 则返回undefined

     function fun1() {
     return 666;
 }
 console.log(fun1()); // 返回 666
 function fun2() {

 }
 console.log(fun2()); // 函数返回的结果是 undefined

arguments的使用

当我们不确定有多少个参数传递的时候，可以用argument来获取。在JavaScript中， argument实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

  1. 具有 length 属性
  2. 按索引方式存储数据
  3. 不具有数组的 push, pop 等方法

arguments的使用

 // arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
    function fn() {
        // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
        // console.log(arguments.length);
        // console.log(arguments[2]);
        // 我们可以按照数组的方式遍历arguments
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);

        }
    }
    fn(1, 2, 3);
    fn(1, 2, 3, 4, 5);

利用函数求任意个数的最大值

function getMax() { // arguments = [1,2,3]
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    }
    console.log(getMax(1, 2, 3));
    console.log(getMax(1, 2, 3, 4, 5));
    console.log(getMax(11, 2, 34, 444, 5, 100));

函数的两种声明方式

  1. 利用函数关键字自定义函数(命名函数)

     function fn() {

 }
 fn();

  2. 函数表达式(匿名函数)

     // var 变量名 = function() {};
 var fun = function(aru) {
     console.log('我是函数表达式');
     console.log(aru);

 }
 fun('pink老师');
 // (1) fun是变量名 不是函数名  
 // (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
 // (3) 函数表达式也可以进行传递参数

JavaScript作用域

作用域概述：通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

js的作用域（es6）之前 ： 全局作用域   局部作用域 
    // 全局作用域： 整个script标签 或者是一个单独的js文件
    var num = 10;
    var num = 30;
    console.log(num);

    // 局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
    function fn() {
        // 局部作用域
        var num = 20;
        console.log(num);

    }
    fn();

在JavaScript中，根据作用域的不同，变量可用分为两种：

1. 全局变量 
    // 1. 全局变量： 在全局作用域下的变量 在全局下都可以使用
    // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
    var num = 10; // num就是一个全局变量
    console.log(num);

    function fn() {
        console.log(num);

    }
    fn();
    // console.log(aru);

  1. 局部变量

     // 2. 局部变量   在局部作用域下的变量   后者在函数内部的变量就是 局部变量
 // 注意： 函数的形参也可以看做是局部变量
 function fun(aru) {
     var num1 = 10; // num1就是局部变量 只能在函数内部使用
     num2 = 20;
 }
 fun();
 // console.log(num1);
 // console.log(num2);

全局变量和局部变量的区别：

  • 全局变量：在任何一个地方都可以使用，只有浏览器关闭时才会被销毁，比较占内存资源。
  • 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当我们程序执行完毕就会销毁，比较节约内存资源。

作用域链

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链 就近原则

### JavaScript预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。

// 1. 我们js引擎运行js 分为两步：  预解析  代码执行
    // (1). 预解析 js引擎会把js 里面所有的 var  还有 function 提升到当前作用域的最前面
    // (2). 代码执行  按照代码书写的顺序从上往下执行
    // 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
    // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
    // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数

解析过程

// 预解析案例
    // 案例1
    // var num = 10;
    // fun();

    // function fun() {
    //     console.log(num);
    //     var num = 20;
    // }
    // // 相当于执行了以下操作
    // // var num;

    // // function fun() {
    // //     var num;
    // //     console.log(num);
    // //     num = 20;
    // // }
    // // num = 10;
    // // fun();
    // // 案例2
    // var num = 10;

    // function fn() {
    //     console.log(num);
    //     var num = 20;
    //     console.log(num);
    // }
    // fn();
    // // 相当于以下代码
    // // var num;

    // // function fn() {
    // //     var num;
    // //     console.log(num);
    // //     num = 20;
    // //     console.log(num);
    // // }
    // // num = 10;
    // // fn();
    // // 案例3
    // var a = 18;
    // f1();

    // function f1() {
    //     var b = 9;
    //     console.log(a);
    //     console.log(b);
    //     var a = '123';
    // }
    // 相当于以下代码
    // var a;

    // function f1() {
    //     var b;
    //     var a;
    //     b = 9;
    //     console.log(a);
    //     console.log(b);
    //     a = '123';
    // }
    // a = 18;
    // f1();
    // 案例4
    f1();
    console.log(c);
    console.log(b);
    console.log(a);

    function f1() {
        var a = b = c = 9;
        console.log(a);
        console.log(b);
        console.log(c);
    }
    // 以下代码
    // function f1() {
    //     var a;
    //     a = b = c = 9;
    //     // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看
    //     // 集体声明  var a = 9, b = 9, c = 9;
    //     console.log(a);
    //     console.log(b);
    //     console.log(c);
    // }
    // f1();
    // console.log(c);
    // console.log(b);
    // console.log(a);
标签
作用域
函数调用
解析函数
函数声明
num
var
变量
var函数
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!