重学JavaScript【Date介绍和用法】

简介: 重学JavaScript 篇的目的是回顾基础,方便学习框架和源码的时候可以快速定位知识点,查漏补缺,所有文章都同步在 公众号(道道里的前端栈) 和 github 上。

网络异常,图片无法展示
|

重学JavaScript 篇的目的是回顾基础,方便学习框架和源码的时候可以快速定位知识点,查漏补缺,所有文章都同步在 公众号(道道里的前端栈)github 上。


简介


Date 类型的创建参考了Java早起版本中的 java.util.Date,为此,Date 类型将日期保存为自协调世界时(UTC)时间 1970年1月1日0时 至今所经过的毫秒数,Date 类型可以精确表示 1970年1月1日之前及之后285616年的日期。


使用


Date 类型创建对象是通过 new 操作符来调用 Date 构造函数的:

let now = new Date();
// now: Wed Feb 10 2021 14:53:58 GMT+0800 (中国标准时间)

不传参的情况下,创建的对象将保存当前日期和时间,要创建特定的时间,必须传入其毫秒。

在下面的例子中,now 包括了很多用来解释当前某个时间的方法:

let now = new Date();
now.getDate(); // 返回一个月中的某一天 (1 ~ 31)
now.getDay(); // 返回一周中的某一天 (0 ~ 6)
now.getMonth(); // 返回月份 (0 ~ 11
now.getFullYear(); // 返回当前年份
now.getHours(); // 返回小时 (0 ~ 23)
now.getMinutes(); // 返回分钟 (0 ~ 59)
now.getSeconds(); // 返回秒数 (0 ~ 59)
now.getMilliseconds(); //返回毫秒数 (0 ~ 999);
now.getTime(); // 返回 1970 年 1 月 1 日至今的毫秒数
now.getUTCDate(); // 根据世界时从 now 对象返回月中的一天 (1 ~ 31)
now.getUTCDay(); // 根据世界时从 now 对象返回周中的一天 (0 ~ 6)
now.getUTCMonth(); // 根据世界时从 now 对象返回月份 (0 ~ 11)
now.getUTCFullYear(); // 根据世界时从 now 对象返回四位数的年份
now.getUTCHours(); // 根据世界时返回 now 对象的小时 (0 ~ 23)
now.getUTCMinutes(); // 根据世界时返回 now 对象的分钟 (0 ~ 59)
now.getUTCSeconds(); // 根据世界时返回 now 对象的秒钟 (0 ~ 59)
now.getUTCMilliseconds(); // 根据世界时返回 now 对象的毫秒(0 ~ 999)
now.Parse(); // 返回1970年1月1日午夜到指定日期(字符串)的毫秒数

除了获取一个时间,当然也可以设置一个时间:

now.setDate();  //设置月的某一天 (1 ~ 31)
now.setMonth(); //设置月份 (0 ~ 11)
now.setFullYear();  //设置年份(四位数字)
now.setHours(); //设置小时 (0 ~ 23)
now.setMinutes(); //设置分钟 (0 ~ 59)
now.setSeconds(); //设置秒钟 (0 ~ 59)
now.setMilliseconds();  //设置毫秒 (0 ~ 999)
now.setTime();  //以毫秒设置 now 对象
now.setUTCDate(); //根据世界时设置 now 对象中月份的一天 (1 ~ 31)
now.setUTCMonth();  //根据世界时设置 now 对象中的月份 (0 ~ 11)
now.setUTCFullYear(); //根据世界时设置 now 对象中的年份(四位数字)
now.setUTCHours();  //根据世界时设置 now 对象中的小时 (0 ~ 23)
now.setUTCMinutes();  //根据世界时设置 now 对象中的分钟 (0 ~ 59)
now.setUTCSeconds();  //根据世界时设置 now 对象中的秒钟 (0 ~ 59)
now.setUTCMilliseconds(); //根据世界时设置 now 对象中的毫秒 (0 ~ 999)

为了方便我们用常用的写法来表示日期,Date 类型也提供了一些方法可以直接使用:

now.toDateString(); // 显示日期中的周几、月、日、年
now.toTimeString(); // 显示日其中的时、分。秒和时区
now.toLocaleDateString(); // 人性化的显示日期中的年月日
now.toLocaleTimeString(); //人性化的显示日期中的时分秒


实例


两个日期是可以比较大小的:

let d1 = new Date(2019, 0, 1);
let d2 = new Date(2020, 0, 1);
d1 < d2 // true
d1 > d2 // false

下面我们手动实现一个日历组件,代码已上传至仓库:点击这里,效果图如下:

网络异常,图片无法展示
|

主要的逻辑有:

  1. 查到某月的天数
  2. 当前周几向前和向后空多少个
  3. 获取当前日期的上个月和下个月
  4. 获取当前日期的上个月末尾日期和下个月末尾日期
  5. 获取当前不包括上个月和下个月的所有日期
  6. 获取上周的周一和周日

以上逻辑放置在仓库的 calendar.js 中,屡清楚这些之后,把它们拼起来再加一点样式即可,细节可查看仓库代码。

目录
相关文章
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
189 2
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
1037 4
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
9月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
580 56
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
235 1
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
273 1
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
522 2
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
JavaScript 前端开发
JavaScript Date
【10月更文挑战第06天】
187 18
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
438 6
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
1065 4