[JavaScript知识库] JavaScript中的这些内置对象

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript中的这些内置对象 -> 正文阅读

[JavaScript知识库]JavaScript中的这些内置对象

回顾

上一篇中我们说了 js 中的作用域和预解析，感受了 js 发展的过程中一些特有的声明和语言文化，js 在运行的时候也是按照预解析的顺序来运行的，所以会出现某些语句声明不恰当报错的行为。每门语言的诞生和发展同样也绕不开它当下所诞生的背景和时代发展的历程，需要慢慢理解它和适应它

这一篇中我们要说一说 js 中的内置对象，语言也是非常智能的，它同样会将常用的方法封装在自己本身可供使用者直接去调用，所以就产生了内置的一些对象，这些对象不妨有数组的对象、字符串对象。我们这一讲就先来聊一聊 js 内置对象常用的 Math 对象和日期对象

内置对象

在 js 中对象一般分为三种：自定义对象、内置对象、浏览器对象，这三种是语言上的内置对象，或者是浏览器自己技术上封装了对象可供使用者去调用。同样值得我们庆幸的是 js 自己内部封装了很多内置对象，例如：Math、Data、Array、String 等这些都有特定的处理方法，我们就不需要再额外的添加类似的方法。

查询文档

虽然 js 本身或者浏览器本身已经提供相当多的方法可供用户去使用，但是这么多的方法我们是不可能过目不忘，这么快全部记住的。当然也不需要我们全部记住，授人以鱼不如授人以渔，只要大概有一个印象，使用的时候去相关文档去查找就好了，这也是一个前端人或者程序员必备的技能之一：查询文档。MDN 是一个比较完善的文档，所以也建议你遇到不会的尝试查查文档从中获取知识 MDN学习文档

Math对象

Math对象：是一个数学对象，这个对象中包含了常用的一些数学的逻辑处理。这个对象不是一个构造函数，不需要 new 调用，而是直接使用里面的属性和方法即可

Math 概述

Math.PI：圆周率
Math.floor()：向下取整
Math.ceil()：向上取整
Math.round()：四舍五入，就近取整。注意：-3.5 结果为：-3
Math.abs()：绝对值
Math.max()：求最大值
Math.min()：求最小值

// 圆周率
console.log(Math.PI)  // 3.141592653589793

// Math.floor()：向下取整
console.log(Math.floor(1.7))  // 1

// Math.ceil()：向上取整
console.log(Math.floor(1.2))  // 1

// Math.round()：四舍五入，就近取整。注意：-3.5 结果为：-3
console.log(Math.round(-3.5))  // -3

// Math.abs()：绝对值
console.log(Math.abs(-2)) // 2

// Math.max的最大值
console.log(Math.max(1, 2, 3, 99)) // 输出 99

// Math.max的最大值
console.log(Math.min(-1, 99, -2)) // 输出 -2

在这里插入图片描述

随机数（random）：在 Math 中还有一个特别常用的内置方法就是随机数：Math.random()，这个对象在往后的工作中也会十分的常用，需要记住。不过需要注意的是 Math.random 返回的是小数。

我们可以想办法让它变成随机返回的是整数，或者写一个点名的小demo，这个可以下去自己想一想，在编辑器中自己动手做一做。

// Math.random()
console.log(Math.random())  // 0.xxxxxxxxxxx

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

// 得到两个数之间的随机整数
function random (max, min) {
  return Math.floor(Math.random() * (max - min) + min)
}
console.log(random(50, 1));

// demo
var arr = ['张飞', '赵云', '黄忠', '关羽', '马超']
console.log(arr[random(0, arr.length - 1)]);

在这里插入图片描述

日期对象

日期也是十分常用的方法之一，但是在 js 中日期是一个构造函数，必须使用 new 来调用。当然除此之外日期对象也是从当前日期到年份，月份时分秒等应有尽有，js还是很贴心的。

日期格式化（日期是构造函数需要 new 调用）：

var date = new Date()
date.getFullYear()：获取当前年份
date.getMonth()：获取当月（0~11）
date.getDate()：获取当天日期
date.getDay()：获取星期几（周日0周六6）

// 因为日期是一个构造函数，需要new
var date = new Date();

// 写一个 2021年11月24日星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();

var weekEdit = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var week = weekEdit[date.getDay()]

console.log('今天是：' + year + '年' + month + '月' + day + '日' + '星期：' + week)

在这里插入图片描述

date.getHours()：获取当前小时
date.getMinutes()：获取当前分钟
date.getSeconds()：获取当前秒
date.valueOf()：获取时间戳（现在时间距离1970年1月1日过去了多少毫秒）
date.getTime()：和 date.valueOf() 一样

// 获取当前时间的时分秒
var time = new Date()

// 利用三元表达式 补 0
s < 10 ? '0' + s : s

var s = time.getHours()
var m = time.getMinutes()
var d = time.getSeconds()

d = d < 10 ? '0' + d : d

console.log('当前时间：'+ s + ':' + m + ':' + d)

在这里插入图片描述

倒计时案例

可以使用日期对象做一个倒计时案例，现在做的这个倒计时案例是不会实时去改变的，可以自己想一想为什么不会实时响应。在我们下一大章节聊 WebAPI的时候再来让它实时变化秒数

// 倒计时案例
function time (outTime) {
  var oldTime = +new Date()
  var newTime = +new Date(outTime)
  
  // 返回的是毫秒数   1秒 = 1000毫秒
  var sTime = (newTime - oldTime) / 1000
  var d = parseInt(sTime / 60 / 60 / 24)
  var h = parseInt(sTime / 60 / 60 % 24)
  var m = parseInt(sTime / 60 % 60)
  var s = parseInt(sTime % 60)

  return d + '天' + h + '小时' + m + '分' + s + '秒' 
}

console.log(time ('2021-12-03 00:00:00'));  // 0天0小时56分59秒