JS学习之—字符串，数字，Math/时间对象，定时器（55~66）字符串还是最纯粹的基本数据类型两个只读属性（对于一

字符串

还是最纯粹的基本数据类型

两个只读属性（对于一个字符串变量）

字符串常用方法

charAt: 你给我传入索引值，我给你返回的是当前索引对应的字符

str1返回k

charCodeAt 返回的是此索引的对应的字符编码（ASCII字符集）

tip. 联想截图_20231102200242.png ASCII字符转回来的话用

toUpperCase和toLowerCase 把所有字符转换为大写或小写

截取substr，substring，slice

例如：可用于某一个字母的大小写

substr（）里第一个参数是开始索引，第二个是截取长度

substring（）第一个参数是开始索引，第二个是结束索引,并且遵循包前不包后

slice跟substring差不多（区别：substring第二个参数不能写负数，而slice可以）

replace：替换（弊端：只能替换遇到的第一个）

应用场景例如：在前端页面，留言不文明，用替换

split：基于字符进行分割（把一个字符串分割成数组）

联想截图_20231102202553.png

indexOf 和lastIndexOf（模糊查询字符）

大于-1在，-1不在

indexOf：找我们要查的这个字符在字符串的索引的位置值

联想截图_20231102202924.png

模糊查询案例

 <script>
        var arr = ["aaa", "abc", "bcc", "bcd", "ddd", "ccd"]

        var input = prompt("请输入查询的内容")

        var res = arr.filter(function(item) {
            return item.indexOf(input) > -1
            //大于-1就是包含
        })

        console.log(res)
    </script>

contact：连接字符串

联想截图_20231102203153.png 得到abcdef

（其实直接用+拼接就可以）两者效果相同

联想截图_20231102203241.png

这些都不去中间空格

trim去掉首尾空格

trimStart（）trimLeft去掉首部空格

trimEnd（）trimRight去掉尾部空格

应用场景：

注册用户名时用户无意识输入空格，导致出现麻烦

json格式字符串

json字符串格式要求非常严格，key必须有双引号

把字符串转换成一个对象

（回顾：split可以把字符串转换成数组）

1.由json转成对象（后转前） 2.由对象转换成了字符串（可用于前端转给后端）

模板字符串

1. ``模板

在页面中输入li

 var myhtml="<li>11111</li>"
        document .write(myhtml)

如果写多个li，你在这里面直接回车，会报错，所以需要加一个 / 反斜杠来换行（表示你的字符串没断开）

或者直接在每个li外面包``反引号（建议）

2这种拼接也可以，但是还是建议用反引号模板``

2. 算是一种模板_______${}

花括号里面是js的天地，不加“”就当作变量，写运算就进行计算，写js的表达式也可以

内容 ${外面的一个变量} ，即

结果就是 my name is kerwin

数字常用方法

toFixed（n） 保留n位小数点（不够会自动补0）

其返回类型是字符串

应用情景： 假如123.4是一个价格，现在你完成保留小数的操作后想要跟另一个商品加在一起，所以你这样

但是结果发现发生了拼接，变成了123.4100 这是因为toFixed的返回的类型是字符串，所以你需要把它转换成数字就可以用一个-0转换一下，然后再加你所要加的另一个商品的价钱

不过需要注意的是，这时候你进行了数学计算，所以如果你原来保留小数的时候补了0，那么0会被省略

当然如果你非要保留那个0，就再给这个运算一个变量，然后最后再用一遍toFixed

Math对象

Math.random（） 随机数（0~1 包0不包1）

Math.round（） 四舍五入

ceil 向上取整，比如4.46会被取成5

floor 向下取整

abs 绝对值

sqrt 取平方根

pow（底数，指数） 运算次幂

max min 可以传入多个参数，然后可以选出最大或最小的

PI 圆周率3.14....

随机整数案例

需要实现下面要求

      //0-10 不包含10
      var res=Math.floor(Math.random()*10)
      console.log(res)
      //0-10 包含10
      var res=Math.floor(Math.random()*(10+1))
      console.log(res)
      //从10开头，10-20
      var res=Math.floor(Math.random()*10)+10
      console.log(res)
      //包含20
      var res=Math.floor(Math.random()*(10+1))+10
      console.log(res)

更推荐用函数，更灵活

但是实际这么多数据会很麻烦，所以在面对需求很多的时候我们可以选择封装函数（通过传参数控制）

