JavaScript学习之旅-11(原创)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 在上一篇文章中,主要学习了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地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

相关文章
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
70 3
|
2月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
7天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
|
1月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
38 4
js学习--制作猜数字
|
1月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
48 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
2月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
2月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
1月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
37 4
|
1月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
20 2
|
1月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
19 2
下一篇
无影云桌面