JavaScript学习笔记(十五)——对象之Date,RegExp

在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意!

如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/学习。


Date

在JavaScript中,Date对象用来表示日期和时间。

系统当前时间:

var now = new Date();
now; // Thu Nov 30 2017 20:50:03 GMT+0800 (中国标准时间)
now.getFullYear(); // 2017, 年份
now.getMonth(); // 10, 月份,注意月份范围是0~11,10表示十一月
now.getDate(); // 30, 表示30号
now.getDay(); // 4, 表示星期四
now.getHours(); // 20, 24小时制
now.getMinutes(); // 50, 分钟
now.getSeconds(); // 3, 秒
now.getMilliseconds(); // 167, 毫秒数
now.getTime(); // 1512046203167, 以number形式表示的时间戳

这里需要注意的是,当前时间是浏览器从本机操作系统获取的时间,不一定准确,因为用户可以把当前时间设定成任意值。

注意:JavaScript的 Date 对象月份值从0开始,牢记0=1月,1=2月,2=3月,……,11=12月。

如果要创建一个指定日期和时间的Date对象,可以用:

var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

第二种创建一个指定的日期和时间的方法是解析一个符合格式的字符串,它返回一个时间戳,然后我们可以将时间戳转换为一个 Date :

var d = Date.parse(‘2015-06-24T19:49:22.875+08:00‘);
d; // 1435146562875

var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
d.getMonth(); // 5

注意: 使用 Date.parse() 时传入的字符串使用实际月份01~12,转换为 Date 对象后 getMonth() 获取的月份值为0~11。

时区

Date 对象表示的时间总是按浏览器所在时区显示的,不过我们既可以显示本地时间,也可以显示调整后的UTC时间。

var d = new Date(1435146562875);
d.toLocaleString(); // ‘2015/6/24 下午7:49:22‘,本地时间(北京时区+8:00),显示的字符串与操作系统设定的格式有关
d.toUTCString(); // ‘Wed, 24 Jun 2015 11:49:22 GMT‘,UTC时间,与本地时间相差8小时

在JavaScript中,我们传递一个 number 类型的时间戳,任何浏览器可以把它转换成本地时间。

时间戳:时间戳是一个自增的整数,它表示从1970年1月1日零时整的GMT时区开始的那一刻,到现在为止的毫秒数。如果浏览器所在电脑的时间是准确的,那么世界上无论哪个时区的电脑上,他们此刻产生的时间戳数字都是一样的。所以,时间戳可以精确地表示一个时刻,并且与时区无关。

我们只需要传递时间戳,或者存储时间戳,再让JavaScript自动转换成当地时间就行了。

RegExp(正则表达式)

字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在。

比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦,而且代码难以复用。

正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。

我们可以使用正则表达式判断一个字符串是否是合法的邮箱地址:

  1. 创建一个匹配Email的正则表达式;
  2. 用该正则表达式去匹配用户的输入来判断是否合法。

因为正则表达式也是用字符串表示的,所以,我们要首先了解如何用字符来描述字符。

在正则表达式中,如果直接给出字符,就是精确匹配。

用 \d可以匹配一个数字, \w可以匹配一个字母或者数字, . 可以匹配任意字符 \s 匹配一个空格(也包括Tab等空白符):

  • ‘00\d‘ 可以匹配 ‘007‘ ,但无法匹配 ‘00A‘ ;
  • ‘\d\d\d‘ 可以匹配 ‘010‘ ;
  • ‘\w\w‘ 可以匹配 ‘js‘ ;
  • ‘js.‘ 可以匹配 ‘jsp‘ 、 ‘jss‘ 、 ‘js!‘ 等等;

如果需要匹配变长的字符,用 * 表示任意个字符(包括0个),用 + 表示至少一个字符,用 ? 表示0个或者1个字符,用 {n} 表示n个字符,用 {n,m} 表示n~m个字符:

可以通过一个例子来看:

\d{3}\s+\d{3,8}

解释:我们从左到右来看这个正则表达式:

  1. \d{3}表示匹配3个数字,例如‘010‘;
  2. \s 表示匹配一个空格,所以\s+ 表示至少一个空格,例如匹配‘ ’ ,‘\t\t‘ 等。
  3. \d{3,8} 表示3~8个数字,例如‘1234567‘ 。