需要总结规律：

max-min得差值，表示你这个区间。+min，意味着你要从哪个数开始

加一个if判断，更加严谨

   function getRnd(min,max){
        if(min>max){
            console.error("参数有误")
            return
        }
        return Math.floor(Math.random()*(max-min))+min
      }
      console.log(getRnd(20,30))

时间对象Date

基本概念

TIP:

1.都是从1970年1月1日 0：0开始计时

2.不传参数的话，就是自动生成现在的时间

3.new date 可以传参

4.10000毫秒=1s

5.在打印中会自动转为字符串

6.月份是从0开始的（字符串不是）

7.还可以传字符串（-或者/都可以）

联想截图_20231103190741.png

联想截图_20231103191032.png

时间对象常用方法

get方法

getFullyear 得出我们的年 getMonth得出我们的月（从0开始）

getDate 日

getDay星期

getHours 小时

getMinutes 分钟

getSeconds 秒

getMilliseconds 毫秒

getTime 时间戳（即距离我们1970年1月1日0点的毫秒数）

（在我们得到这个毫秒数后，可以再通过new date转回来

↑ 我们不用写这个，这个是方便自己检查，具体转换是由后端来操作的）联想截图_20231103192303.png

联想截图_20231103192251.png

set方法（设置）

年月日，小时分钟秒正常

不可以setday去设置周期，因为set会直接根据年月日推算你的周

setTime 时间戳，可以记录之前时间（例如你昨天下单的时间）

定时器（这两个都是异步）

返回值就是定时器的顺序（数字）

倒计时定时器

setTimeout（相当于执行函数，即注册定时器）

回调函数+延长了多长时间才会执行这个代码（毫秒）（只执行一次）

即联想截图_20231103193804.png

间隔计时器

setInterval （注册一个间隔定时器，具体内容还是你回调函数决定）

回调函数＋多长时间执行一次，不停息

但是现在的问题是，他这个执行是不停的，而我们实际应用中需要它到某个时间停下来

停止

1.clearTimeout（）清掉延时定时器

2.clearInterval（）清掉间隔定时器

TIP： 这里还引入了一个body中的button，并直接在script中调用（给一个按钮快速绑定一个事件）

    <button id="btn1">清除定时器-倒计时</button>
    <button id="btn2">清除定时器-间隔</button>

    <script>
        var time1=setTimeout(function(){
            console.log("kerwin")
        },2000)

        var time2=setInterval(function(){
            console.log(new Date())
        },1000)
        console.log(btn1,btn2) //直接通过id，拿到按钮对象

        btn1.onclick=function(){
            console.log("btn1 click")

            clearTimeout(time1)
        }
        btn2.onclick=function(){
            console.log("btn2 click")
            
            clearInterval(time2)
        }
        //相当于给一个对象加了一个属性，属性就是onclick
        //然后又给这个属性附上了一个函数
        //效果就是：点一下那个按钮，函数就触发一次

异步执行（相对于同步执行）

但是跟延迟秒数无关，异步就必须等同步的都执行完才能执行，也就是说即使把1000改成0也是同样的结果

同步优先级>异步优先级

倒计时案例

两个对象一减会自动得到时间戳，不用你专门获取

<div id="box"></div>
    <script>
        // var currentDate = new Date()
        var targetDate = new Date("2023/11/11")
        //这里时间如果忘加双引号，会出现bug，后面相减结果为负数

        function diffTime(current, target) {
            var sub = Math.ceil((target - current) / 1000)
            //计算相差多少毫秒
            var day=parseInt(sub/(60*60*24))
            var hours=parseInt(sub%(60*60*24)/(60*60))
            var minutes=parseInt(sub%(60*60)/60)
            var seconds=sub%60
            //计算

            var obj={
                day:day,
                hours:hours,
                minutes:minutes,
                seconds:seconds    
            }
            return obj 
            //让你需要返回的这么多参数都放在一个对象中
         }


         setInterval(function(){
            var currentDate = new Date()
            var res=diffTime(currentDate,targetDate)
            box.innerHTML=`京东618-${res.day}天  ${res.hours}时  ${res.minutes}分 ${res.seconds}秒`
         },1000)
        // diffTime(currentDate,targetDate)
        //这步忘写控制台什么也没有，相当于上面的并没有被调用
    </script>