初识js--Math与Date（七）一、进制转换(了解)与保留小数(掌握) 十进制转换为其他进制其他进制转换为十进制

一、进制转换(了解)与保留小数(掌握)

十进制转换为其他进制

十进制数字.toString(其他进制的数)

var num = 100
num.toString(2) // 将 10 进制的 100, 转换为 2 进制的数, 得到了: '1100100'
num.toString(36) // 将 10 进制的 100, 转换为 36 进制的数, 得到了: '2s'

其他进制转换为十进制

var num = parseInt(数字, 将数字视为几进制的数字然后转换为10进制的数字)
var num = parseInt(100, 2)  // 将100视为2进制的数, 然后将其转换为十进制的数字, 得到了: 4
var num = parseInt(100, 16)  // 将100视为16进制的数, 然后将其转换为十进制的数字, 得到了: 256

保留小数 toFixed, 保留小数时四舍五入, 且返回的是字符串

var num = 100.123456789
var num1 = num.toFixed(2)   // 100.12
var num2 = num.toFixed(4)   // 100.1235

二、Math 与 Date

Math 是JS提供的一个对象，内部有很多个**方法（函数）**给我们使用
Date 给我们提供了操作时间的一些方法, 是 JS 内置的一个对象

1、数学方法

random / round / ceil / floor / abs

1）random

语法: Math.random()
作用: 得到一个随机数, 每次生成的数字都不一样, 但一定是0~1之间的,包含0 不包含1

    console.log(Math.random())

1-1）随机函数统计出现次数--基础版

     function fn() {
            // 1. 先拿到随机数
            var num = Math.random()

            // 2. 将随机数放大 10 倍
            num *= 10

            // 3. 将随机数取整 (四舍五入)
            num = Math.round(num)

            // 4. 将计算后的随机数 返回
            return num
        }
    
    //基础版本
        var obj = {}
        for (var i = 1; i <= 11000; i++) {
            var num = fn()
            // console.log(i, '===>', num)
            if (obj[num] === undefined) {
                // 当前分支执行, 表明 num 内部存储的随机数字 是 第一次出现
                obj[num] = 1
            } else {
                // 当前分支执行, 表明 num 内部存储的随机数字 之前出现过
                // obj[num] = obj[num] + 1
                obj[num] += 1
            }
        }
        console.log(obj)

1-2）随机函数统计出现次数--优化1

    var obj = {}
        for (var i = 1; i <= 11000; i++) {
            var num = fn()
            // if (obj[num] === undefined) {
            if (!obj[num]) {
                // 当前分支执行, 表明 num 内部存储的随机数字 是 第一次出现
                obj[num] = 1
            } else {
                // 当前分支执行, 表明 num 内部存储的随机数字 之前出现过
                obj[num] += 1
            }
        }
        console.log(obj)

1-3）随机函数统计出现次数--优化2

     var obj = {}
        for (var i = 1; i <= 11000; i++) {
            var num = fn()
            obj[num] = obj[num] ? obj[num] + 1 : 1
        }
        console.log(obj)

1-4）随机函数统计出现次数--why

    function getRandom() {
            return Math.floor(Math.random() * 11)
        }
        var obj = {}
        
        //法一
        for (var i = 0; i < 100000; i++) {
            var random = getRandom()
            if (obj[random] === undefined) {
                obj[random] = 1
            } else {
                obj[random]++
            }
        }
        
        
        
        //法二
        for (var i = 0; i < 11000; i++) {
            var random = getRandom(0, 10)
            if (!obj[random]) {
                obj[random] = 1
            } else {
                obj[random]++
            }
        }
        
        
        
        
        //法三
        for (var i = 0; i < 11000; i++) {
            var random = getRandom(0, 10)
            obj[random] === undefined ? obj[random] = 1 : obj[random] + 1
        }
        console.log(obj)
        console.log(obj)

1-5）封装一个随机函数

    function getRandom(N,M) {
        return Math.floor(Math.random()*(M-N+1)+N)
    }

2）round

语法: Math.round(数字)
作用: 将一个小数四舍五入变成整数

    console.log(Math.round(10.2))//10
    console.log(Math.round(10.9))//11

3）ceil

语法: Math.ceil(数字)
作用: 将一个小数向上取整

    console.log(Math.ceil(10.2))//11
    console.log(Math.ceil(10.9))//11
    console.log(Math.ceil(-10.2))//-10
    console.log(Math.ceil(-10.9))//-10

4）floor

语法: Math.floor(数字)
作用: 将一个小数, 向下取整

    console.log(Math.floor(10.2))//10
    console.log(Math.floor(10.9))//10
    console.log(Math.floor(-10.2))//-11
    console.log(Math.floor(-10.9))//-11

