【JavaScript学习第五天】—讲述JS学习历程的知识分享！

前言

本节主要涉及js中较为重要的一部分知识，满满干货！建议收藏起来~

讲解基本数据类型和复杂数据类型以及它们的判断类型方法

一、对象

内置对象

JS 语言自带的一些对象，提供了一些常用的功能实现

Math

Math 对象可以直接使用，不是构造函数(也就意味着不用通过 new Math 后才能使用)

math对象上有如下几个属性：

1. Math.PI()
2. Math.abs('-1')。结果还是1，有个隐式转换的过程
3. Math.floor()
4. Math.ceil()
5. Math.round()
6. Math.random()

常用的几个属性用案例来加深印象

eg1：封装得到[a,b)之间的随机数

function getRandom(min, max) {
    return Math.random()*(max - min) + min;
}
// 有可能等于10，当 Math.random() 等于 0 时，就是 10
console.log( getRandom(10, 20) );

eg2：猜数字游戏

• 程序随机生产1-10之间的随机数，并让用户输入一个数字

• 如果输入的数字大了，告诉用户大了，弹出输入框，让用户继续猜

• 如果小了，告诉用户小了，弹出输入框，让用户继续猜

• 猜对了返回正确

• 核心，while 循环，break 退出循环

function getRandomInt(min, max) {
    return Math.round( Math.random() * (max - min) + min );
}
var answer = getRandomInt(1, 10);
while(true) {
    var num = prompt('请输入数字 1 - 10 之间的数字');
    if(num > answer) {
        alert('你猜大了，请继续');
    } else if(num < answer) {
        alert('你猜小了，请继续');
    } else {
        alert('正确');
        break;
    }
}

Date

Date 是一个构造函数，需要实例化后才能使用其中的方法或属性

使用date实例化对象，var newDate = new Date()

格式化日期方法

1. newDate.getFullYear()
2. newDate.getMonth()
3. newDate.getDate()
4. newDate.getDay()
5. newDate.getHours()
6. newDate.getMinutes()
7. newDate.getSeconds()

eg：实现倒计时

// 时间戳转换为天、时、分、秒

d = parseInt(总秒数/60/60/24) 天
h = parseInt(总秒数/60/60%24) 小时

m = parseInt(总秒数/60%60)    分钟
s = parseInt(总秒数%60)       秒



function countDown(time) {
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var times = (inputTime - nowTime) / 1000;
    var d = parseInt(times/60/60/24);
    var h = parseInt(times/60/60%24);
    var m = parseInt(times/60%60);
    var s = parseInt(times%60);
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
let t = countDown('2024-8-19 16:00:00');
console.log(t);

二、数组

创建数组的方式：①字面量方式②new Array()

检测当前类型是否为数组：

• array instanceof  Array
• array.isArray()

添加/删除数组元素的几种方法：

• push()    返回是 push 后的数组长度，原数组发生变化
• unshift()   在数组的开头进行添加
• pop()   删除数组末尾的那一个元素，原数组发生变化
• shift()

数组排序

• reverse()  会改变原来的数组并返回新数组
• sort()     会改变原来的数组并返回新数组

根据元素获取数组索引的方法：

• indexOf   查找数组中给定元素的第一个索引，不存在返回-1
• lastindexOf   查找指定元素在数组中的最后一个索引，不存在返回-1

数组转为字符串方法：

• toString()
• join()分隔符  默认就是逗号进行分割

还有很多数组方法可以探索和更利于我们的运用，大家感兴趣可以自行探索~

三、字符串

首先要了解字符串的不可变性

• 指的是里面的值不可变，虽然看上去可以改变内容，但其实是指向的内存地址变了，内存中新开辟了一个空间

• 所以不要大量的进行字符串赋值，不要大量的拼接字符串，性能考虑

• 字符串的所有方法，都不会修改字符串本身（字符串是不可变的），操作完成返回的是一个新的字符串

eg：查找字符串"xfdfdx;ljfdxx;fdx”，x出现的位置以及次数

思路：

• 先查找第一个 x 出现的位置

• 只要 indexOf 返回的结果不是 -1 就继续往后查找

• 往后查找就需要用到 indexOf 的第二个参数，用上次查找到的索引位置 + 1

• 重点：while

var str = 'xfdfdx;ljfdxx;fdx';
var nowIndex = str.indexOf('x');
var count = 0;

while(nowIndex != -1) {
    count++;
    console.log(nowIndex);
    // 这里需要对 nowIndex 进行赋值！
    nowIndex = str.indexOf('x', nowIndex + 1);
}

console.log('次数' + count);

这里用到indexOf的第二个参数，str.indexOf('x',起始位置)

根据位置返回字符：

• charAt(index)   根据位置返回的是字符本身
• charCodeAt(index)   根据位置返回的是字符的 ASCII 码
• str[index]

字符串相关的一些操作方法：

• concat(str1, str2)
• substr(start, length)   length 代表截取的个数
• slice(start, end)  end代表索引，不包括end
• substring(start, end)  功能同slice，不包括负值
• replace('被替换'，'替换')    替换字符
• split('分隔符')   字符串转数组

四、数据类型

简单数据类型：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null

复制数据类型：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

关于null：

• null 是object，JS设计时的Bug

• 如果我们要使用一个对象，使用之前还不知道放点啥，可以先置为 null

堆和栈的理念

JS 没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言

栈：

由操作系统自动分配、释放，存放函数的参数值、局部变量的值等。简单数据类型存放在栈里面，里面存放的是值

堆：

存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收

• 复杂数据类型的值存放在堆里面，栈里面存放的是一个引用，这个引用指向堆

• 复杂数据类型首先在栈里面存放地址（十六进制），然后这个地址指向堆里面的数据

有不明白的或者有其他问题的可以评论区留言噢

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！

当然，如果觉得写的还不错的可以动动发财的小手点个赞~