(五).JavaScript的函数

Posted on 2022-04-12 21:59 云语不知阅读(40) 评论(0) 编辑收藏举报

1. 函数

1.1 函数基础简介

函数介绍

 函数：具有特定功能的代码块
本质：一种对象数据类型
功能：1. 代码复用 2. 项目模块化
函数组成（两者必须同时存在）：
  1. 函数定义
  2. 函数调用
  有声明，没调用，函数不会生效；
  没声明，有调用。引用类型错误

函数的定义方式（三种，本质上都是 new Function()）

函数声明定义

     function fun1() {
        console.log(11);
    }
    console.log(fun1);
 
//打印结果
    ƒ fun1() {
            console.log(11);
        }

函数表达式定义

     var fun2 = function () {
        console.log(22);
    }
    console.log(fun2);
 
//打印结果
    ƒ () {
            console.log(22);
        }

 函数声明和表达式定义的区别?
1. 函数声明定义的函数在控制台会带名字
2. 函数表达式定义的函数在控制台不带名字

构造函数定义

     var fun3 = new Function(
        'console.log("33");'
    );
    console.log(fun3);
 
//打印结果
    ƒ anonymous(
    ) {
            console.log("33");
    }

1.2 函数的三要素

函数声明三要素

     function fun1(a, b) {
        console.log(a, b);
        return 0;
    }
 
功能：看函数名字（函数体是真实逻辑）
参数：形参（形式参数）
      形参本质：函数内部定义的变量，可以接收外部传递的实参
返回值：1. return后面的值
           只写了return;或者没有return，返回值都是undefined
        2. return后面的代码不会执行

函数调用三要素

     fun1(1, 2);
 
功能：函数调用的名称必须和函数声明的名字一致
参数：实参（实际参数）
      实参本质：给函数声明的形参赋值
返回值：函数调用本质是一个表达式，返回值看return的值

函数调用的特殊情况

 1. 实参多于形参，可以调用成功，多的实参不会被赋值
    fun1(1, 2, 3);
 
2. 实参少于形参，可以调用成功，少的实参会自动赋值undefined
    fun1(1);

1.3 函数三要素案例

     // 1.
    function fn1(a) {
        console.log(a);
    }
    console.log(fn1); //打印函数的定义
    console.log(fn1(12)); //执行fn1(12) ,打印fn(12)返回值 undefined
 
 
    // 2.
    function fn2(a, b, c) {
        console.log(a);
        console.log(c);
        return;
    }
    console.log(fn2(1, 2)); //1 undefined undefined
 
    // 3.
    function fn3(a, b, c) {
        console.log(a);
        return 45;
        console.log(b);
        console.log(c);
    }
    fn3(12, 23, 34); //执行fn3(12,23,34)，只会打印a
 
    // 4.
    function fn4(a, b, c) {
        console.log(a);
        return b;
    }
    console.log(fn4(12)); // 12 undefined
 
    // 5.
    function fn5(b, c) {
        console.log(b);
        console.log(c);
        return 56;
    }
    console.log(12); //12
    console.log(fn5(23, 34)); //23 34 56
    console.log(45); //45

1.4 函数的基础案例

 1.未知使用参数
2.返回值使用return
 
    // 封装函数打印100遍我爱你
    // 1.无参数无返回值
    function printLove() {
        for (var i = 0; i < 100; i++) {
            console.log("我爱你");
        }
    }
    printLove();
 
    // 封装函数打印n遍你想要打印的内容
    // 2.有参数无返回值
    function printContentN(n, content) {
        for (var i = 0; i < n; i++) {
            console.log(content);
        }
    }
    printContentN(52, 'i love you');
 
 
    // 封装函数返回2 + 3的和
    // 3.无参数有返回值
    function sum() {
        return 2 + 3;
    }
    console.log(sum());
 
    // 封装函数返回n + m的和
    // 4.有参数有返回值
    function sumNM(n, m) {
        return n + m;
    }
    console.log(sumNM(100, 200));

