最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 提升开发效率的js内置对象

    正文概述 掘金(蝼蚁之行)   2021-04-10   491

    js中的对象分为3中:自定义对象内置对象浏览器对象

    • 自定义对象内置对象 是js基础内容,属于 ECMAScript
    • 浏览器对象属于js独有的

    今天我就来简单介绍一下js的内置对象

    内置对象最大的优点就是帮助我们快速开发

    js提供了多个内置对象:MathDataArrayString

    1、Math 对象

    提升开发效率的js内置对象

    1.1 max()min() 最大值最小值

    • Math.max():最大值
    • Math.min():最小值

    最大值最小值的参数必须是若干个 单个的数值

    console.log(Math.max(1, 4, -7, 10.5, 5)); // 10.5
    console.log(Math.min(1, 4, -7, 10.5, 5)); // -7
    console.log(Math.max('abc')); // NaN
    

    之前在讲this章节的时候说过,apply可以用来修改this的指向,基于它的特性(传入的参数是数组),因此可以用apply来查找数组的最大值最小值

    let arr = [1, 4, -7, 10.5, 5]
    console.log(Math.max.apply(Math, arr)); // 10.5
    
    console.log(Math.min.apply(Math, arr)); // -7
    

    1.2 floor() 向下取整

    Math.floor(x):向下取整,就是 返回小于或等于这个数的最大整数

    记住两点:

    • 返回的值小于或等于原本的数
    • 返回的值是整数
    console.log(Math.floor(1.5));  // 1
    console.log(Math.floor(1.9));  // 1
    console.log(Math.floor(-1.5));  // -2
    

    1.3 random() 随机数

    Math.random():默认返回 [0, 1) 之间的随机数

    记住:是大于等于0,小于1的数,不包括1

    console.log(Math.random());  // 0.7619574163174425
    

    随机产生一个truefalse

    console.log(Math.random() < 0.5 ? true : false);
    

    随机返回数组中的一个数

    var arr = ['一等奖', '二等奖', '三等奖', '四等奖']
    var random = Math.floor(Math.random() * arr.length);  // 随机获取0~3的一个整数
    console.log(arr[random]);
    

    1.4 round() 四舍五入

    Math.round() 四舍五入

    • 0.5 比较特殊,它往大的取
    console.log(Math.round(1.5));  // -2
    console.log(Math.round(-1.8));  // -2
    // 往大的取就是 -1
    console.log(Math.round(-1.5));  // -1
    

    小案例:猜数

    // 返回一个随机数
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min) + 1) + min
    }
    var Random = getRandom(0, 10)
    var random = prompt('请输入一个数')
    var i = 1
    while (true) {
        if (i === 3) {
            alert('很遗憾,你的次数已用完')
            break
        }
        if (random > Random) {
            alert('输入的数值较大')
            var Random = prompt('请输入一个数')
            } else if (random < Random) {
                alert('输入的数值较小')
                var Random = prompt('请输入一个数')
                } else {
                    alert('恭喜你,猜对了')
                }
        i++;
    }
    

    2、Date() 日期对象

    Date() 是一个构造函数,必须使用 new 来调用我们的日期对象

    // 打印当前的时间
    var date = new Date()
    console.log(date); // Sat Apr 10 2021 09:25:04 GMT+0800 (中国标准时间)
    
    // 打印指定的时间
    var date1 = new Date('2021-4-10 9:26:00')
    console.log(date1);  // Sat Apr 10 2021 09:26:00 GMT+0800 (中国标准时间)
    

    Date() 对象为我们提供了一些方法:

    提升开发效率的js内置对象

    方法名说明
    getFullYear()获取当前年份getMonth()获取当前月份(0~11)getDate()获取当前日期getDay()获取星期几getHours()获取当前小时getMinutes()获取当前分钟getSeconds()获取当前秒钟

    获取 年 月 日

    // 括号里面没有写任何数值,默认打印当前时间
    var date = new Date();
    var year = date.getFullYear(); // 返回当前年份 
    var month = date.getMonth() + 1;  // 月份
    var dates = date.getDate();  // 几号
    var day = date.getDay();  // 星期几
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
    // 今天是:2020年10月20日 星期二
    

    获取小时、分钟、秒

    var h = date.getHours()
    h = h < 10 ? '0' + h : h
    var m = date.getMinutes()
    m = m < 10 ? '0' + m : m
    var s = date.getSeconds()
    s = s < 10 ? '0' + s : s
    console.log(h + ':' + m + ':' + s);  // 09:51:49
    

    小案例:计算一下距离五一假期还要多久

    function countDown(time) {
        var nowTime = +new Date();  // 统计总的毫秒数
        var inputTime = +new Date(time);  // time那个时候的总毫秒数
        var times = (inputTime - nowTime) / 1000;  // 差的秒数
    
        var d = parseInt(times / 60 / 60 / 24); // 剩余的天数
        d = d < 10 ? '0' + d : d;
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? '0' + m : m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
    
        return d + '天' + h + '小时' + m + '分钟' + s + '秒';
    }
    
    console.log(countDown('2021-5-1 00:00:00')); // 20天14小时04分钟52秒
    

    +new Date():我们当前的时间距离1970年1月1日的总毫秒数


    3、数组

    数组在之前那一章已有了详细的描写,这里就不再作一些冗余的秒数

    在这里说一下数组的排序

    提升开发效率的js内置对象

    这两个方法都有一个共同的特点:在原数组上修改

    3.1 reverse() 颠倒数组

    var arr = [10, 2, 4, 5, 20, 40, 50]
    console.log(arr.reverse());  // [ 50, 40, 20, 5, 4,  2, 10]
    

    3.2 sort() 升序/降序

    sort() 语法

    // 默认是升序排序
    arr.sort([func])
    

    来体验一下:

    var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]
    console.log(arr.sort());  // [ 1, 2, 3, 4, 5, 6, 7, 8, 9]
    
    var arr = ['George', 'John', 'Thomas', 'James', 'Adrew', 'Martin']
    console.log(arr.sort()); // [ 'Adrew', 'George', 'James', 'John', 'Martin', 'Thomas' ]
    

    针不戳,但是你来看看下面

    var arr = [10, 8, 5, 2, 20, 1]
    console.log(arr.sort()); // [ 1, 10, 2, 20, 5, 8 ]
    

    很明显,这个排序错误了

    那是因为**sort() 是按照最高位的数来开始排序的**,所以才会导致10在2前面,20在5前面

    这时候就需要传入一个函数作为参数,来辅助sort()来判断

    // 升序
    var arr = [10, 8, 5, 2, 20, 1]
    arr.sort(function(a, b) {
        return a - b
    });
    console.log(arr);  // [ 1, 2, 5, 8, 10, 20 ]
    
    // 降序
    arr.sort(function(a, b) {
        return b - a
    });
    console.log(arr); // [ 20, 10, 8, 5, 2, 1 ]
    

    4、字符串对象

    请看这篇文章:这就是字符串对象


    起源地下载网 » 提升开发效率的js内置对象

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元