5）abs

语法: Math.abs(数字)
作用: 返回一个数字的绝对值
sqrt / pow / max / min / PI

    console.log(Math.obs(10))//10
    console.log(Math.obs(-10))//10

6）sqrt

语法: Math.sqrt(数字)
作用: 求平方根

7）pow

语法: Math.pow(基数, 幂)
作用: 返回基数的几次幂

8）max

语法: Math.max(数字1, 数字2, 数字3, 数字4)
作用: 返回最大值
注意：需要传入多个数字，然后判断出最大值，不能直接传入数组

    console.log(Math.max(100,34,32,54,12))//100
    
    //让最大值和最小值能够接收数组
    var arr=[123,32,342,543,231]
    console.log(Math.max(...arr))//543
    
    console.log(Math.max(...[100,34,32,54,12]))//100

9）min

语法: Math.min(数字1, 数字2, 数字3, 数字4)
作用: 返回最小值

    console.log(Math.min(100,34,32,54,12))//12

10）PI

语法: Math.PI
作用： π
封装函数: 范围内的随机整数

2、时间对象

1）时间对象的创建

语法: var timer = new Date()
不传参
默认返回当前时间

    var timer = new Date()
    console.log(timer)
    // Fri Oct 07 2022 08:52:29 GMT+0800 (中国标准时间)

传参

1-1. 可以获取到一个你传递进去的时间

        var timer = new Date('2022-01-06 12:12:12')
        console.log(timer)
        // Thu Jan 06 2022 12:12:12 GMT+0800 (中国标准时间)

1-2. 传递两个数字, 第一个为年, 第二个为月

注意：月份从 0 开始计数, 0表示1月, 11表示12月

     var timer = new Date(2022,0)
     console.log(timer)
     // Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)

1-3. 传递三个数字, 前两个不变, 第三个表示该月份的第几天, 从1到31

        var timer = new Date(2022, 0, 31)  
        console.log(timer)
        // Mon Jan 31 2022 00:00:00 GMT+0800 (中国标准时间)

1-4. 传递四个数字, 前三个不变, 第四个表示当天的几点, 0-23

        var timer = new Date(2022, 0, 31, 23)
        console.log(timer)
        // Mon Jan 31 2022 23:00:00 GMT+0800 (中国标准时间)

1-5. 传递五个数字, 前四个不变, 第五个为该小时的多少分钟, 0-59

        var timer = new Date(2022, 0, 31, 23, 59)
        console.log(timer)
        // Mon Jan 31 2022 23:59:00 GMT+0800 (中国标准时间)

1-6. 传递六个参数, 前五个不变, 第六个表示该分钟的多少秒, 0-59

        var timer = new Date(2022, 0, 31, 23, 59, 59)
        console.log(timer)
        // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)

1-7. 传递字符串的形式

    console.log(new Date('2019'))   // Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)

    console.log(new Date('2019-02'))   // Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)

    console.log(new Date('2019-02-28')) // Thu Feb 28 2019 08:00:00 GMT+0800 (中国标准时间)
    
    console.log(new Date('2019-02-28 13:')) // Thu Feb 28 2019 13:00:00 GMT+0800 (中国标准时间)
     
    console.log(new Date('2019-02-28 13:13:')) // Thu Feb 28 2019 13:13:00 GMT+0800 (中国标准时间)
     
    console.log(new Date('2019-02-28 13:13:13')) // Thu Feb 28 2019 13:13:13 GMT+0800 (中国标准时间)

2）将日期对象格式化成指定内容

我们得到的时间字符串是: Thu Feb 28 2019 13:13:13 GMT+0800 (中国标准时间)
我们得到这个日期中是那年或者那天, 需要靠截取字符串的形式得到
但是现在 JS 为我们提供了一系列的方法来得到里面的指定内容

1）getFullYear

得到指定字符串中的那一年

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getFullYear()) // 2022

2）getMonth

得到指定字符串中的那一月, 月的计数从 0 开始

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMonth()) // 0

3）getDate

得到指定字符串中的那一日

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDate()) // 31

4）getHours

得到指定字符串的那小时

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getHours()) // 23

5）getMinutes

得到指定字符串中的那分钟

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMinutes()) // 59

6）getSeconds

得到指定字符串中的那秒钟

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getSeconds()) // 59

7）getDay

获取当前日期是一周中的第几天(周日是0, 周六是6)

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDay()) // 1

8）getTime

按照格林威治时间计算从1970 年 1 月 1 日 0 时 0 分 0 秒到现在(或指定日期)的毫秒数

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getTime()) // 1554681622000

3）设置相关

1）setFullYear()