综合起来,上面的正则表达式可以匹配以任意个空格隔开的带区号的电话号码。

如果要匹配 ‘010-12345‘ 这样的号码呢?由于 ‘-‘ 是特殊字符,在正则表达式中,要用 ‘\‘ 转义,所以,上面的正则是 \d{3}\-\d{3,8} 。

但是,仍然无法匹配 ‘010 - 12345‘ ,因为带有空格。所以我们需要更复杂的匹配方式。

进阶

要做更精确地匹配,可以用 [] 表示范围:

  • [0-9a-zA-Z\_] 可以匹配一个数字、字母或者下划线;
  • [0-9a-zA-Z\_]+ 可以匹配至少由一个数字、字母或者下划线组成的字符串,比如 ‘a100‘ , ‘0_Z‘ , ‘js2015‘ 等等;
  • [a-zA-Z\_\$][0-9a-zA-Z\_\$]* 可以匹配由字母或下划线、$开头,后接任意个由一个数字、字母或者下划线、$组成的字符串,也就是JavaScript允许的变量名;
  • [a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19} 更精确地限制了变量的长度是1-20个字符(前面1个字符+后面最多19个字符)。

A|B 可以匹配A或B,所以 (J|j)ava(S|s)cript 可以匹配 ‘JavaScript‘ 、 ‘Javascript‘ 、 ‘javaScript‘ 或者 ‘javascript‘ 。

^ 表示行的开头, ^\d 表示必须以数字开头。

$ 表示行的结束, \d$ 表示必须以数字结束。

你可能注意到了, js 也可以匹配 ‘jsp‘ ,但是加上 ^js$ 就变成了整行匹配,就只能匹配 ‘js‘ 了。

RegExp

JavaScript有两种方式创建一个正则表达式:

第一种方式是直接通过 /正则表达式/ 写出来,第二种方式是通过 new RegExp(‘正则表达式‘) 创建一个RegExp对象:

var re1 = /ABC\-001/;
var re2 = new RegExp(‘ABC\\-001‘);

re1; // /ABC\-001/
re2; // /ABC\-001/

注意:如果使用第二种写法,因为字符串的转义问题,字符串的两个\\实际上是一个\

先看看如何判断正则表达式是否匹配:

var re = /^\d{3}\-\d{3,8}$/;
re.test(‘010-12345‘); // true
re.test(‘010-1234x‘); // false
re.test(‘010 12345‘); // false

RegExp对象的 test() 方法用于测试给定的字符串是否符合条件。

切分字符串

正则表达式可以用来切分字符串,比用固定的字符更灵活:

正常的切分代码,无法识别连续的空格:

‘a b   c‘.split(‘ ‘); // [‘a‘, ‘b‘, ‘‘, ‘‘, ‘c‘]

采用正则表达式,无论多少个空格都可以正常分割:

‘a b   c‘.split(/\s+/); // [‘a‘, ‘b‘, ‘c‘]

加入 , 试试:

‘a,b, c  d‘.split(/[\s\,]+/); // [‘a‘, ‘b‘, ‘c‘, ‘d‘]

再加入 ; 试试:

‘a,b;; c  d‘.split(/[\s\,\;]+/); // [‘a‘, ‘b‘, ‘c‘, ‘d‘]

如果用户输入了一组标签,可以用正则表达式把不规则的输入转化成正确的数组。

分组

正则表达式除了简单的判断是否匹配外,还可以用来提取子串,用 ( ) 表示的就是要提取的分组(group)。

正则表达式 ^(\d{3})-(\d{3,8})$ 定义了两个组,可以直接从匹配的字符串中提取出区号和本地号码。

var re = /^(\d{3})-(\d{3,8})$/;
re.exec(‘010-12345‘); // [‘010-12345‘, ‘010‘, ‘12345‘]
re.exec(‘010 12345‘); // null

如果正则表达式中定义了组,就可以在RegExp对象上用 exec() 方法提取出子串来。

