廖雪峰的JS教程3-標(biāo)準(zhǔn)對(duì)象

標(biāo)準(zhǔn)對(duì)象

Date

在JavaScript中，Date對(duì)象用來表示日期和時(shí)間。

要獲取系統(tǒng)當(dāng)前時(shí)間，用：

var now = new Date();
now;
now.getFullYear();
now.getMonth(); // 5, 月份，注意月份范圍是0~11，5表示六月
now.getDate(); // 24, 表示24號(hào)
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小時(shí)制
now.getMinutes(); // 49, 分鐘
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒數(shù)
now.getTime(); // 1435146562875, 以number形式表示的時(shí)間戳

方法一：如果要?jiǎng)?chuàng)建一個(gè)指定日期和時(shí)間的Date對(duì)象，可以用：

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

我們發(fā)現(xiàn)傳入的數(shù)據(jù)是5月，為什么結(jié)果確實(shí)June六月？

因?yàn)镴avaScript的月份范圍用整數(shù)表示是0~11，0表示一月，1表示二月……，所以要表示6月，我們傳入的是5！

方法二：創(chuàng)建一個(gè)指定日期和時(shí)間的方法是解析一個(gè)符合ISO 8601格式的字符串：

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

但它返回的不是Date對(duì)象，而是一個(gè)時(shí)間戳。不過有時(shí)間戳就可以很容易地把它轉(zhuǎn)換為一個(gè)Date：

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

使用Date.parse()時(shí)傳入的字符串使用實(shí)際月份01 ~ 12，轉(zhuǎn)換為Date對(duì)象后getMonth()獲取的月份值為0 ~ 11。

時(shí)區(qū)

Date對(duì)象表示的時(shí)間總是按瀏覽器所在時(shí)區(qū)顯示的，不過我們既可以顯示本地時(shí)間，也可以顯示調(diào)整后的UTC時(shí)間：

var d = new Date(1435146562875);
d.toLocalString();// '2015/6/24 下午7:49:22'，本地時(shí)間（北京時(shí)區(qū)+8:00），顯示的字符串與操作系統(tǒng)設(shè)定的格式有關(guān)
d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT'，UTC時(shí)間，與本地時(shí)間相差8小時(shí)

那么在JavaScript中如何進(jìn)行時(shí)區(qū)轉(zhuǎn)換呢？實(shí)際上，只要我們傳遞的是一個(gè)number類型的時(shí)間戳，我們就不用關(guān)心時(shí)區(qū)轉(zhuǎn)換。任何瀏覽器都可以把一個(gè)時(shí)間戳正確轉(zhuǎn)換為本地時(shí)間。

時(shí)間戳是一個(gè)自增的整數(shù)，它表示從1970年1月1日零時(shí)整的GMT時(shí)區(qū)開始的那一刻，到現(xiàn)在的毫秒數(shù)。假設(shè)瀏覽器所在電腦的時(shí)間是準(zhǔn)確的，那么世界上無論哪個(gè)時(shí)區(qū)的電腦，它們此刻產(chǎn)生的時(shí)間戳數(shù)字都是一樣的，所以，時(shí)間戳可以精確地表示一個(gè)時(shí)刻，并且與時(shí)區(qū)無關(guān)。

要獲取當(dāng)前時(shí)間戳，可以用：

'use strict'; 
if (Date.now) {
    console.log(Date.now()); //老版本IE沒有now()方法
} else {
    console.log(new Date().getTime());
}

練習(xí)

小明為了和女友慶祝情人節(jié)，特意制作了網(wǎng)頁，并提前預(yù)定了法式餐廳。小明打算用JavaScript給女友一個(gè)驚喜留言：

'use strict'; 
var today = new Date();
if (today.getMonth() === 2 && today.getDate() === 14) {
    alert('親愛的，我預(yù)定了晚餐，晚上6點(diǎn)在餐廳見！');
}
//應(yīng)該把2改為1，因?yàn)檗D(zhuǎn)換為Date對(duì)象后getMonth()獲取的月份值為0~11。

RegExp

