JavaScript复习1.0

原创已于 2022-12-08 18:29:55 修改 · 373 阅读

0 ·

CC 4.0 BY-SA版权

本blog上原创文章未经本人许可不得商用，转载请注明出处

文章标签：

#javascript #前端 #开发语言

于 2022-07-08 10:45:00 首次发布

复习专栏收录该内容

12 篇文章

订阅专栏

这篇博客主要复习了JavaScript的基础语法，包括数字相关知识，如八进制、十六进制、最大最小值；日期对象的使用，如创建、格式化和时间戳计算；数组的方法，如push、unshift、filter、map等；字符串方法，如substring、replace、trim等；数据类型和创建对象的方式。此外，还介绍了程序调试、预解析细节以及预解析中的变量提升和函数提升。最后，文章提到了一些程序调试技巧和JavaScript中的细节问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS复习1.0主要为js基础语法中较重要的知识如数组、日期、对象等
JS复习2.0已发布，为Web APIs中的DOM（页面文档对象模型）JavaScript复习2.0
JS复习3.0主要为Web APIs中的BOM（浏览器对象模型）与offset、client、scroll家族系列：JavaScript复习3.0

JS复习1.0

1. 数字相关

在JS中八进制前面加0，十六进制前面加 0x
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-324
console.log(Boolean(NaN)); // false
Math.random() 返回一个随机的小数： 0 =< x < 1
若想要得到两个数之间的随机整数（包含这2个整数）
Math.floor(Math.random() * (max - min + 1)) + min;
null和undefined的区别：null是一个表示"无"的对象（空对象指针），转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN
判断一个数是NaN: n!==n

2.日期相关

new Date()

Date() 日期对象是一个构造函数，故需要使用new 来创建我们的日期对象
new Date()可传入参数：new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);其中年和月是必传的参数，其他为可选；若不传参数则返回的是当前时间

参数monthIndex 是从“0”开始计算的，这就意味着一月份为“0”，十二月份为“11”
当 Date 作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为 13 或者分钟数为 70），相邻的数值会被调整。比如 new Date(2013, 13, 1) 等于 new Date(2014, 1, 1)，它们都表示日期 2014-02-01（注意月份是从 0 开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70) 等于 new Date(2013, 2, 1, 1, 10)，都表示同一个时间：2013-03-01T01:10:00

 var date = new Date();
 console.log(date.getMonth() + 1); // 月份 返回的月份比实际小1个月,故月份记得+1
 console.log(new Date().getDay()); // 周一返回的是 1 周六返回的是 6 但周日返回的是 0

封装格式化当前时间

封装一个函数返回当前的时间格式为：x年x月x日星期x 08:08:08

        function getTimer() {
            let time = new Date()
            let year = time.getFullYear()
            let month = time.getMonth()+1
            
            let day = time.getDate()
            let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            let week =arr[time.getDay()] 
            let h = time.getHours()
            h = h < 10 ? '0' + h : h
            let m = time.getMinutes()
            m = m < 10 ? '0' + m : m
            let s = time.getSeconds()
            s = s < 10 ? '0' + s : s
            return year+'年'+ month+'月'+ day+'日'+week+h + ':' + m + ':' + s
        }
        console.log(getTimer());

获取时间戳

表示从1970年1月1日0时0分0秒（UTC，即世界标准时间）至今所经过的毫秒数
三种方法均可获得当前时间戳

console.log(new Date().getTime());
console.log(Date.now());
console.log(+new Date());

计算某个方法消耗的时间

// 法一：Date.now()
var start = Date.now();
// 调用一个消耗一定时间的方法：
foo()
var end = Date.now();
var elapsed = end - start; // 以毫秒计的运行时长
//将Date.now()换为+new Date())即为法三

//法二
var start = new Date();
foo()
var end = new Date();
var elapsed = end.getTime() - start.getTime();

复制日期对象

使用 setTime 方法用来把一个日期时间赋值给另一个 Date 对象：dateObj.setTime(timeValue)
timeValue为时间戳

//创建有相同时间值的日期对象
let days = new Date(2020,10,3)
let copy = new Date()
copy.setTime(days.getTime());
console.log(copy);

实现倒计时功能

用输入时间减去现在时间的时间戳来实现

<body>
    <div>
        <span class="day"></span>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>

    <script>
        // 1. 获取元素 
        var day = document.querySelector('.day')
        var hour = document.querySelector('.hour')
        var minute = document.querySelector('.minute')
        var second = document.querySelector('.second')
        var inputTime = new Date(2022,10,1,20,45,12).getTime()
        countDown(); // 先调用一次countDow函数，防止刷新或第一次进入页面时值为空白 
        // 2. 开启定时器，每秒执行一次
        setInterval(countDown, 1000);

        //每次调用countDown函数都会返回此时与输入日期的时间差
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var d = parseInt(times / 60 / 60 / 24) //天
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d + '天'
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h + '时'
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m + '分'
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s
            second.innerHTML = s  + '秒'
        }
    </script>

3.数组相关

数组方法盘点

会改变原数组的方法	返回值为新数组
push、 unshift、pop、shift、reverse、sort、splice	concat、filter、map、slice、sort、splice

concat()：用于合并两个或多个数组,返回新数组

every() ：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

some()：测试数组中的至少一个元素是否通过了提供的函数实现的测试，返回一个布尔值

fill() ：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

filter() ：创建一个新数组，其包含通过所提供函数实现的测试的所有元素

find() ：返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