exec() 方法在匹配成功后,会返回一个 Array ,第一个元素是正则表达式匹配到的整个字符串,后面的字符串表示匹配成功的子串。

exec() 方法在匹配失败时返回 null 。

Tips:通过正则表达式提取子串很强大。

下面这个正则表达式可以直接识别合法的时间:

var re = /^(0[0-9]|1[0-9]|2[0-3]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])$/;
re.exec(‘19:05:30‘); // [‘19:05:30‘, ‘19‘, ‘05‘, ‘30‘]

但是有些时候,正则表单式也无法做到完全验证,比如,识别日期:

var re = /^(0[1-9]|1[0-2]|[0-9])-(0[1-9]|1[0-9]|2[0-9]|3[0-1]|[0-9])$/;

对于 ‘2-30‘ , ‘4-31‘ 这样的非法日期,用正则还是识别不了,或者说写出来非常困难,这时就需要程序配合识别了。

贪婪匹配

贪婪模式:正则表达式一般趋向于最大长度匹配,也就是所谓的贪婪匹配。

非贪婪模式:就是匹配到结果就好,就少的匹配字符。

默认是贪婪模式;在量词后面直接加上一个问号 ? 就是非贪婪模式。

举例如下,匹配出数字后面的0:

var re = /^(\d+)(0*)$/;
re.exec(‘102300‘); // [‘102300‘, ‘102300‘, ‘‘]

由于 \d+ 采用贪婪匹配,直接把后面的0全部匹配了,结果 0* 只能匹配空字符串了。

必须让 \d+ 采用非贪婪匹配(也就是尽可能少匹配),才能把后面的0匹配出来,加个 ? 就可以让 \d+ 采用非贪婪匹配:

var re = /^(\d+?)(0*)$/;
re.exec(‘102300‘); // [‘102300‘, ‘1023‘, ‘00‘]

全局搜索

JavaScript的正则表达式还有几个特殊的标志,最常用的是 g,表示全局匹配:

var r1 = /test/g;
// 等价于:
var r2 = new RegExp(‘test‘, ‘g‘);

全局匹配可以多次执行 exec() 方法来搜索一个匹配的字符串。当我们指定 g标志后,每次运行 exec() ,正则表达式本身会更新 lastIndex 属性,表示上次匹配到的最后索引:

var s = ‘JavaScript, VBScript, JScript and ECMAScript‘;
var re=/[a-zA-Z]+Script/g;

// 使用全局匹配:
re.exec(s); // [‘JavaScript‘]
re.lastIndex; // 10

re.exec(s); // [‘VBScript‘]
re.lastIndex; // 20

re.exec(s); // [‘JScript‘]
re.lastIndex; // 29

re.exec(s); // [‘ECMAScript‘]
re.lastIndex; // 44

re.exec(s); // null,直到结束仍没有匹配到

注意:全局匹配类似搜索,因此不能使用/^...$/,那样只会最多匹配一次。

正则表达式还可以指定 i 标志,表示忽略大小写, m 标志,表示执行多行匹配。

时间: 2024-11-08 20:18:05

JavaScript学习笔记(十五)——对象之Date,RegExp的相关文章

JavaScript学习总结(十五)——Function类

在JavaScript中,函数其实是对象,每个函数都是Function类的实例,既然函数对象,那么就具有自己的属性和方法,因此,函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定. 一.函数的声明 方式一:常规方式 1 function sum1(num1,num2){ 2 return num1+num2 3 } 方式二:函数表达式 1 var sum2=function(num1,num2){ 2 return num1+num2; 3 }; 方式三:动态创建函数(这种方式用得不多)

Swift 学习笔记十五:扩展