字符串是編程時(shí)涉及到的最多的一種數(shù)據(jù)結(jié)構(gòu)，對(duì)字符串進(jìn)行操作的需求幾乎無處不在。比如判斷一個(gè)字符串是否是合法的Email地址，雖然可以編程提取@前后的子串，再分別判斷是否是單詞和域名，但這樣做不但麻煩，而且代碼難以復(fù)用。

正則表達(dá)式是一種用來匹配字符串的強(qiáng)有力的武器。它的設(shè)計(jì)思想是用一種描述性的語言來給字符串定義一個(gè)規(guī)則，凡是符合規(guī)則的字符串，我們就認(rèn)為它“匹配”了，否則，該字符串就是不合法的。

所以我們判斷一個(gè)字符串是否是合法的Email的方法是：

  1. 創(chuàng)建一個(gè)匹配Email的正則表達(dá)式；
  2. 用該正則表達(dá)式去匹配用戶的輸入來判斷是否合法。

因?yàn)檎齽t表達(dá)式也是用字符串表示的，所以，我們要首先了解如何用字符來描述字符。

在正則表達(dá)式中，如果直接給出字符，就是精確匹配。用\d可以匹配一個(gè)數(shù)字，\w可以匹配一個(gè)字母或數(shù)字，所以：

  • '00\d'可以匹配'007'，但無法匹配'00A'；
  • '\d\d\d'可以匹配'010'；
  • '\w\w'可以匹配'js'；

.可以匹配任意字符，所以：

  • 'js.'可以匹配'jsp'、'jss'、'js!'等等。

要匹配變長(zhǎng)的字符，在正則表達(dá)式中，用*表示任意個(gè)字符（包括0個(gè)），用+表示至少一個(gè)字符，用?表示0個(gè)或1個(gè)字符，用{n}表示n個(gè)字符，用{n,m}表示n-m個(gè)字符：

來看一個(gè)復(fù)雜的例子：\d{3}\s+\d{3,8}。

我們來從左到右解讀一下：

  1. \d{3}表示匹配3個(gè)數(shù)字，例如'010'；
  2. \s可以匹配一個(gè)空格（也包括Tab等空白符），所以\s+表示至少有一個(gè)空格，例如匹配' '，'\t\t'等；
  3. \d{3,8}表示3-8個(gè)數(shù)字，例如'1234567'。

綜合起來，上面的正則表達(dá)式可以匹配以任意個(gè)空格隔開的帶區(qū)號(hào)的電話號(hào)碼。

如果要匹配'010-12345'這樣的號(hào)碼呢？由于'-'是特殊字符，在正則表達(dá)式中，要用'\'轉(zhuǎn)義，所以，上面的正則是\d{3}\-\d{3,8}。

但是，仍然無法匹配'010 - 12345'，因?yàn)閹в锌崭?。所以我們需要更?fù)雜的匹配方式。

字符 精確匹配
\d 數(shù)字
\w 一個(gè)字母或數(shù)字
. 任意字符
* 表示任意個(gè)字符（包括0個(gè)）
+ 表示至少一個(gè)字符
? 表示0個(gè)或1個(gè)字符
{n, m} 表示n ~ m個(gè)字符
\s 匹配一個(gè)空格（也包括Tab等空白符）

進(jìn)階

要做更精確地匹配，可以用[]表示范圍，比如：

  • [0-9a-zA-Z\_]可以匹配一個(gè)數(shù)字、字母或者下劃線；
  • [0-9a-zA-Z\_]+可以匹配至少由一個(gè)數(shù)字、字母或者下劃線組成的字符串，比如'a100'，'0_Z'，'js2015'等等；
  • [a-zA-Z\_\$][0-9a-zA-Z\_\$]*可以匹配由字母或下劃線、開頭，后接任意個(gè)由一個(gè)數(shù)字、字母或者下劃線、組成的字符串，也就是JavaScript允許的變量名；
  • [a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精確地限制了變量的長(zhǎng)度是1-20個(gè)字符（前面1個(gè)字符+后面最多19個(gè)字符）。

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

^表示行的開頭，^\d表示必須以數(shù)字開頭。

$表示行的結(jié)束，\d$表示必須以數(shù)字結(jié)束。

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

RegExp

有了準(zhǔn)備知識(shí)，我們就可以在JavaScript中使用正則表達(dá)式了。

JavaScript有兩種方式創(chuàng)建一個(gè)正則表達(dá)式：

第一種方式是直接通過/正則表達(dá)式/寫出來，第二種方式是通過new RegExp('正則表達(dá)式')創(chuàng)建一個(gè)RegExp對(duì)象。

兩種寫法是一樣的：

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

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

注意，如果使用第二種寫法，因?yàn)樽址霓D(zhuǎn)義問題，字符串的兩個(gè)\\實(shí)際上是一個(gè)\。

先看看如何判斷正則表達(dá)式是否匹配：

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

RegExp對(duì)象的test()方法用于測(cè)試給定的字符串是否符合條件。

切分字符串

用正則表達(dá)式切分字符串比用固定的字符更靈活，請(qǐng)看正常的切分代碼：

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

嗯，無法識(shí)別連續(xù)的空格，用正則表達(dá)式試試：

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

無論多少個(gè)空格都可以正常分割。加入,試試：

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

再加入;試試：

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

分組

除了簡(jiǎn)單地判斷是否匹配之外，正則表達(dá)式還有提取子串的強(qiáng)大功能。用()表示的就是要提取的分組（Group）。比如：

^(\d{3})-(\d{3,8})$分別定義了兩個(gè)組，可以直接從匹配的字符串中提取出區(qū)號(hào)和本地號(hào)碼：

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

如果正則表達(dá)式中定義了組，就可以在RegExp對(duì)象上用exec()方法提取出子串來。

exec()方法在匹配成功后，會(huì)返回一個(gè)Array，第一個(gè)元素是正則表達(dá)式匹配到的整個(gè)字符串，后面的字符串表示匹配成功的子串。

exec()方法在匹配失敗時(shí)返回null。

提取子串非常有用。來看一個(gè)更復(fù)雜的例子：

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']

這個(gè)正則表達(dá)式可以直接識(shí)別合法的時(shí)間。但是有些時(shí)候，用正則表達(dá)式也無法做到完全驗(yàn)證，比如識(shí)別日期：

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

對(duì)于'2-30'，'4-31'這樣的非法日期，用正則還是識(shí)別不了，或者說寫出來非常困難，這時(shí)就需要程序配合識(shí)別了。

貪婪匹配

需要特別指出的是，正則匹配默認(rèn)是貪婪匹配，也就是匹配盡可能多的字符。舉例如下，匹配出數(shù)字后面的0：

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

由于\d+采用貪婪匹配，直接把后面的0全部匹配了，結(jié)果0*只能匹配空字符串了。

必須讓\d+采用非貪婪匹配（也就是盡可能少匹配），才能把后面的0匹配出來，加個(gè)?就可以讓\d+采用非貪婪匹配：

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

全局搜索

var r1 = /test/g;
// 等價(jià)于:
var r2 = new RegExp('test', 'g');

全局匹配可以多次執(zhí)行exec()方法來搜索一個(gè)匹配的字符串。當(dāng)我們指定g標(biāo)志后，每次運(yùn)行exec()，正則表達(dá)式本身會(huì)更新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，直到結(jié)束仍沒有匹配到

全局匹配類似搜索，因此不能使用/^...$/，那樣只會(huì)最多匹配一次。

正則表達(dá)式還可以指定i標(biāo)志，表示忽略大小寫，m標(biāo)志，表示執(zhí)行多行匹配。

練習(xí)

請(qǐng)嘗試寫一個(gè)驗(yàn)證Email地址的正則表達(dá)式。版本一應(yīng)該可以驗(yàn)證出類似的Email：

'use strict';

var re = /^ $/;
//答案：var re = /^[a-zA-Z0-9\.]+@\w+\.\w+$/;
// 測(cè)試:
var
    i,
    success = true,
    should_pass = ['someone@gmail.com', 'bill.gates@microsoft.com', 'tom@voyager.org', 'bob2015@163.com'],
    should_fail = ['test#gmail.com', 'bill@microsoft', 'bill%gates@ms.com', '@voyager.org'];
