〖大前端 - 基础入门三大核心之JS篇(55)〗- 内置对象

  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。



文章目录

  • [⭐ 包装类](#⭐ 包装类)
  • [⭐ Math(数学)对象](#⭐ Math(数学)对象)
    • [🌟 Math.round()](#🌟 Math.round())
    • [🌟 Math.max()和Math.min()](#🌟 Math.max()和Math.min())
    • [🌟 Math.random()](#🌟 Math.random())
  • [⭐ Date(日期)对象](#⭐ Date(日期)对象)
    • [🌟 创建日期对象](#🌟 创建日期对象)
    • [🌟 日期对象的常见方法](#🌟 日期对象的常见方法)
    • [🌟 时间戳](#🌟 时间戳)
    • [🌟 日期对象案例 - 倒计时](#🌟 日期对象案例 - 倒计时)

⭐ 包装类

很多编程语言都有"包装类"的设计,包装类的目的就是为了让基本类型值可以从它们的构造函数propotype上获得方法

Number()、String()和Boolean()分别是数字、字符串、布尔值的"包装类"

  • new 包装类()得到的变量的类型是对象 ,是一种特殊的表现形式。比如一个数字123用包装类进行"包装",就会得到一个被"包装"了的{123},示例代码如下:
js 复制代码
var a = new Number(123);
var b = new String('哈士奇');
var c = new Boolean(true);

console.log(a);
console.log(typeof (a));   // object
console.log(b);
console.log(typeof (b));   // object
console.log(c);
console.log(typeof (c));   // object
  • 包装类new出来的虽然是一个对象,但依然可以像普通类型一样可以进行计算、切片或布尔判断等

示例代码:

js 复制代码
var a = new Number(123);
var b = new String('哈士奇');
var c = new Boolean(true);

console.log(2 + a);         // 125
console.log(b.slice(0, 2)); // '哈士'
console.log(c && true);     // true
  • 我们定义一个number类型的变量,它的原型就是Number包装类的prototype。也就是说我们定义的number类型的变量可以看作是Number() new出来的。这就是为什么我们基本类型值可以调用一些内置的方法,比如字符串可以直接调用slice()方法、str()方法等

示例代码:

js 复制代码
var d = 123;
console.log(d.__proto__ === Number.prototype);   // true,证明变量d是Number new出来的实例

var e = '哈士奇';
console.log(e.__proto__ === String.prototype);   // true,证明变量e是String new出来的实例

console.log(String.prototype.hasOwnProperty('slice'));   // true

// 因为变量e是String() new出来的实例,所有变量e可以调用String.prototype拥有slice方法
console.log(e.slice(0, 2));   

包装类的目的就是为了让基本类型值可以从它们的构造函数prototype上获得方法,这就是js设计包装类的初衷。

注意,包装类是对基本类型值的面向对象封装,像对array这种复杂类型的封装就不能叫做包装类了,undefined和null是没有包装类的

⭐ Math(数学)对象

🌟 Math.round()

Math.round() 可以将一个数字四舍五入为整数

js 复制代码
console.log(Math.round(4.56));      // 5
console.log(Math.round(1.49));      // 1
console.log(Math.round(-12.2345));  // -12
  • 利用Math.round()实现四舍五入到小数点后某位:

示例代码:

js 复制代码
var a = 1.2672;
console.log(Math.round(a * 100) / 100);   // 1.27

🌟 Math.max()和Math.min()

Math.max() 可以得到参数列表的最大值

Math.min() 可以得到参数列表的最小值

js 复制代码
console.log(Math.max(2, 4, 6, 8));   // 8
console.log(Math.min(2, 4, 6, 8));   // 2
  • 利用Math.max()Math.min()得到数组中的最大值和最小值:

    因为Math.max()Math.min()要求参数必须是"罗列"出来,而不能是数组,我们可以利用apply方法(apply方法可以指定函数的上下文,并且以数组的形式传入"零散值"当作函数的参数),将数组以"零散值"的方式传入函数。

    示例代码:

    js 复制代码
    var arr = [2, 4, 6, 8];
    console.log(Math.max.apply(null, arr));   // 8
    console.log(Math.min.apply(null, arr));   // 2
    
    // 在ES6中,还可以使用"..."运算符来将数组变成零散值传入函数
    console.log(Math.max(...arr));   // 8

🌟 Math.random()

Math.random() 可以得到0~1之间的小数

为了得到[a, b]区间内的整数,可以使用这个公式:paseInt(Math.random() * (b - a + 1)) - a

js 复制代码
// 随机数
console.log(Math.random());
console.log(Math.random());
console.log(Math.random());

// 生成[10~20]之间的整数,公式parseInt(Math.random() * (b - a + 1)) + a
console.log(parseInt(Math.random() * 11) + 10);  

⭐ Date(日期)对象

🌟 创建日期对象

使用new Date() 可以得到当前日期,是object类型值


使用new Date(2024, 12, 1)即可得到指定日期的日期对象,注意:第二个参数表示月份,从0开始算,11表示12月;也可以用new Date('2024-12-01')这样的写法

js 复制代码
// 获取当前日期对象
var d_now = new Date();
console.log(d_now);           // 当前时间
console.log(typeof d_now);

// 获取指定日期对象
var d1 = new Date(2024, 2, 1);  // 不算时区
var d2 = new Date('2024-06-01'); // 算时区,我们位于东八区,所以是上午8点
console.log(d1);
console.log(d2);

🌟 日期对象的常见方法

日期对象的常见方法:

方法 功能
getDate() 得到日期1~31
getDay() 得到星期0~6
getMonth() 得到月份0~11
getFullYear() 得到年份
getHours() 得到小时数0~23
getMinutes() 得到分钟数0~59
getSeconds() 得到秒数0~59

示例代码:

js 复制代码
var d = new Date();

console.log('日期', d.getDate());
console.log('星期', d.getDay());
console.log('月', d.getMonth());  // 注意因为月份是从0开始算的,如果得到的是10,则表示现在是11月份
console.log('年份', d.getFullYear());
console.log('时', d.getHours());
console.log('分', d.getMinutes());
console.log('秒', d.getSeconds());

🌟 时间戳

时间戳表示1970年1月1日零点整剧离某个时刻的毫秒数


通过getTime()方法(精确到毫秒)或者Date.parse()函数(精确到毫秒)可以将日期对象变为时间戳


通过new Date(时间戳)的写法,可以将时间戳变为日期对象

示例代码:

js 复制代码
var d = new Date();

// 显示时间戳的两种方法
var timestamp1 = d.getTime();       // 方法一,精确到毫秒
var timestamp2 = Date.parse(d);       // 方法二,也是毫秒数,但后三位一定是000

console.log(timestamp1);
console.log(timestamp2);

// 把时间戳变回日期对象
var dd = new Date(timestamp1);
console.log(dd);

时间戳的作用: 如果数据库中只存储一个日期对象,是非常麻烦的,如果存储的是一个时间戳(整数)的方式,就会方便很多,也方便进行运算。比如如果需要比较两个时间的大小,直接转换成时间戳,再用比较运算符进行比较就可以了。

🌟 日期对象案例 - 倒计时

**案例:**在页面上显示距离2024年双十一还有多少天、多少小时、多少分、多少秒。

代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>距2024年双十一还有:</h1>
    <h2 id="info"></h2>
    <script>
        var info = document.getElementById('info');
        info.style.color = 'red';

        setInterval(() => {
            // 当前时间对象
            var t1 = new Date();
            // 2024年双十一时间对象
            var t2 = new Date('2024-11-11');

            // 计算差值,得到差值的时间戳
            var diff = t2 - t1;

            // 将时间戳转换成天、时、分、秒
            // 包含多少天?diff除以一天的毫秒数再取整,就是天数
            var days = parseInt(diff / (24 * 60 * 60 * 1000));
            // 包含多少小时?diff和一天的毫秒数取余,余数再除以一小时的毫秒数,再取整,就是小时数
            var hours = parseInt(diff % (24 * 60 * 60 * 1000) / (60 * 60 * 1000));
            // 包含多少分?除去天、小时后的余数再除以一分钟的毫秒数,再取整,就是分钟数
            var minutes = parseInt(diff % (24 * 60 * 60 * 1000) % (60 * 60 * 1000) / (60 * 1000));
            // 包含多少秒?出去天、小时、分钟后的余数再除以1000,就是秒数
            var seconds = parseInt(diff % (24 * 60 * 60 * 1000) % (60 * 60 * 1000) % (60 * 1000) / 1000);

            info.innerText = days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
        }, 1000);
    </script>
</body>

</html>

除了上述的方式外,网上还有很多计算两个时间差值的案例,可以尝试通过不同的方式实现这个功能。

相关推荐
虾球xz4 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇10 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒14 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
legend_jz17 分钟前
【Linux】线程控制
linux·服务器·开发语言·c++·笔记·学习·学习方法
小镇程序员29 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐31 分钟前
前端图像处理(一)
前端
tangliang_cn38 分钟前
java入门 自定义springboot starter
java·开发语言·spring boot
程序猿阿伟39 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒40 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax