本文主要学习JavaScript包装类和Math、Date对象

包装类#

什么是包装类

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

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

1
var a = new Number(123);
2
var b = new String('柚子177');
3
var c = new Boolean(true);
4

5
console.log(typeof a); //object
6
console.log(typeof b); //object
7
console.log(typeof c); //object
8

9
console.log(5 + a); //可以参与运算
10
console.log(b.slice(0, 2));
11
console.log(c && true);
12

13
var d = 1234;
14
console.log(d.__proto__ == Number.prototype); //true

a、b、c是基本类型值么？它们和普通的数字、字符串、布尔值有什么区别么？

Number()、String()和Boolean()的实例都是object类型，它们的PrimitiveValue属性存储它们的本身值
new出来的基本类型值可以正常参与运算
包装类的目的就是为了让基本类型值可以从它们的构造函数的prototype上获得方法

Math（数学）对象#

已经学习过的Math对象的方法

幂和开方：Math.pow()、Math.sqrt()
向上取整和向下取整：Math.ceil()、Math.floor()

四舍五入Math.round()

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

1
console.log(Math.round(3.4)); // 3
2
console.log(Math.round(3.5)); // 4
3
console.log(Math.round(3.98)); // 4
4
console.log(Math.round(3.49)); // 3

四舍五入到小数点后某位

1
function roundTo(num, digits) {
2
  const factor = Math.pow(10, digits);
3
  return Math.round(num * factor) / factor;
4
}
5

6
roundTo(3.14159, 2); // 3.14
7
roundTo(3.145, 2);   // 3.15
8
roundTo(3.1, 3);     // 3.100

Math.max()和Math.min()

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

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

1
console.log(Math.max(6, 2, 9, 4)); // 9
2
console.log(Math.min(6, 2, 9, 4)); // 2

如何利用Math.max()求数组最大值

Math.max()要求参数必须是“罗列出来”，而不能是数组
还记得apply方法么？它可以指定函数的上下文，并且以数组的形式传入“零散值”当做函数的参数
```
1
var arr = [3, 6, 9, 2];
2
var max = Math.max.apply(null, arr);
3
console.log(max); // 9
```

随机数Math.random()

Math.random()可以得到0~1之间的小数
为了得到[a, b]区间内的整数，可以使用这个公式：
```
1
parseInt(Math.random() * (b - a + 1)) + a
```

Date（日期）对象#

使用new Date()即可得到当前时间的日期对象，它是object类型值
使用new Date(2020, 11, 1)即可得到指定日期的日期对象，注意第二个参数表示月份，从0开始算，11表示12月
也可以是new Date(‘2026-06-16’)这样的写法

日期对象的常见的方法

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

时间戳

时间戳表示1970年1月1日零点整距离某时刻的毫秒数
通过getTime()方法或者Date.parse()函数可以将日期对象变为时间戳
通过new Date(时间戳)的写法，可以将时间戳变为日期对象

小案例：倒计时小程序

在页面上实时显示距离2027年高考还有多少天、多少时、多少分、多少秒

1
<div>
2
  距离2027年高考还有：
3
  <span id="days">0</span> 天
4
  <span id="hours">0</span> 时
5
  <span id="minutes">0</span> 分
6
  <span id="seconds">0</span> 秒
7
</div>
8

9
<script>
10
  // 🎯 目标时间（2027高考）
11
  const targetDate = new Date("2027-06-07 00:00:00").getTime();
12

13
  function updateCountdown() {
14
    const now = new Date().getTime();
15
    const diff = targetDate - now;
16

17
    // 如果已经过了
18
    if (diff <= 0) {
19
      document.body.innerHTML = "⏰ 高考时间已到！";
20
      clearInterval(timer);
21
      return;
22
    }
23

24
    // 计算时间
25
    const seconds = Math.floor(diff / 1000);
26
    const days = Math.floor(seconds / (60 * 60 * 24));
27
    const hours = Math.floor((seconds % (60 * 60 * 24)) / (60 * 60));
28
    const minutes = Math.floor((seconds % (60 * 60)) / 60);
29
    const secs = seconds % 60;
30

31
    // 写入页面
32
    document.getElementById("days").textContent = days;
33
    document.getElementById("hours").textContent = hours;
34
    document.getElementById("minutes").textContent = minutes;
35
    document.getElementById("seconds").textContent = secs;
36
  }
37

38
  // 先执行一次（避免1秒空白）
39
  updateCountdown();
40

41
  // 每秒更新
42
  const timer = setInterval(updateCountdown, 1000);
43
</script>
44
<body>
45
  <h1>2027年高考倒计时</h1>
46
  <h2 id="info"></h2>
47
  <script>
48
    var info = document.getElementById('info');
49
    function updateCountdown() {
50
      // 现在的日期
51
      var nd = new Date();
52
      // 目标的日期，5表示六月
53
      var td = new Date(2027, 5, 7);
54

55
      // 毫秒差
56
      var diff = td - nd;
57

58
      // 任务很简单，就是把diff换算为天、小时、分钟、秒
59
      // 换算为多少天，除以一天的总毫秒数，不就是换算为多少天么
60
      var day = parseInt(diff / (1000 * 60 * 60 * 24));
61
      // 零多少小时呢？？差的总毫秒数与1天的毫秒数的相除的余数，就是零头的毫秒数
62
      var hours = parseInt((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
63
      // 零多少分钟呢？？
64
      var minutes = parseInt((diff % (1000 * 60 * 60)) / (1000 * 60));
65
      // 零多少秒呢？？
66
      var seconds = parseInt(
67
        ((diff % (1000 * 60 * 60)) % (1000 * 60)) / 1000,
68
      );
69
      info.innerText =
70
        day + '天' + hours + '时' + minutes + '分' + seconds + '秒';
71
    }
72
    updateCountdown(); //// 先执行一次（避免1秒空白）
73
    setInterval(updateCountdown, 1000);
74
  </script>
75
</body>

音乐

音乐

包装类#

Math（数学）对象#

Date（日期）对象#

文章分享

评论区