for (i = 0; i < should_pass.length; i++) {
    if (!re.test(should_pass[i])) {
        console.log('測(cè)試失敗: ' + should_pass[i]);
        success = false;
        break;
    }
}
for (i = 0; i < should_fail.length; i++) {
    if (re.test(should_fail[i])) {
        console.log('測(cè)試失敗: ' + should_fail[i]);
        success = false;
        break;
    }
}
if (success) {
    console.log('測(cè)試通過!');
}

版本二可以驗(yàn)證并提取出帶名字的Email地址：

'use strict';

var re = /^ $/;
//答案：var re=/^<([\w\s]+)>\s+([\w]+@\w+\.\w+)$/;
// 測(cè)試:
var r = re.exec('<Tom Paris> tom@voyager.org');
if (r === null || r.toString() !== ['<Tom Paris> tom@voyager.org', 'Tom Paris', 'tom@voyager.org'].toString()) {
    console.log('測(cè)試失敗!');
}
else {
    console.log('測(cè)試成功!');
}

JSON

JSON是JavaScript Object Notation的縮寫，它是一種數(shù)據(jù)交換格式。

道格拉斯·克羅克福特長(zhǎng)期擔(dān)任雅虎的高級(jí)架構(gòu)師，自然鐘情于JavaScript。他設(shè)計(jì)的JSON實(shí)際上是JavaScript的一個(gè)子集。在JSON中，一共有這么幾種數(shù)據(jù)類型：

  • number：和JavaScript的number完全一致；

  • boolean：就是JavaScript的true或false；

  • string：就是JavaScript的string；

  • null：就是JavaScript的null；

  • array：就是JavaScript的Array表示方式——[]；

  • object：就是JavaScript的{ ... }表示方式。

以及上面的任意組合。

并且，JSON還定死了字符集必須是UTF-8，表示多語言就沒有問題了。為了統(tǒng)一解析，JSON的字符串規(guī)定必須用雙引號(hào)""，Object的鍵也必須用雙引號(hào)""。

由于JSON非常簡(jiǎn)單，很快就風(fēng)靡Web世界，并且成為ECMA標(biāo)準(zhǔn)。幾乎所有編程語言都有解析JSON的庫，而在JavaScript中，我們可以直接使用JSON，因?yàn)镴avaScript內(nèi)置了JSON的解析。

把任何JavaScript對(duì)象變成JSON，就是把這個(gè)對(duì)象序列化成一個(gè)JSON格式的字符串，這樣才能夠通過網(wǎng)絡(luò)傳遞給其他計(jì)算機(jī)。

如果我們收到一個(gè)JSON格式的字符串，只需要把它反序列化成一個(gè)JavaScript對(duì)象，就可以在JavaScript中直接使用這個(gè)對(duì)象了。

序列化

讓我們先把小明這個(gè)對(duì)象序列化成JSON格式的字符串：

'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);

要輸出得好看一些，可以加上參數(shù)，按縮進(jìn)輸出：

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

結(jié)果：

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

第二個(gè)參數(shù)用于控制如何篩選對(duì)象的鍵值，如果我們只想輸出指定的屬性，可以傳入Array：

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

結(jié)果：結(jié)果：

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

還可以傳入一個(gè)函數(shù)，這樣對(duì)象的每個(gè)鍵值對(duì)都會(huì)被函數(shù)先處理：

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定義一個(gè)toJSON()的方法，直接返回JSON應(yīng)該序列化的數(shù)據(jù)：

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}'

反序列化

拿到一個(gè)JSON格式的字符串，我們直接用JSON.parse()把它變成一個(gè)JavaScript對(duì)象：

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()還可以接收一個(gè)函數(shù)，用來轉(zhuǎn)換解析出的屬性：

'use strict';

var obj = JSON.parse('{"name":"小明", "age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同學(xué)';
    }
    return value;
});
console.log(JSON.stringify(obj)); //{name: '小明同學(xué)', age: 14}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容