【前端学习第一周】最基础的算法复习-CSDN博客

本文链接：https://blog.csdn.net/m0_49390478/article/details/127235989

学习了一个星期啦，加油ヾ(◍°∇°◍)ﾉﾞ

前言

经历了大学四年的迷茫，在国庆前开始了对前端知识系统的学习，从某站pink老师的HTML5到CSS3，在国庆假期几天“热情”地学习下，终于勉强算是看完了前端最基础的H5C3，照着老师的项目半复习半学习地描摹了“品优购商城”项目。也算是成就感满满吧，毕竟是自己学了三年代码第一次比较完整地完成了一个网站的前端制作（虽然一部分还是参考了老师给的源码，但大部分还是自己完成了），非常开心！后面就开始对JavaScript展开学习，众所周知，学到JS才算是真正地开始学习前端，JS也是前端最最重要的基础。

JavaScript的学习

JavaScript我依然选择了课本配合网课的方法进行学习，白天我会在自习室选择慢节奏地读JavaScript的书籍——《JavaScript高级程序设计》，据说这本书也被成为“红宝书”，非常好听的名字，也非常适合像我一样刚入门的同学！从刚开始学习的变量、作用域、函数...其中有一些很熟悉的身影，这些在之前对Java的学习都有粗略的了解，在今天对函数的学习中，了解到JS有一些内置的函数非常方便我们的编码，而其中较为基础的原理我也重温了一遍，例如冒泡排序，在JS中可以直接用sort()函数实现，我也自己尝试用双重for循环完成了一遍冒泡排序的实现；

 <script>
        var arr = [61, 5, 58, 9, 9990, 5513165156, 41, 4, 3];
        arr.sort(function (a, b) {
            return b - a;      //a-b是升序，b-a是降序
        });
        console.log(arr);


        var newArr = [];
        for (i = 0; i < arr.length - 1; i++) {           
            for (j = 0; j < arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);
    </script>

又例如对数组去重的方法以及实现：创建一个新数组用来存储去重后的数组，遍历旧数组，将每一个元素到新数组中用indexOf() === -1（我当时自己尝试完成的时候用的是==，也能实现，暂时还没明白数据类型对这个算法的影响，后面遇到再研究吧）的方法查询是否存在，若不存在则push进去，这样最后return 新数组就能得到一组没有重复值的数据了；

 <script>
        //一开始我是直接这样用的，看了老师的视频发现封装进函数里面会更方便。
        // var arr = [4, 3, 2, 8, 1, 1, 3, 6, 4];
        // var newArr = [];
        // for (i = 0; i < arr.length; i++) {
        //     if (newArr.indexOf(arr[i]) == -1) {
        //         newArr.push(arr[i]);
        //     }
        // }

        function unique(arr) {
            var newArr = [];
            for (i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) == -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var result = unique([4, 3, 2, 8, 1, 1, 3, 6, 4]);
        console.log(result);
    </script>

印象比较深刻的还有对Date()函数的了解，知道了计算机一般以1970.01.01为起始时间，网页中的时间表达一般以总毫秒数来计算（表达不太准确），要计算某一刻（例如2022.12.12 00:00:00）到现在2022.10.10 00:09:00的倒计时，则是将两者都转换为对1970.01.01的毫秒数，然后计算两者的差值，就可以得到两个时间点之间相差的时间（单位是毫秒），再通过单位换算（除以进率以及求余操作）就可以得到直接展示给用户的数据了（xx天xx小时xx分xx秒，一般进行补0操作方便阅读，直接在小于10的数据前拼接一个字符串‘0’就可以了）

<script>
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1;
        var date = nowDate.getDate();
        var day = nowDate.getDay();
        var hours = nowDate.getHours();
        var minuter = nowDate.getMinutes();
        var second = nowDate.getSeconds();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        xzsj = hours + '点' + minuter + '分' + second + '秒';
        function countTime(time) {
            var nowTime = +new Date();//现在时间的毫秒数；
            var inputTime = +new Date(time);//输入时间的毫秒数；
            var shijiancha = (inputTime - nowTime) / 1000;
            var d = parseInt(shijiancha / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            var h = parseInt(shijiancha / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var m = parseInt(shijiancha / 60 % 60);//3600s是多少分钟3600/60=60mins
            m = m < 10 ? '0' + m : m;
            var s = parseInt(shijiancha % 60);
            s = s < 10 ? '0' + s : s;
            var result = d + '天' + h + '时' + m + '分' + s + '秒';
            return result;
        }
        alert('距离12月12号0点还有：' + countTime('2022-12-12 00:00:00') + '\n' + '现在时间是：' + xzsj);
    </script>