JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例

合集 - web前端(29)

1.1-web前端 基础标签 、图片、超链接2023-09-192.2-web前端 音频、视频、表格、表单2023-09-193.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-194.5-web前端 定位position2023-09-195.6-web前端的特效 平面转换transfrom2023-09-196.7-web前端 空间转换，3D效果2023-09-197.8-web前端 动画 案例2023-09-198.9-web前端 flex弹性布局2023-09-199.10-JavaScript 点击事件 随机点名器2023-09-2010.11-JavaScript 逻辑条件 ，if判断 ，while循环，算数运算相关的案例演示2023-09-2311.12-web前端轮播图案例 （小米商城）2023-09-2712.css字体样式2023-10-0813.css样式对单行和多行文本的隐藏2023-10-1014.css伪类和伪元素2023-10-1215.web前端html+css页面内容的六种隐藏方式2023-10-1616.JavaScript的基础语法和数据类型2023-10-2617.JavaScript 数组Array存储方式及对象Object2023-10-2718.JavaScript数据类型的转换2023-10-3019.JavaScript运算符及优先级2023-10-3120.JavaScript条件判断if 语句2023-11-0121.JavaScript for循环控制语句2023-11-0222.JavaScript 其他循环语句和跳转语句2023-11-0323.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-04

24.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-04

25.JavaScript Array对象（属性、方法） 留言板案例2023-11-0426.JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例2023-11-0727.JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历2023-11-1328.JavaScript事件 2023-11-1829.JavaScript BOM对象2023-11-18

收起

一、变量的生命周期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

二、自执行函数

执行函数通常都是定义之后立即执行，以后都不再会调用，所以声明时可以省略函数名，因此自执行函数又叫匿名函数。

通用的自执行函数方式有两种：

1、在给该函数加上小括号，后面紧跟小括号

(function(){console.log('我是匿名函数')})()

2、在函数后边加上小括号，然后再用个小括号把函数和小括号一起包起来

(function(){console.log('我是匿名函数')}())

案例：一个列表里有6个li，要求点击li的时候打印当前被点击li的索引。

<ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
    </ul>

<script>
        //函数的自执行
        // (function(){
        //     console.log('123456');
        // })()
        //
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i){
                lis[i].index = i;
                lis[i].onclick = function () {
                console.log(this.index)
              }
            })(i)
            
        }
    </script>

点击对应li获取下标

三、闭包

闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

总而言之，闭包就是对函数的嵌套

四、反转数组案例

第一种方法：

         // var arr = [78,11,22,77,45,1,6]
        // function reverse(arrone){
        //     var newArr=[];
        //     for(var i = 0 ;i<=arr.length-1;i++){
        //         newArr[arr.length-1-i] = arr[i];
        //     }
        //     return newArr;
        // }
        // console.log(reverse(arr));

核心思想，是创建一个新的数组，使原数组的下标到新数组时从后向前排列newArr[arr.length-1-i] = arr[i];

第二种方法：

        function reverse(arrone){
            var newArr = [];
            for(var i = arrone.length-1; i>=0;i--){
                newArr[newArr.length] = arrone [i]
            }
            return newArr;
        }
        var arr = reverse([78,11,22,77,45,1,6]);
        console.log(arr);

核心思想，创建一个新数组，使原数组按照倒着的顺序排放进新数组，最后将新数组输出

 

五、冒泡排序

封装一个函数,输入任意一个数,都能让这个数组从大到小进行排序

        var arr =[];
        function list(arr){
             var temp;
             for(var l = 0;l<=arr.length-1;l++){
             for(var b=0;b<=arr.length-1-l;b++){
                 if(arr[b]<arr[b+1]){
                     temp = arr[b+1]
                     arr[b+1] = arr[b]
                     arr[b] = temp
                 }
             }
         }
         console.log(arr);
         }
         list([5,35,4,1,88,45,12,41,31,66])

 

核心：设置一个第三方变量，当后者大于前者时，用三个变量之间交换位置的方法依次进行排序