js溫故而知新5——學習廖雪峰的js教程

mayaohua 發布于2019-08-21 11:36 / 3242人閱讀

摘要：表示行的結束，表示必須以數字結束。用表示的就是要提取的分組。方法在匹配成功后，會返回一個，第一個元素是正則表達式匹配到的整個字符串，后面的字符串表示匹配成功的子串。貪婪匹配需要特別指出的是，正則匹配默認是貪婪匹配，也就是匹配盡可能多的字符。

對象

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"

1.包裝對象

除了這些類型外，JavaScript還提供了包裝對象。

number、boolean和string都有包裝對象。沒錯，在JavaScript中，字符串也區分string類型和它的包裝類型。包裝對象用new創建：

var n = new Number(123); // 123,生成了新的包裝類型
var b = new Boolean(true); // true,生成了新的包裝類型
var s = new String("str"); // "str",生成了新的包裝類型

雖然包裝對象看上去和原來的值一模一樣，顯示出來也是一模一樣，但他們的類型已經變為object了！所以，包裝對象和原始值用===比較會返回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、Boolean和String時，沒有寫new會發生什么情況？

此時，Number()、Boolean和String()被當做普通函數，把任何類型的數據轉換為number、boolean和string類型（注意不是其包裝類型）：

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

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

var b2 = Boolean("false"); // true! "false"字符串轉換結果為true！因為它是非空字符串！
var b3 = Boolean(""); // false

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

是不是感覺頭大了？這就是JavaScript特有的催眠魅力！

總結一下，有這么幾條規則需要遵守

不要使用new Number()、new Boolean()、new String()創建包裝對象；

用parseInt()或parseFloat()來轉換任意類型到number；

用String()來轉換任意類型到string，或者直接調用某個對象的toString()方法；

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

typeof操作符可以判斷出number、boolean、string、function和undefined；

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

判斷null請使用myVar === null；

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

函數內部判斷某個變量是否存在用typeof myVar === "undefined"。

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

更細心的同學指出，number對象調用toString()報SyntaxError：

123.toString(); // SyntaxError

遇到這種情況，要特殊處理一下：

123..toString(); // "123", 注意是兩個點！
(123).toString(); // "123"

2. Date

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, 毫秒數
now.getTime(); // 1435146562875, 以number形式表示的時間戳

如果要創建一個指定日期和時間的Date對象，可以用：

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

3.RegExp

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

"00d"可以匹配"007"，但無法匹配"00A"；

"ffffd"可以匹配"010"；

"ww"可以匹配"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可以匹配一個空格（也包括Tab等空白符），所以s+表示至少有一個空格，例如匹配" "，"		"等；

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"了.

4.創建一個正則表達式

第一種方式是直接通過/正則表達式/寫出來，第二種方式是通過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()方法用于測試給定的字符串是否符合條件。

5.切分字符串

用正則表達式切分字符串比用固定的字符更靈活，請看正常的切分代碼：

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

如果用戶輸入了一組標簽，下次記得用正則表達式來把不規范的輸入轉化成正確的數組。

6.分組 exec()

除了簡單地判斷是否匹配之外，正則表達式還有提取子串的強大功能。用()表示的就是要提取的分組（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。

7.貪婪匹配

需要特別指出的是，正則匹配默認是貪婪匹配，也就是匹配盡可能多的字符。舉例如下，匹配出數字后面的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，表示全局匹配，

正則表達式還可以指定i標志，表示忽略大小寫，m標志，表示執行多行匹配。

常用正則

（引用）常用正則表達式大全

云服務器 GPU云服務器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python視頻教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86922.html

js溫故而知新10(操作表單)——學習廖雪峰的js教程

摘要：用操作表單和操作是類似的，因為表單本身也是樹。因此，第二種方式是響應本身的事件，在提交時作修改可以在此修改的繼續下一步注意要來告訴瀏覽器繼續提交，如果，瀏覽器將不會繼續提交，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交。用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。 HTML表單的輸入控件主要有以下幾種：文本框，對應的，用于輸入文本； ...

simon_chen 2019-08-20 15:08 評論0 收藏0
js溫故而知新——學習廖雪峰的js教程

摘要：在設計時，有兩種比較運算符第一種是比較，它會自動轉換數據類型再比較，很多時候，會得到非常詭異的結果第二種是比較，它不會自動轉換數據類型，如果數據類型不一致，返回，如果一致，再比較。數據類型和變量數據類型計算機顧名思義就是可以做數學計算的機器，因此，計算機程序理所當然地可以處理各種數值。但是，計算機能處理的遠不止數值，還可以處理文本、圖形、音頻、視頻、網頁等各種各樣的數據，不同的數據...

taohonghui 2019-08-21 11:31 評論0 收藏0
js溫故而知新8(瀏覽器)——學習廖雪峰的js教程

摘要：對象不但充當全局作用域，而且表示瀏覽器窗口。對象有和屬性，可以獲取瀏覽器窗口的內部寬度和高度。對象表示當前頁面的信息。由于在瀏覽器中以形式表示為樹形結構，對象就是整個樹的根節點。這個行為由瀏覽器實現，主流瀏覽器均支持選項，從開始支持。瀏覽器目前主流的瀏覽器： IE 6~11：從IE10開始支持ES6標準； Chrome：基于Webkit內核，內置了非常強悍的JavaScript引...

charles_paul 2019-08-20 15:07 評論0 收藏0
js溫故而知新4——學習廖雪峰的js教程

摘要：你可能認為調用，和結果應該是，，，但實際結果是全部都是原因就在于返回的函數引用了變量，但它并非立刻執行。返回閉包時牢記的一點就是返回函數不要引用任何循環變量，或者后續會發生變化的變量。真的是看著很暈那閉包另一個需要注意的問題是，返回的函數并沒有立刻執行，而是直到調用了f()才執行。我們來看一個例子： function count() { var arr = []; ...

genefy 2019-08-21 11:35 評論0 收藏0
js溫故而知新2——學習廖雪峰的js教程

摘要：讓我們拆開寫小明正常結果單獨調用函數怎么返回了請注意，我們已經進入到了的一個大坑里。如果單獨調用函數，比如，此時，該函數的指向全局對象，也就是。函數 1. arguments JavaScript還有一個免費贈送的關鍵字arguments，它只在函數內部起作用，并且永遠指向當前函數的調用者傳入的所有參數。arguments類似Array但它不是一個Array： function fo...

Caizhenhao 2019-08-21 11:34 評論0 收藏0
js溫故而知新3——學習廖雪峰的js教程

摘要：例如，在一個中，刪掉偶數，只保留奇數，可以這么寫把一個中的空字符串刪掉，可以這么寫注意以下的版本沒有方法可見用這個高階函數，關鍵在于正確實現一個篩選函數。回調函數接收的回調函數，其實可以有多個參數。 1.map 由于map()方法定義在JavaScript的Array中，我們調用Array的map()方法，傳入我們自己的函數，就得到了一個新的Array作為結果： function po...

zhaot 2019-08-21 11:34 評論0 收藏0