JavaScript学习之旅-11(原创)

简介: 在上一篇文章中,主要学习了JavaScript的闭包,箭头函数。这一篇文章我们主要学习JavaScript中的Date、正则表达式、Json、浏览器对象Data:JavaScript中,使用Data来表示日期对象,既然是日期对象我们就可以获取具体的时间、月份、分钟等等,下面是基本的使用:Data相关API通过代码的日志可以看到,JavaScript的Date对象月份值居然是从0开始算起,0 = 1 月,1 = 2月,……,11=12月。

上一篇文章中,主要学习了JavaScript的闭包,箭头函数。这一篇文章我们主要学习JavaScript中的Date、正则表达式、Json、浏览器对象

Data:

JavaScript中,使用Data来表示日期对象,既然是日期对象我们就可以获取具体的时间、月份、分钟等等,下面是基本的使用:

img_3987a8ed476a0a674ddd9100485bff95.png
Data相关API

通过代码的日志可以看到,JavaScript的Date对象月份值居然是从0开始算起,0 = 1 月,1 = 2月,……,11=12月。

那这种尴尬的结果,如何变成我们想要的实际结果咧?(也就是数字1代表的就是1月)

可以直接在月份的数据加 1 ,这样可以快速解决问题。

正则表达式:

跟Java的设计理念一样,正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。比如,匹配邮箱,匹配电话号码等等,关于JavaScript的具体的正则表达式的内容这里就不具体讲了,因为百度谷歌很多开源的轮子,我们只需要知道有这样一个概念,使用的时候根据场景合理Copy就行

下面是一些常见的正则表达式写法,只是列举了其中的几项

img_b0c6345770ecdb81ead5ab625133b0e8.png

Json:

对于Json,开发人员不是很陌生,JSON是JavaScript Object Notation的缩写,它是一种轻量级的数据交换格式。在Java中,我们可以使用系统的JsonObject和JsonArray或者谷歌的Gson来进行相应的操作,那么,在JavaScript中,Json该如何使用?

首先,json这个数据格式,对象和数组是最常用的两种类型。其中,对象表示为键值对、数据由逗号分隔;花括号为保存json对象、方括号保存json数组,可能有点不好认识,下面截个图区分一下。


img_2714493ab45e29e4e04bf8d45869808e.png

1:将JavaScript对象转换为json,使用JSON.stringify 这个函数

img_024eddd7db203f08d5793a124a9e343f.png
对象转json

其中,JSON.stringify这个函数是一个方法重载,支持多个参数,功能比较强大:


img_07b3705598ef668baf43644e6ea0023b.png

比如,我现在有这样一个对象,我想把它转为json字符串,但是我只想要里面的name标签以及数组skills标签,这种情况该如何去做?

这个时候我们可以使用JSON.stringify的方法重载去使用,第二个参数就是过滤的条件

img_818727b9864700b201929b3c334fa8c7.png
筛选条件

再比如,我现在有这样一个对象,我想把它转为json字符串,但是我只想要里面所有标签的value属性值,全部大写,这种情况又该如何去做?

我们可以定义一个函数,因为JSON.stringify 方法重载里面的参数,也支持传一个函数

img_a71a545531de07c505ff250f35ef6759.png

那么,解析Json,该怎么操作?

下面就是解析Json的常规写法:

img_017ee1dd374ffdd46a2ed377d94e3e5a.png
解析json

调用parse函数即可解析json。

浏览器对象:

我们知道,H5的代码是部署在网页上面的,调试也是在网页上面进行的,如果你有学习或者从事Android开发和ios开发,会发现,手机和电脑开发的一个很大的不同在于,手机需要花很大的精力去完成适配,这一点在Android碎片化现象非常严重的现在尤其明显,ios适配屏幕相反没有那么大压力。

1:window

window对象不仅充当全局作用域,而且表示浏览器窗口。window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。

其中,使用navigator的一些API可以获取相应的信息,如下图:

img_ada39d4c349ced89c6b704ac55c911a0.png

2:screen

screen对象表示屏幕的信息,常用的属性有:

screen.width:屏幕宽度,以像素为单位:、screen.height:屏幕高度,以像素为单位;


img_4c6c9df26357fffa51eb12b7f97df42c.png
屏幕


本篇文章主要学习的是关于Date、正则表达式、Json、浏览器对象。本章的基本内容就结束了。

未完待续。。。

如果这篇文章对你有帮助,希望各位看官留下宝贵的star,谢谢。

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

相关文章
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0
|
1天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
28天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
62 1
|
2月前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
47 0
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
2月前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
33 0
|
2月前
|
JavaScript 中间件 测试技术