JS基础阶段性总结

首页 / 技术积累 / 正文

就业班的课程真的挺紧的,一周JS基础就上完了,看起来挺多人吸收都不怎么好,我还是因为有点基础,所以还算跟得上,而且都是最新的课程,比如var这种老的声明方式已经废弃了,还有模板字符串,很多都是ES6的,都放前面讲了。

例行惯例做一份总结,这次的结课考试题真的很值得记录一下,虽然老师没讲一些方法的使用,但是很多解决思路让我感觉到编程的神奇。

JS一周都学了什么?

首先是基础数据类型,分别有Number,String,Boolean,Undefined,Null,其中String类型我额外了解了一下模板字符串,挺好用的,再也不需要拼接了,想想以前学的真的是累。

typeof检测数据类型,老师没细讲,其实不推荐使用这种方法,因为他不精准,比如一个数组返回的是[object],理论上应该得到Array才是对的。

然后就是运算符,流程控制和数据类型转换了,这方面都挺简单的,稍微要注意的就是显式转换和隐式转换特殊的地方了,比如Number转换"123a"就会得到NaN,流程控制没什么要注意的,switch对比case的时候是根据全等对比的。

循环部分也没什么好说的,就多重循环考验逻辑,但如果区分开还是挺简单的,典型的例子就是输出乘法口诀表了,因为横着和竖着都是9行/列,所以双重循环就可以实现外部控制行,内部控制列。

1.png

最后就是复杂数据类型了,比如数组,对象,函数的使用。

先说数组操作,新增元素(push与unshift),删除元素(pop与shift),删除指定元素(splice)是最常用的,当然数组还有很多方法,个人感觉重点应该是sort的排序使用(返回a-b是正序,b-a是倒序),但是目前还是不懂其原理,很早之前我了解过,但是太久没用也忘了。

然后就是对象,JS可以说是万物皆对象了,使用for(let key in 对象名){ 对象名[key] }可以遍历对象,当然也可以遍历数组,因为数组其实也是特殊的对象,但不推荐用这种方式遍历。内置对象有很多,细讲了Date日期对象和Math数学对象,如果想输出一个区间的随机数可以用这个公式(Math.random()*(max-min+1)-min),推导过程也挺简单的。

最后是函数,其实也就是将代码块进行封装复用,使代码更加灵活,需要注意的是作用域的问题,有全局作用域和局部作用域,块级作用域是后面提出的,简单点说应该是let和const声明的变量在花括号内部属于块级作用域。

以上没涉及什么复杂的逻辑,唯一要注意的就是引用数据类型和基本数据类型的区别了,下面有一张原理图可以帮助理解。

2.gif

简单的说基本数据类型存储在栈内存中,复制的值被修改不会影响本身,而引用数据类型则会在栈内存中存储一个地址,这个地址指向堆内存中的一个空间,复制值其实是复制地址,所以修改复制的值会影响本身。

考试题记录

这次的题挺坑的,上次我94分排22名,这次93分排11名,从排名就可以看出很多人被坑,还有就是因为老师没讲数组很多的方法如何使用,属于有点超纲了。

3.png

没错,上面那题选B,这题主要考函数传参,前面输出100 100应该很容易理解,但是后面的a输出10就很意外,其实这题坑的地方在a并不只是赋值那么简单,在函数传参过程中,函数内部会默认声明形参,所以函数内部并没有改变外面的a,看似简单,我就掉坑了,但还好我会排除法,开始100,100就能锁定答案了。

4.png

上面这题其实看了答案的思路才知道很简单,但是我确确实实被卡住了,思维变通真的好慢,会写求次数,但是写在了多重循环里,然后那天一直在想怎么去删除多余的对象,其实只需要在第一层循环的时候遇到重复的跳出就好了,解决办法真的好多,只记录两个比较经典的思路,多重循环的是老师的写法,和我的很像,就是少了步重复跳出扣了两分,太可惜了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 封装获取30个随机的数组,并排个序 */
        function getArr(num) {
            let arr = [];
            for (i = 0; i < num; i++) {
                let num = parseInt(Math.random() * 21 + 80);
                arr.push(num);
            }
            arr.sort(function (a, b) {
                return a - b;
            });
            return arr;
        }
        let arr = getArr(30);
        document.write(arr);


        let obj = {};
        for (let i = 0; i < arr.length; i++) {
            if (obj[arr[i]]) {
                obj[arr[i]]++;
            } else {
                obj[arr[i]] = 1;
            }
        }
        /* 老师的思路 - 双重循环
        for (let i = 0; i < arr.length; i++) {
            if (obj[arr[i]]) {
                continue;
            }
            for (let j = i + 1; j < arr.length; j++) {
                if (arr[i] == arr[j]) {
                    if (obj[arr[i]]) {
                        obj[arr[i]]++;
                    } else {
                        obj[arr[i]] = 2;
                    }
                }
            }
        } */
        for (const key in obj) {
            if (obj[key] == 1) {
                continue;
            }
            document.write(`<br>重复数字: ${key}重复次数: ${obj[key]}次`);
        }
    </script>
</body>

</html>

老师的思路是注释的部分,其实两种解决思路只是循环那一块有区别,但个人觉得单次循环解决的方法会好很多,更简洁,老师的那种写法是为了让人听得懂。

最后,JS语法基础就差不多学完了,再学语法的时候就是JS高级部分了,接下来就是WEBAPI阶段,然后就是NodeJS...在这里不好好学真的太容易被卷掉了,加油吧,期待五个月后的自己能找到一份满意的工作,疫情当下真的有工作就不错了。

评论区
头像
    头像
    机器人
    2022年9月2日 09:56
    回复

    感谢分享,赞一个

    头像
    大雄
    2022年9月2日 00:13
    回复

    我的天啊,这个博客牛批啊!!

      头像
      DianC
      2022年9月2日 09:04
      回复

      主题是一个大佬开发的噢,我就改了一点点,欢迎到访~