JS要点整理-8

225 阅读6分钟

进制转换与保留小数

十进制转换为其他进制

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

        var num = 100
        var num1 = num. toString(2)
        console.log(num1);
        var num2 = num.toString(36)
        console.log(num2);

其他进制转换为十进制

var num = parseInt(数字, 将数字视为几进制的数字然后转换为10进制的数字)

        var num1 = parseInt(100, 2)
        console.log(num1);
        var num2 = parseInt(200, 36)
        console.log(num2);
        var num3 = parseInt('2s', 36)
        console.log(num3);

保留小数

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

        var num = 1234.567890
        console.log(num.toFixed(2));

Math 与 Date

  • Math 给我们提供了操作数据的一些方法, 是 JS 内置的一个对象
  • Date 给我们提供了操作时间的一些方法, 是 JS 内置的一个对象

Math 数学方法

是 JS 提供的一个对象, 内部有很多个 方法/函数 给我们使用

  • random * 语法: Math.random() * 作用: 得到一个随机数, 每次生成的数字都不一样, 但一定是0~1之间的,包含0 不包含1
    • round
      • 语法: Math.round(数字)
      • 作用: 将一个小数 四舍五入 变成整数
    • ceil
      • 语法: Math.ceil(数字)
      • 作用: 将一个小数 向上取整
    • floor
      • 语法: Math.floor(数字)
      • 作用: 将一个小数, 向下取整
    • abs
      • 语法: Math.abs(数字)
      • 作用: 返回一个数字的绝对值
    • sqrt
      • 语法: Math.sqrt(数字)
      • 作用: 求平方根
    • pow
      • 语法: Math.pow(基数, 幂)
      • 作用: 返回基数的几次幂
    • max
      • 语法: Math.max(数字1, 数字2, 数字3, 数字4)
      • 作用: 返回最大值
    • min
      • 语法: Math.min(数字1, 数字2, 数字3, 数字4)
      • 作用: 返回最小值
    • PI
      • 语法: Math.PI()
      • 作用: 得到 π
console.log(Math);

        //随机数
        console.log(Math.random());

        //四舍五入
        console.log(Math.round(100.999999));
        console.log(Math.round(100.000001));

        //向下取整,负数也向下
        console.log(Math.floor(100.999999));
        console.log(Math.floor(100.000001));

        //向上取整,负数也向上
        console.log(Math.ceil(100.999999));
        console.log(Math.ceil(100.000001));

        //绝对值
        console.log(Math.abs(-1));
        console.log(Math.abs(1));

        //最大值
        console.log(Math.max(1, 2, 3, 4));
        console.log(Math.max([1, 2, 3, 4]));
        //...扩展运算符
        console.log(Math.max(...[1, 2, 3, 4]));

        //最小值
        console.log(Math.min(1, 2, 3, 4));
        var arr = [1, 2, 3, 4] 
        console.log(Math.max(arr));
        console.log(Math.max(...arr));

        //平方根
        console.log(Math.sqrt(4));

        //立方根
        console.log(Math.cbrt(8));

        //基数的指数次幂
        console.log(Math.pow(2, 3));

        //指示数字是正数、负数还是零
        console.log(Math.sign(-2));

        //单纯去小数点后内容,不管正负
        console.log(Math.trunc(-1.1));
        
        //100000次1-10随机,并输出次数
        function fn1(max1) {
            var obj1 = {}
            for (var j = 0; j < max1; j++) {
                //0-10.9999向下取整
                var num1 = Math.floor(Math.random() * 11)
                //三目运算,条件判断为自身,取反可用!
                obj1[num1] = obj1[num1] ? ++obj1[num1] : 1
            }
            return obj1
        }
        var res1 = fn1(100000)
        console.log(res1);

时间对象

通过 内置的构造函数 创建一个 时间对象, 并保存在变量 date 中

语法:var date = new Date()

不传参

当前的时间(字符串)

    var date = new Date()

