JavaScript學(xué)習(xí)筆記(四)

主要源于廖雪峰老師的JavaScript教程

標準對象

1. 簡介

在JavaScript的世界中,一切都是對象。
為了區(qū)分對象的類型,可以用typeof操作符獲取對象的類型,它總是返回一個字符串:

typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'

可見: number、string、boolean、functionundefined有別于其他的類型。特別注意null的類型是objectArray的類型也是object,我們無法用typeof區(qū)分出null、Array和通常意義上的object--{}。

  • 包裝對象
    除了上述的類型外,還提供了包裝對象,熟悉Java的小伙伴很清楚intInteger的這種曖昧關(guān)系。
    number、booleanstring都有包裝對象。包裝對象用new創(chuàng)建:
var n = new Number(123); // 123,生成了新的包裝類型
var b = new Boolean(true); // true,生成了新的包裝類型
var s = new String('str'); // 'str',生成了新的包裝類型
#雖然包裝對象看上去和原來的值一模一樣,顯示出來也是一模一樣,但他們的類型已經(jīng)變?yōu)閛bject了!所以,包裝對象和原始值用===比較會返回false:
typeof new Number(123); // 'object'
new Number(123) === 123; // false

typeof new Boolean(true); // 'object'
new Boolean(true) === true; // false

typeof new String('str'); // 'object'
new String('str') === 'str'; // false

所以閑的蛋疼也不要使用包裝對象!尤其是針對string類型!??!

如果我們在使用Number、BooleanString時,沒有寫new會發(fā)生什么情況?

此時,Number()、BooleanString()被當做普通函數(shù),把任何類型的數(shù)據(jù)轉(zhuǎn)換為numberbooleanstring類型(注意不是其包裝類型):

var n = Number('123'); // 123,相當于parseInt()或parseFloat()
typeof n; // 'number'

var b = Boolean('true'); // true
typeof b; // 'boolean'

var b2 = Boolean('false'); // true! 'false'字符串轉(zhuǎn)換結(jié)果為true!因為它是非空字符串!
var b3 = Boolean(''); // false

var s = String(123.45); // '123.45'
typeof s; // 'string'

總結(jié)一下,有這么幾條規(guī)則要遵守:

不要使用new Number()、new Boolean()new String()創(chuàng)建包裝對象;

parseInt()parseFloat()來轉(zhuǎn)換任意類型到number

String()來轉(zhuǎn)換任意類型到string,或者直接調(diào)用某個對象的toString()方法;

通常不必把任意類型轉(zhuǎn)換為boolean再判斷,因為可以直接寫if (myVar) {...};

typeof操作符可以判斷出number、booleanstring、functionundefined;

判斷Array要使用Array.isArray(arr);

判斷null請使用myVar === null

判斷某個全局變量是否存在用typeof window.myVar === 'undefined';

函數(shù)內(nèi)部判斷某個變量是否存在用typeof myVar === 'undefined'

最后有細心的同學(xué)指出,任何對象都有toString()方法嗎?nullundefined就沒有!確實如此,這兩個特殊值要除外,雖然null還偽裝成了object類型。

更細心的同學(xué)指出,number對象調(diào)用toString()報SyntaxError:
123.toString(); // SyntaxError
遇到這種情況,要特殊處理一下:
123..toString(); // '123', 注意是兩個點!
(123).toString(); // '123'

2. Date

要獲取系統(tǒng)當前時間,用:

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

創(chuàng)建一個指定日期和時間的Date對象,可以用:

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

JavaScript的Date對象月份值從0開始,牢記0=1月,1=2月,2=3月,……,11=12月。
第二種創(chuàng)建指定日期和時間的方法是解析一個符合ISO 8601格式的字符創(chuàng):

var d = Date.parse('2015-06-24T19:49:22.875+08:00');
d; // 1435146562875
#但它返回的不是Date對象,而是一個時間戳。不過有時間戳就可以很容易地把它轉(zhuǎn)換為一個Date:
var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
d.getMonth(); // 5

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

  • 時區(qū)
    Date對象表示的時間總是按瀏覽器所在時區(qū)顯示的,不過我們既可以顯示本地時間,也可以顯示調(diào)整后的UTC時間:
var d = new Date(1435146562875);
d.toLocaleString(); // '2015/6/24 下午7:49:22',本地時間(北京時區(qū)+8:00),顯示的字符串與操作系統(tǒng)設(shè)定的格式有關(guān)
d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT',UTC時間,與本地時間相差8小時

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