1.5 函数的强化案例

     // 编写函数返回1到n的和
    function sum(n) {
        var sum = 0;
        for (var i = 1; i <= n; i++) {
            sum += i;
        }
        return sum;
    }
    console.log(sum(100));
 
    // 编写函数返回一个数的阶乘
    function factorial(n) {
        var total = 1;
        for (var i = 1; i <= n; i++) {
            total *= i;
        }
        return total;
    }
    console.log(factorial(4));
 
    // 编写函数实现返回某个数组的最大值，最小值
    // return后面只能返回一个值
    function maxAndMin(arr) {
        var max = arr[0];
        var min = arr[0];
        for (var index = 1; index < arr.length; index++) {
            if (arr[index] > max) {
                max = arr[index];
            }
 
            if (arr[index] < min) {
                min = arr[index];
            }
        }
        //转化成数组返回
        return [max, min];
    }
    console.log('最大值:' + maxAndMin([1, 4, 5, 7, 11, 3, 2])[0]);
    console.log('最小值:' + maxAndMin([1, 4, 5, 7, 11, 3, 2])[1]);
 
    // 封装函数加工数组，每一项加10输出
    function addNum(arr) {
        for (var index = 1; index < arr.length; index++) {
            console.log(arr[index] + 10);
        }
    }
    addNum([1, 2, 3, 4, 5]);
 
 
    // 封装函数实现打印1到N的质数;
    function findPrimeNumber(n) {
        var flag = true;
        for (var i = 1; i <= n; i++) {
            for (var j = 2; j < i; j++) {
                if (i % j == 0) {
                    flag = false;
                    break;
                }
            }
            if (flag & i != 1) {
                console.log(i);
            }
            flag = true;
        }
    }
    findPrimeNumber(10);
 
 
    // 封装函数返回对数组排序后的结果；
    function sort(arr) {
        var temp = 0;
        // 轮次
        for (var i = 0; i < arr.length - 1; i++) {
            // 每轮比较次数
            for (var j = 0; j < arr.length - 1 - i; j++) {
                if (arr[j] > arr[j + 1]) {
                    // 交换位置
                    temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        return arr;
    }
    console.log(sort([5, 3, 11, 45, 1, 22, 0, -11]));
 
 
    // 封装函数返回对数组翻转后的结果
    function arrOverturn(arr) {
        var temp = 0;
        // 折半交换数据
        for (var i = 0; i < arr.length / 2; i++) {
            temp = arr[i];
            arr[i] = arr[arr.length - 1 - i];
            arr[arr.length - 1 - i] = temp;
        }
        return arr;
    }
    console.log(arrOverturn([1, 3, 5, 7, 9, 100]));
 
 
    // 封装函数返回对数组去重后的结果
    function removeRepeat(arr) {
        // 使用遍历新数组的方式
        var newArr = [];
        var flag = true;
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < newArr.length; j++) {
                if (arr[i] == newArr[j]) {
                    flag = false;
                    break;
                }
            }
            if (flag) {
                newArr[newArr.length] = arr[i];
            }
            flag = true;
        }
        return newArr;
    }
    console.log(removeRepeat([1, 3, 4, 5, 6, 1, 2, 3, 4, 5, 11, -11, 0, 5]));

1.6 函数的分类

 第一种区分方式
    1、js自带 console.log() parseInt() Number()
    2、用户自定义 sum() fun()
 
第二种区分方式
    1、无参无返回值
    2、有参无返回值
    3、无参有返回值
    4、有参有返回值
 
第三种区分方式
    1、普通函数 xxx() xxx.yyyy()
    2、构造函数 new xxx()

1.7 函数的作用域

 作用域：变量的作用范围
作用：隔离变量
ES5范围分类（函数声明为界）：
    全局作用域(在函数声明外部)
    局部作用域(函数声明内部)
 
☆☆☆一个变量的作用域只与函数声明的位置有关，与函数调用的位置无关！
 
    // fn在全局作用域
    // c是在局部作用域
    var a = 1;
    function fn(c) {
        var a = 2;
        console.log(a);
    }
    fn();
    console.log(a);

1.8 全局变量与局部变量

 全局变量：在全局作用域中的变量
局部变量：在局部作用域中的变量

 // 第一种
    var a = 1;
    function fun1() {
        var a = 2;
        console.log(a, '局部'); //2
    }
    fun1();
    console.log(a, '全局'); //1
 
// 第二种
    var a = 1;
    function fun1() {
        console.log(a, '局部'); //1
    }
    fun1();
    console.log(a, '全局'); //1
 
// 第三种
    function fun1() {
        var a = 2;
        console.log(a, '局部'); //2
    }
    fun1();
    console.log(a, '全局');//引用错误，未声明变量a

 总结：
1.全局变量和局部变量都存在，各自使用
2.全局变量存在，局部变量不存在，局部可以使用全局变量
3.全局变量存在，局部变量不存在，全局无法使用局部变量

 for循环定义的变量也是全局变量
    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log(i); //5

1.9 局部变量不带var的分析

 // 局部变量不带var
    var a = 10;
    var b = 20;
    var c = 30;
    var d = 40;
    function fn() {
        var a = 100;
        var b = 200;
        var c = 300;
        var d = 400;
        // d = 400;
        e = 500;
        console.log('局部', a, b, c, d);
        console.log('局部', e);
    }
    fn();
    console.log('全局', a, b, c, d);
    console.log('全局', e);

 局部变量不带var的变量，操作过程：
1.先看函数内部是否声明了这个变量，如果有，这个变量是局部变量
2.如果函数内部没有声明过这个变量，看形参是否有该变量，如果有，该变量就是局部变量
3.如果函数未声明，形参也没有，那么看全局中是否有该变量，如果有，就是在操作全局变量
4.如果全局也没有这个变量，那么会在全局中声明一个变量