扩展就是向一个已有的类.结构体或枚举类型添加新功能(functionality).扩展和 Objective-C 中的分类(categories)类似.(不过与Objective-C不同的是,Swift 的扩展没有名字.) Swift 中的扩展可以: 1.添加计算型属性和计算静态属性 2.定义实例方法和类型方法 3.提供新的构造器 4.定义下标 5.定义和使用新的嵌套类型 6.使一个已有类型符合某个协议 一.扩展属性,构造器,方法 class Human{ var name:String? va

laravel3学习笔记(十五)

原作者博客:ieqi.net ==================================================================================================== 异常与日志 在应用中,我们总会遇到各种问题.各种异常,这时,记录异常发生时的状态就很重要,所以异常与日志是有着天然的关系的. 关于异常与日志的配置在文件 application/config/error.php 中. 文件中有四个配置项: 'ignore' => ar

西门子PLC学习笔记十五-(数据块及数据访问方式)

一.数据块 数据块是在S7 CPU的存储器中定义的,用户可以定义多了数据块,但是CPU对数据块数量及数据总量是有限制的. 数据块与临时数据不同,当逻辑块执行结束或数据块关闭,数据块中的数据是会保留住的. 数据块分共享数据块.背景数据块.用户自定义数据块,下面分别介绍. 1.共享数据块(全局数据块) 其用于存储全局数据,所有逻辑块(OB.FC.FB)都可以访问共享数据块中的数据. 2.背景数据块(私有存储区) 其用做功能块(FB)的"存储器".FB的参数和静态变量安排在它的背景数据块中.

JavaScript学习笔记——3.系统对象

1.常用对象类型 时间(Date)对象 数学(Math)对象 字符串(String)对象 正则表达式(RegExp)对象 数组(Array)对象 2.Date对象: //var date= new Date(); .getYear() //获取年13 .getFullYear() //获取年2013 .getMonth() //获取月(需要+1) .getDate() //获取日 .getHours() //获取时 .getMinutes() //获取分 .getSeconds() //获取秒

javascript学习笔记(五)

第六章学习 (这一章看的我云里雾里,我会多看两遍的)   伟伟:12月1日 这一章通过一整节来慢慢引出了js中继承的概念 ECMAScript支持面向对象OO编程,但js中并没有类和接口这种概念.它实现面向对象只是通过对象 一.对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体. 在没有类的情况下,可以采用下列模式创建对象: 1.工厂模式:创建对象通过简单的函数,为对象添加属性和方法,然后返回对象.这个模式后来被构造函数模式取代 2.构造函数模式:可以创建自定义引用类型,可以像

Java基础学习笔记十五 集合、迭代器、泛型

Collection 集合,集合是java中提供的一种容器,可以用来存储多个数据. 在前面的学习中,我们知道数据多了,可以使用数组存放或者使用ArrayList集合进行存放数据.那么,集合和数组既然都是容器,它们有啥区别呢? 数组的长度是固定的.集合的长度是可变的. 集合中存储的元素必须是引用类型数据 集合继承关系图 ArrayList的继承关系: 查看ArrayList类发现它继承了抽象类AbstractList同时实现接口List,而List接口又继承了Collection接口.Collec

Android学习笔记十五.深入理解fragment(三) 之《兼容多分辨率的应用》实战

深入理解fragment(三) 之<兼容多分辨率的应用>实战 在上一篇博文中介绍了如何使用Android Fragment开发适用于大屏幕应用,现在我们在上一个应用的基础上继续学习如何使用Fragment开发兼容多分辨率的应用. 1.建立/res/values-large/refs.xml引用资源文件 为了开发兼顾屏幕分辨率的应用,我们需要建立一个引用资源文件,专门用于定义各种引用项.refs.xml引用资源文件中定义了一项引用,其作用就是标明activity_book_list实际引用(@)

JavaScript学习笔记【五】

JavaScript的引用类型-Function 一.Function 1.函数的声明和函数表达式. 在JavaScript中.Function也是一种类型.所有定义的函数都是Function类型的. alert(sum(10, 1)); function sum(val1, val2) { return val1 + val2; } 上边的方法不会报错.因为JavaScript的执行环境会把函数的声明提前.而下边的函数表达式会报错.因为在执行alert的时候.sum还没有获得函数的引用. 也就

PHP学习笔记十五【面向对象二】

<?php class Cat{ //public 访问修饰符 public $name; public $age; } //创建 $cat1=new Cat; $cat1->name="小白"; //访问某个对象的某个属性 $对象名->属性名 echo $cat1->name; echo "<br/>"; class Person { public $name; public $age; } $a=new Person(); $