要獲取當前時間戳,可以用:

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

3. RegExp

\d{3}\s+\d{3,8} //匹配任意個空格隔開的帶區(qū)號的電話號碼
[0-9a-zA-Z\_]  //可以匹配一個數(shù)字、字母或者下劃線
[0-9a-zA-Z\_]+ //可以匹配至少由一個數(shù)字、字母或下劃線組成的字符串
[a-zA-Z\_\$][0-9a-zA-Z\_\$]*  //可以匹配由字母或下劃線、$開頭,后接任意個由一個數(shù)字、字母或者下劃線、$組成的字符串,也就是JavaScript允許的變量名;
[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}  //更精確地限制了變量的長度是1-20個字符(前面1個字符+后面最多19個字符)

  1. 如果直接給出字符,就是精確匹配。
  2. \d可以匹配一個數(shù)字
  3. \w可以匹配一個字母或數(shù)字
  4. .可以匹配任意字符
  5. *表示任意個字符(0到多個)
  6. +表示至少一個字符(1到多個)
  7. ?表示0個或者1個字符(0或1個)
  8. {n}表示n個字符
  9. {n, m}表示n-m個字符
  10. \s可以匹配一個空格(也包括Tab等空白符)
  11. \來轉(zhuǎn)義-\等特殊字符,例如:\- \\,但是在字符串中,由于轉(zhuǎn)義問題,字符串的兩個\\實際上是一個\
  12. []表示范圍
  13. A|B可以匹配A或B
  14. ^表示行的開頭,^\d表示必須以數(shù)字開頭
  15. $表示行的結(jié)束,\d$表示必須以數(shù)字結(jié)束
  • RegExp
    創(chuàng)建方式:
    一種是直接通過/正則表達式/寫出來,一種通過new RegExp('正則表達式')。RegExp對象的test()方法用于測試給定的字符串是否符合條件
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
  • 切分字符串
    用正則表達式切分字符串比用固定的字符更靈活,
#正常的切分
'a b    c'.split(' ');//['a', 'b', '', '', 'c']
#無法識別連續(xù)的空格,用正則表達式:
'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']
  • 分組
    除了簡單的判斷是否匹配之外,正則表達式還有提取字串的強大功能。用()表示的就是要提取的分組。比如:^(\d{3})-(\d{3,8})$分別定義了兩個分組,可以直接從匹配的字符串中提取出區(qū)號和本地號碼:
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。

#提取子串非常有用。來看一個更兇殘的例子:
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'這樣的非法日期,用正則還是識別不了,或者說寫出來非常困難,這時就需要程序配合識別了。
  • 貪婪匹配
    正則默認的是貪婪匹配,也就是匹配盡可能多的字符。例如,匹配出數(shù)字后面的0:
var re = /^(\d+)(0*)$/;
re.exec('102300');//['102300', '102300', '']
#由于\d+采用貪婪匹配,直接把后面的0全部匹配了,結(jié)果0*只能匹配空字符串了。

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

var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']
  • 全局搜索
    JavaScript的正則表達式還有幾個特殊的標志,最常用的是g,表示上次匹配到的最后索引:
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é)束仍沒有匹配到

全局匹配類似搜索,因此不能使用/^...$/,那樣只會最多匹配一次。
正則表達式還可以制定i標志,表示忽略大小寫,m標志,表示執(zhí)行多行匹配。

4. JSON

輕量級的數(shù)據(jù)交換格式。一共有這么幾種數(shù)據(jù)類型:

  • number
  • boolean
  • string
  • null
  • array: []
  • object: {....}
    字符集必須是UTF-8,json的字符串必須用雙引號,Object的鍵也必須用雙引號。
    1.序列化JSON.stringify()
    2.反序列化JSON.parse()
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • ??引用類型的值(對象)是引用類型的一個實例。 ??在 ECMAscript 中,引用類型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)...
    霜天曉閱讀 1,219評論 0 1
  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,565評論 0 13
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,679評論 0 4
  • 夜深了,揉開惺忪的眼,窗外夜色單薄,沉寂一片。 有人說放棄需要勇氣,有人說堅持就是品位,放棄,是自己選擇的路自己要...
    阿土127閱讀 392評論 0 0
  • 1.包命名,單詞全部小寫 域名反寫+項目名稱+模塊名稱,例如: 2.接口和類命名, 單詞首字母大寫(大駝峰規(guī)則)以...
    CharlesCheng閱讀 789評論 0 1

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