语法: 时间对象.setFullYear(年份信息)
作用: 修改该时间对象内的年份信息

var time = new Date()
timer.setFullYear(2008)
console.log(timer.getFullYear())

2）setMonth()

语法: 时间对象.setMonth(月份信息)
作用: 修改该时间对象内的月份信息

var time = new Date()
timer.setMonth(2)
console.log(timer.getMonth())

3）setDate()

语法: 时间对象.setDate(日期信息)
作用: 修改该时间对象内的日期信息

var time = new Date()
timer.setDate(4)
console.log(timer.getDate())

4）setHours()

语法: 时间对象.setHours(小时信息)
作用: 修改该时间对象内的小时信息

var time = new Date()
timer.setHours(12)
console.log(timer.getHours())

5）setMinutes()

语法: 时间对象.setMinutes(分钟信息)
作用: 修改该时间对象内的分钟信息

var time = new Date()
timer.setMinutes(45)
console.log(timer.getMinutes())

6）setSeconds()

语法: 时间对象.setSecond(秒钟信息)
作用: 修改该时间对象内的秒钟信息

var time = new Date()
timer.setSeconds(20)
console.log(timer.getSeconds())

7）setMilliseconds()

语法: 时间对象.setMilliseconds(毫秒信息)
作用: 修改该时间对象内的毫秒信息

var time = new Date()
timer.setMilliseconds(857)
console.log(timer.getMilliseconds())

8）setTime()

语法: 时间对象.setTime(毫秒信息)
作用: 使用时间戳信息直接定位时间对象

var time = new Date()
timer.setTime(1440004004531)
console.log(timer)

三、定时器

两种定时器的介绍和作用 ( setTimeout / setInterval )

1）setInterval 计时器, 每间隔固定的时间执行一次

语法: setInterval(函数, 数字) 函数: 每间隔多少时间执行的代码数字: 间隔时间, 单位是毫秒

     setInterval(function(){
            console.log('每隔1s执行一次')
        },1000)

        //当不传递第二个参数时，或者第二个参数是0，执行速度会按照最快速度执行
        //最快速度一般是4--20毫秒
        setInterval(function(){
            console.log('每隔1s执行一次')
        },0)

2）setTimeout 倒计时器, 在指定时间到达后, 执行一次

语法: setTimeout(函数, 数字) 函数: 一段时间后执行的代码数字: 间隔时间, 单位是毫秒

         setTimeout(function(){
            console.log('1s后我只执行一次')
         },1000)

定时器的返回值及意义
- 返回值不区分定时器种类, 用于表示你这个定时器是页面中的第几个定时器
- 作用: 用来关闭定时器
- 注意：如果页面的打开方式是live server,那么定时器的id会增多。

        //查看定时器返回值
        var timeId = setInterval(function () {

        }, 1000)
        console.log(timeId)//1

        //利用返回值，停止定时器
        var time = setInterval(function () {
            console.log('定时器执行的时候==============')
        }, 1000)
        setTimeout(function () {
            console.log('倒计时器执行，停止了上边的定时器')
            clearInterval(time)
        }, 5000)

关闭定时器
- 不区分定时器种类, 只要给出正确的定时器返回值就可以关闭
- 语法:
  - clearTimeout(定时器返回值)
  - clearInterval(定时器返回值)
- 注意：关闭语法可以混用，所以只要关闭定时器，随便写哪个都行

        var time1 = setTimeout(function(){
            console.log('3s钟后我会执行')
        },3000)
        clearTimeout(time1)
        
        var time2 = setInterval(function(){
            console.log('每隔3s钟后我会执行')
        },3000)
        clearTimeout(time2)

四、简单的代码异步执行机制

JS的异步任务
- JS是单线程的，同一时间只能做一件事
- 如果只有单线程那么可能会遇到一些问题
- 上述的方案，如果遇到一个中间的代码耗时很久，那么后续的所有代码，都需要等待上边的代码执行完毕后再执行，这种情况给用户的感觉非常卡顿
- 所以为了解决，JS将代码分为两个任务，一个同步任务，一个异步任务。
  - 同步任务：目前所接触的除了两个定时器之外的都是同步任务
  - 异步任务：目前接触到的只有两个定时器

        //执行顺序是132
        console.log('1、JS开始执行')
        setTimeout(function () {
            console.log('2、一个非常耗时的任务执行完毕')
        }, 1000)
        console.log('3、JS执行完毕')

JS中代码执行的顺序
- 代码从上往下执行
- 先将代码中所有的同步任务全部执行一遍
- 同步任务执行完毕后，再执行异步任务
- 如果在代码的中间遇到了异步任务，那么先将异步任务暂存到一个任务队列中，等待所有的同步任务执行完毕后执行