JavaScript学习笔记（十五）——对象之Date，RegExp，JSON

在学习廖雪峰前辈的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地址，虽然可以编程提取@前后的子串，再分别判断是否是单词和域名，但这样做不但麻烦，而且代码难以复用。

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

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

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

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

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

用 \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}

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

\d{3}表示匹配3个数字，例如'010'；
\s 表示匹配一个空格，所以\s+ 表示至少一个空格，例如匹配‘ ’ ，'\t\t' 等。
\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 标志，表示执行多行匹配。

JSON

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。

JSON实际上是JavaScript的一个子集，JSON的几种数据结构如下：

number：和JavaScript的 number 完全一致；
boolean：就是JavaScript的true或false；
string：就是JavaScript的 string ；
null：就是JavaScript的 null ；
array：就是JavaScript的 Array 表示方式——[]；
object：就是JavaScript的 { ... } 表示方式。

以及上面的任意组合。

注意：JSON规定字符集必须是utf-8，为了统一解析，JSON的字符串规定必须用双引号 “ ” ，object的键也必须用双引号 “ ” 。

把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。

如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。

序列化

'use strict';

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

var s = JSON.stringify(xiaoming);
console.log(s);

以上输出如下：

{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}

可以加上参数，让输出好看一些：

JSON.stringify(xiaoming, null, '  ');

输出结果如下：

{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array：

JSON.stringify(xiaoming, ['name', 'skills'], '  ');

输出结果如下：

{
  "name": "小明",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

还可以传入一个函数，这样对象的每个键值对都会被函数先处理：

function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
}

JSON.stringify(xiaoming, convert, '  ');

上面的代码把所有属性值都变成大写：

{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON",
    "LISP"
  ]
}

如果我们还想要精确控制如何序列化对象，可以给 xiaoming 定义一个 toJSON() 的方法，直接返回JSON应该序列化的数据：

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

反序列化

对于一个JSON格式的字符串，我们直接用 JSON.parse() 把它变成一个JavaScript对象：

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse() 还可以接收一个函数，用来转换解析出的属性：

'use strict';

var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}

posted @ 2017-12-04 11:10 苦瓜第一印象阅读(717) 评论(0) 编辑收藏举报

刷新页面返回顶部

苦瓜第一印象