传参

        //传参 数字 年月日时分秒,  超出进位
        var date = new Date(2022, 0)      //传数字月份范围0-11
        var date = new Date(2022, 0, 30)
        var date = new Date(2022, 0, 30, 12)
        var date = new Date(2022, 0, 30, 12, 12)
        var date = new Date(2022, 0, 30, 12, 12, 12)

        //传参传字符串   年月日时分秒  不可乱给
        var date = new Date('2022')
        var date = new Date('2022-01')     //传字符串月份范围1-12
        var date = new Date('2022-01-30')
        var date = new Date('2022-01-30 12:') //传字符时分秒与年月日之间有空格,时分秒后有:
        var date = new Date('2022-01-30 12:12:')
        var date = new Date('2022-01-30 12:12:12')
        console.log(date);

时间对象的获取操作

对象提供了一些方法能让我们更简单的获取到时间对象内部的一些信息

设置相关

        //时间对象的获取操作
        var date = new Date()
        console.log(date);
        //年
        date.setFullYear(2024)
        console.log(date.getFullYear());

        //月
        date.setMonth(0)
        console.log(date.getMonth());  //范围0-11

        //日
        // date.setDay(3)       // JS 中的时间对象没有给我们提供修改 周几的方法
        date.setDate(12)        // 修改了 每月的第几天后 每周的第几天也会同步发生
        console.log(date.getDay());    //这星期的第几天
        console.log(date.getDate());   //这月的第几天,周日 0 ,周六 6

        //时
        date.setHours(12)
        console.log(date.getHours());

        //分
        date.setMinutes(12)
        console.log(date.getMinutes());

        //秒
        date.setSeconds(12)
        console.log(date.getSeconds());
        //据今多少毫秒
        var timer = new Date(2022, 0, 31, 23, 59, 59)
        console.log(timer.getTime());

定时器

setInterval

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

  • 语法: setInterval(函数, 数字)
  • 函数: 每次定时器重新执行的时候, 要做的事情(要执行的代码)
  • 数字: 当前定时器每隔多长时间重新执行一次, 单位是毫秒

setTimeout

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

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

定时器的返回值

  • 意义:不区分定时器种类, 表明当前定时器是这个页面的第几个定时器
  • 作用:能够利用返回值关闭这个定时器

关闭定时器

  • 关闭语法1: clearInterval(要关闭的定时器的返回值)
  • 关闭语法2: clearTimeout(要关闭的定时器的返回值)
  • 不区分定时器种类, 只要给出正确的定时器返回值就可以关闭
 /**
        *  当不传递第二个参数的时候, 或者传递的是0的时候
        *  执行速度会按照最快的速度执行
        *  最快的速度一般为 4~20 毫秒, 最快速度与电脑性能有关
        * 
        *   所以在书写定时器或者倒计时器的时候, 需要我们指定一个时间, 一般不要不写或者给 0 毫秒
       */
       
       //定时器  执行函数+间隔时间(毫秒)
       var date1 = setInterval(function(){
            console.log('定时器执行一次');
            //间隔时间为0或不填采取最快速度4-20ms,依电脑性能而定
        }, 1000)
        //第几个定时器,不区分定时器种类
        console.log(date1);

        //定时器(倒计时器)
        var date2 = setTimeout(function(){
            console.log('倒计时器执行一次');
        }, 1000)
        console.log(date2);

        //停止定时器
        var date3 = setInterval(function(){
            console.log('定时器2执行一次');
        }, 1000)
        var date4 = setTimeout(function(){
            //停止谁
            clearInterval(date3)
        }, 1000)

        var date5 = setTimeout(function(){
            console.log('倒计时器2执行一次');
        }, 1000)
        //两种停止可混用
        clearTimeout(date5)
       

简单的代码异步执行机制

JS 将代码分为两个任务

  • 同步任务:到此篇文章为止, 除了两个定时器之外的都是同步任务
  • 异步任务:到此篇文章为止, 只有两个定时器算是异步任务

JS 中代码执行的顺序

  • 代码从上往下执行
  • 先将代码中所有的同步任务, 全都执行一遍
  • 同步任务执行完毕后, 在执行异步任务
  • 如果在代码的中间遇到了异步任务, 那么先将异步任务暂存到一个任务队列中, 等待所有的同步任务执行完毕后执行
        console.log('第一个');
        
        setTimeout(function () {
            console.log('第二个');
        }, 500)
        
        setInterval(function () 
            console.log('第三个');
        }, 1000)

        console.log('第四个');