forEach()：对每个数组元素执行一次提供的函数

includes()：确定数组是否在其条目中包含某个值，返回true或 false

Array.isArray()：确定传递的值是否为Array

map()：创建一个新数组，值为原数组每个元素调用了map中函数后的结果

slice()：将数组的一部分的返回到一个新的数组对象中，该对象选自start to end（索引值）end不包括在内，返回值为包含提取元素的新数组
splice()：通过删除或替换现有元素和/或在适当位置splice()添加新元素来更改数组的内容，返回值包含已删除元素的数组，无删除则返回空数组。若要访问数组的一部分而不修改它则用slice

手写数组方法及判断、转换数组总结

详见博客：JavaScript数组方法总结及手写详解
博客实现的手写有：手写数组衍生方法
1.检测是否为数组
2.类数组转化为数组
3.数组扁平化
4.数组去重
5.数组使用Math.max

手写数组内置方法
1.Array.prototype.filter
2. Array.prototype.map
3. Array.prototype.reduce(难点)
4. Array.prototype.forEach
5. Array.prototype.some
6. Array.prototype.find
7. Array.prototype.unshift
8. Array.prototype.join

数组转为字符串

PS:注意join()与join(‘’)的区别

    // 1. toString() 方法
    var arr = [1, 2, 3,4];
    console.log(arr.toString()); // 1,2,3
    // 2. join(分隔符) 常用
    var arr1 = [1,2,3,4];
    console.log(arr1.join()); // 1,2,3,4
    console.log(arr1.join(""));//1234

4. 字符串方法

substr(‘截取的起始位置（包含这个字符）’, ‘截取几个字符’)不推荐使用

substr()不是主要的 ECMAScript 规范的一部分。因此，建议人们改用标准String.prototype.substring()和String.prototype.slice()方法，

substring：返回string开始和结束索引之间的部分（不包含结束索引值），或者返回到字符串的末尾（当无第二个参数时）
replace(‘被替换的字符’, ‘替换为的字符’) ：若有多个被替换的字符匹配只会替换第一个字符
split(‘分隔符’) ：字符转换为数组
trim()：从字符串的两端删除空格并返回一个新字符串
toUpperCase()：返回转换为大写的调用字符串值
toLowerCase()：返回转换为小写的调用字符串值
charCodeAt(index): 返回索引号的字符的ASCII码值,如果index不是数字，则默认为0

5. 数据类型

简单数据类型：

简单数据类型存放在栈里，由操作系统自动分配和释放存放函数的参数值、局部变量值等。
在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null等基本数据类型、值类型

复杂数据类型：

复杂数据类型栈里存放的为十六进制表示的地址，而这个地址指向堆里真正的数据，堆一般由程序员分配和释放，若程序员不释放则由垃圾回收机制回收。
在存储时变量中存储的是地址（引用），如 Object、Array、Date、Function等

6. 创建对象的三种方式

利用字面量创建对象：

   // var obj = {};  // 创建了一个空的对象 
    var obj = {
            name: 'A',
            sayHi: function() {
                console.log('hi');

            }
        }
        //使用对象属性的方法：对象名.属性名或对象名['属性名']
         console.log(obj.name);
        console.log(obj['name']);
        obj.sayHi();

利用 new Object 创建对象

 var obj = new Object(); // 创建了一个空的对象
        obj.name = 'A;
        obj.sayHi = function() {
                console.log('hi');

            }

利用构造函数创建对象
构造函数就是把对象里一些相同的属性和方法封装到函数里面
注意：

构造函数名字首字母要大写
调用构造函数必须使用 new
属性和方法前面必须添加 this

 function Person(name) {
            this.name = name;
            this.sayHi = function(sayHi ) {
                console.log(this.name+'hi');

            }
        }
var stu = new Person('A'); // 调用函数返回的是一个对象
console.log(stu.name);
stu.sayHi('你好')

7.程序调试

断点调试的流程：
1、浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

8. 预解析

预解析分为 变量预解析 和 函数预解析
变量提升：把所有的变量声明提升到当前的作用域最前面且不提升赋值操作（即当前为undefined）
函数提升：把所有的函数声明提升到当前作用域的最前面且不调用函数
var 声明的变量存在变量提升，let 和 const 不存在变量提升

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

     var num = 1
    foo();
  var foo=  function () {
        console.log(num);
      var  num = 20;
    }
  //报错， foo is not a function，注意与上一题进行比较区分，因为此时提升的foo值为undefined，不是一个函数

var a = b =1 =>
var a;
a = b = 1

 foo();
        console.log(b);//1
        console.log(a);//报错,a is not defined,因为a是在函数内部定义为局部变量

        function foo() {
            var a = b =1;
            console.log(a); //1
            console.log(b);//1
        }
   		//	   var a = b =1相当于	
        //     var a;  a就是局部变量 只能在函数内部使用
        //     a = b = 1; b直接赋值,没有var 声明,当全局变量

9.细节

prompt、 alert输出的是字符串类型
只有 - * / 加数字才可以实现数字型的隐式转换，用+不可以
return 只能返回一个值，返回的结果是最后一个值
eg: return a,b,c 实际返回的是c
当不确定函数有多少个参数传递的时候可以用 arguments 来获取，arguments 对象中存储了传递的所有实参，是一个伪数组，具有length属性和索引，但没有数组的pop()等方法
字符串具有不可变的特点： let str = 'a' ; str = 'b',重新给str赋值时会重新在内存中开辟空间，故大量拼接字符串会影响效率