JS面向對象筆記

時間 2019-11-10

原文原文鏈接

1、js零散筆記javascript

0、匿名函數定之後直接調用：(function(numA, numB) { alert(numA + numB); })(3,4);//彈窗7html

一、js中函數就是對象，對象就是函數。arguments表示函數的參數集合java

二、js中方法直接調用爲函數，用new調用爲對象。JavaScript中沒有類的語法，是用函數閉包模擬出來的正則表達式

三、js中給對象動態添加屬性示例：數組

//定義一個函數 
function Person(){

}

//一、直接調用函數名，就只是單純的表示調用函數
Person();

//二、是用new，表示建立了一個對象，js是動態語言，能夠給對象動態添加屬性和方法
var per = new Person();
per.name = "大錘";    //給per對象動態添加屬性name
per.age = 26;         //給per對象動態添加屬性age
per.sayHi = function() { alert("hello"); }//給per對象動態添加方法sayHi

//調用per對象的屬性和方法
alert(per.name);//或者alert(per['name']);
per.sayHi();

四、js中支持this關鍵字，經過this關鍵字爲對象的屬性賦值閉包

function Person(name, age) {
     this.name = name;    //給Person添加name屬性，再把參數name的值賦值給該屬性
     this.age = age;
     this.sayHi = function () { alert("My name is " + this.name + ", I'm old " + this.age); }
}

//調用
var per = new Person("大錘", 26);
per.sayHi();//彈窗。。。。。

function Person(name, age)能夠看作是聲明構造函數，name、age這些屬性也是動態添加的，new至關於建立了函數的一個實例app

五、String對象方法學習dom

String對象是JavaScript原生提供的三個包裝對象之一，用來生成字符串的包裝對象。函數

length屬性：獲取字符串的字符個數（不管中文字符仍是英文字符都算1個字符）
charAt(index)方法：獲取指定索引位置的字符（索引從0開始）
indexOf('字符串', startIndex)方法：獲取指定字符串中第一次出現的位置，startIndex表示從第幾個開始搜索
split('分隔符', limit): 根據分隔符將一個字符串返回爲一個數組。limit表示要返回的數組的最大長度（可自定義）
substr(startIndex, len) : 從startIndex開始，截取len個字符
substring(startIndex, stopIndex): 從startIndex開始，截取到stopIndex位置（不包括stopIndex所在的字符）
toUpperCase(): 轉換大寫
toLowerCase(): 轉換小寫
concat方法用於鏈接兩個字符串，返回一個新字符串，不改變原字符串
slice方法用於從原字符串取出子字符串並返回，不改變原字符串。
match()、replace()、search()方法和正則表達式有關
.....

//一、String對象構造函數使用
console.log(new String('abc'));
//String {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}


//二、String對象做爲工具方法使用，將任意類型的值轉化爲字符串
console.log(String(true)); //將布爾類型true轉成字符串"true"
console.log(5);    //將數字5轉成字符串"5"


//三、String.fromCharCode(): String對象提供的靜態方法（即定義在對象自己，而不是定義在對象實例的方法），該方法的參數是一系列Unicode碼點，返回對應的字符串

console.log(String.fromCharCode(104, 101, 108, 108, 111, 97)); //helloa
//另外該方法不支持Unicode碼點大於0xFFFF的字符，即傳入的參數不能大於0xFFFF
//舉例說明Unicode碼點0x20BB7實際上只能取到0x0BB7, 由於碼點大於0xFFFF的字符佔用四個字節，而JavaScript只支持兩個字節的字符。這種狀況下，須要把0x20BB7拆成兩個字符表示
console.log(String.fromCharCode(0x20BB7));  //ஷ
console.log(String.fromCharCode(0xD842, 0xDFB7)); //吉



//String實例對象的屬性方法
//四、length屬性，返回字符串的長度
console.log('abc'.length);  //3

//五、charAt(); 返回指定位置的字符，參數是從0開始編號的位置
var a = new String('abc');
console.log(a.charAt(1));  //b
console.log(a.charAt(a.length-1)); //c
console.log(a[1]);    //b 

//六、charCodeAt(); //返回給定位置字符的Unicode碼點（十進制表示），至關於String.fromCharCode()的你操做
console.log('abc'.charCodeAt(1)); //98
String.fromCharCode(98); //b

//七、concat() : 用於鏈接兩個字符串，返回一個新字符串，不改變原字符串
var s1 = 'abc', s2 = 'efg';
var s3 = s1.concat(s2);
var s4 = s1.concat(s2, '^_^', 'zzz');
console.log(s3);    //abcefg
console.log(s4); //abcefg^_^zzz

//八、slice() : 用於從原字符串取出字符串並返回，不改變原字符串
//它的第一個參數是子字符串的開始位置， 第二個參數是子字符串的結束位置（不含該位置）
var a = 'abcdefgzzzZDG';
console.log(a.slice(1, 3)); //bc
console.log(a.slice(2)); //cdefgzzzZDG  //省略第二個參數，字符串一直到原字符串結束
//若是參數是負數，表示從結尾開始倒數計算的位置，即該負值加上字符串長度
console.log(a.slice(1, -6)); //bcdefg
console.log(a.slice(-2, -5)); //不存在，提取爲空
console.log(a.slice(-5, -2)); //zzZ

//九、substring() : 從原字符串取出子字符串並返回，不改變原字符串。它與slice做用相同，建議優先使用slice
//substring(): 第一個參數表示子字符串的開始位置, 第二個位置表示結束位置
var a = 'abcdefgZABC';
console.log(a.substring(1, 3)); //bc
console.log(a.substring(1));  //bcdefgZABC
//若是第二個參數大於第一個參數，substring方法會自動更換兩個參數的位置
console.log(a.substring(6, 3)); //def
//若是參數是負數，substring方法會自動將負數轉爲0
console.log(a.substring(-1)); //abcdefgZABC
console.log(a.substring(4, -1)); //abcd

//十、substring() : 從原字符串取出子字符串並返回，不改變原字符串
//第一個參數是子字符串的開始位置, 第二個參數是子字符串的長度
console.log(a.substr(1, 3)); //bcd
console.log(a.substr(6)); //gZABC
//若是第一個參數是負數，表示倒數計算的字符位置；第二個參數是負數，將自動轉爲0
console.log(a.substr(-5)); // gZABC
console.log(a.substr(4, -1)); //提取出空字符串

//十一、indexOf()， lastIndexOf()
var a = 'abcabcdf';
console.log(a.indexOf('c')); //2
console.log(a.lastIndexOf('c')); //5

//十二、trim() ： 去除字符串兩端的空格，返回一個新字符串，不改變原字符串
console.log('    hello    '.trim()); //hello

//1三、toLowerCase(), toUpperCase()
console.log('ABCDefgHIJ'.toLowerCase()); //abcdefghij
console.log('abcdEFGhijk'.toUpperCase()); //ABCDEFGHIJK

//1四、localeCompare() : 用於比較兩個字符串。它返回一個整數，若是小於0，表示第一個字符串小於第二個字符串；若是等於0，表示二者相等；若是大於0，表示第一個字符串大於第二個字符串。
console.log('apple'.localeCompare('Appaaa'));  //1
console.log('apple'.localeCompare('apple'));   //0
console.log('apple'.localeCompare('appZZ'));   //-1

//1五、match() : match方法用於肯定原字符串是否匹配某個子字符串，返回一個數組，成員爲匹配的第一個字符串。若是沒有找到匹配，則返回null。
console.log('cat-bat-gat-cat-at-fat'.match('cat')); //["cat", index: 0, input: "cat-bat-gat-cat-at-fat"]

//1六、search(): 用法等同於match, 可是返回值爲匹配的第一個位置。若是沒有找到匹配，則返回-1
console.log('cat, bat, fat, gat'.search('fat')); //10 

//1七、replace(): replace方法用於替換匹配的子字符串，通常狀況下只替換第一個匹配（除非使用帶有g修飾符的正則表達式）。
console.log('aaa'.replace('a', 'BBB')); //BBBaa

//1八、split(): 按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組。
console.log('a-b-c'.split('-')); //(3) ["a", "b", "c"]
console.log('a-b-c-d'.split('-', 2)); //(2) ["a", "b"]

六、擴展方法：經過類對象的prototype設置擴展方法工具

//給string對象擴展一個方法addSign(sign);
String.prototype.addSign = function (sign) {

        if (!sign) {//若是sign是空
              sign = "^_^";
        }
        return sign + this + sign;
}

//調用測試
var str = "chui";
alert(str.addSign());  //彈出內容：^_^chui^_^
alert(str.addSign("***"));//彈出內容：***chui***

2、Array數組

Array經常使用方法

　　a、添加元素到第一個：unshift()

　　b、添加元素到最後一個：push()

　　c、刪除第一個元素：shift()

　　d、刪除最後一個元素：pop()

　　e、刪除指定元素：splice()

舉例：var aa = [11, ‘aa’, 518, ‘cc’]; aa.splice(1, 1); //刪除第二個元素

　　f、添加元素到指定位置

舉例：var aa = [‘aa’, ‘cc’, 55]; aa.splice(1, 0, ‘dd’, ‘ee’); //將元素’dd’, ‘ee’ 添加到索引1位置

　　g、遍歷元素：map(), forEach();

　　h、數組元素鏈接成字符串：join(), 數組之間的合併:concat()

　　i、查找元素索引：indexOf(), lastIndexOf()

　　j、部分元素提取：slice()

　　k、元素反轉: reverse()

　　l、元素排序: sort()

　　m、元素遍歷累計：reduce() , rightReduce()

　　n、數組元素過濾: filter()

Array.isArray方法用來判斷一個值是否爲數組。它能夠彌補typeof運算符的不足。

var a = [1, 2, 3];
console.log(typeof a) 
console.log(Array.isArray(a))

/** 打印結果：
object
true
*/

Array的實例方法：

一、valueOf()，toString()

valueOf() : 返回數組自己；

　toString() : 返回數組的字符串形式

var a = [1, 2, 3];
console.log(a.valueOf());
console.log(a.toString());

/** 日誌
[1, 2, 3]
1,2,3
*/

二、push()

用於在數組的末端添加一個或多個元素，並返回添加新元素後的數組長度。該方法會改變原數組。

var a = []; 
a.push("one");
console.log(a);

a.push("two", 222, true, {});
console.log(a);

a.push([3, 8]);
console.log(a);

/** 日誌 ： 
["one"]
["one", "two", 222, true, Object]
["one", "two", 222, true, Object, Array(2)]
*/

合併兩個數組：

var a = [1, 2, 3];
var b = [4, 5, 6];

Array.prototype.push.apply(a, b);
// 或者 a.push.apply(a, b)
// 上面兩種寫法等同於
//a.push(4, 5, 6)

console.log(a);   // [1, 2, 3, 4, 5, 6]

3 、pop()

　　用於刪除數組的最後一個元素，並返回該元素。該方法會改變原數組

var a = ['a', 'b', 'c'];
console.log(a);  // ["a", "b", "c"]

a.pop(); 
console.log(a);   // ["a", "b"]

a.pop();
a.pop();
console.log(a);  // []

a.pop();  //空數組使用pop方法，不會報錯，返回undefined。
console.log(a);  // []

四、join()

　　方法以參數做爲分隔符，將全部數組成員組成一個字符串返回。若是不提供參數，默認用逗號分隔

var a = [1, 'aaa', 33, 88, {"name":"大錘"}];
console.log(a.join());        //1,aaa,33,88,[object Object]
console.log(a.join(' | '));  // 1 | aaa | 33 | 88 | [object Object]
console.log(a.join('^_^'));  // 1^_^aaa^_^33^_^88^_^[object Object]

五、concat()

　　用於多個數組的合併。它將新數組的成員，添加到原數組的尾部，而後返回一個新數組，原數組不變。

var a = [1, 2, 3];
var b = [4, 5, 6];
var c = a.concat(b);

console.log(a);   //[1, 2, 3]
console.log(b);  //[4, 5, 6]
console.log(c);  //[1, 2, 3, 4, 5, 6]
 
c = c.concat(7, 8, 'hello');
console.log(c);   //[1, 2, 3, 4, 5, 6, 7, 8, "hello"]
c = c.concat(9, ['大錘', 88]);
console.log(c);   //[1, 2, 3, 4, 5, 6, 7, 8, "hello", 9, "大錘", 88]

6 shift()

　　用於刪除數組的第一個元素，並返回該元素。該方法會改變原數組

var a = [1, 2, [1,2], {}];
console.log(a);  //[1, 2, Array(2), Object]

a.shift();
a.shift();
console.log(a);   // [Array(2), Object]

a.shift();
a.shift();
a.shift();
console.log(a);  // []

　　push和shift結合使用，就構成了「先進先出」的隊列結構（queue）。

7 unshift()

　　用於在數組的第一個位置添加元素，並返回添加新元素後的數組長度。該方法會改變原數組　　

var a = ['a', 'b', 'c'];
console.log(a);    //["a", "b", "c"]

a.unshift('xxx');
console.log(a);     // ["xxx", "a", "b", "c"]

a.unshift('zzz', 'yyy');
console.log(a);    //["zzz", "yyy", "xxx", "a", "b", "c"]

8 reverse()

　　用於顛倒數組中元素的順序，返回改變後的數組。該方法將改變原數組。

var a = ['a', 'b', 'd'];
a.reverse();
console.log(a);   //["d", "b", "a"]

9 slice()

　　方法用於提取原數組的一部分，返回一個新數組，原數組不變。

var a = ['a', 88, 'b', 'zz', 22];

console.log(a.slice(1,3));   //[88, "b"]
console.log(a.slice(2, 1));   // []
console.log(a.slice(2, 4));  // ["b", "zz"]
console.log(a.slice(2));   //["b", "zz", 22]
console.log(a.slice());   //['a', 88, 'b', 'zz', 22]

slice方法的一個重要應用，是將相似數組的對象轉爲真正的數組:

var a = Array.prototype.slice.call({0:1, 1:2, 2:'aaa', length:3});
console.log(a);  //[1, 2, "aaa"]

10 splice()

　　用於刪除原數組的一部分紅員，並能夠在被刪除的位置添加入新的數組成員，返回值是被刪除的元素。該方法會改變原數組。

　　splice的第一個參數是刪除的起始位置，第二個參數是被刪除的元素個數。若是後面還有更多的參數，則表示這些就是要被插入數組的新元素

var a = [1, 'a', 'b', 'c', 'zzz', 88];
a.splice(2, 3);
console.log(a);   //[1, "a", 88]

//只傳入一個參數，表示從這個索引開始，後面全部刪除
a.splice(1);
console.log(a);  //[1]

//刪除的同時增長其餘元素
a.splice(1, 0, 'aaa', 'bbb', 888);
console.log(a);  //[1, "aaa", "bbb", 888]

11 sort()

　　對數組成員進行排序，默認是按照字典順序排序。排序後，原數組將被改變

var a = ['aaa', 'abc', 'kkk', 'eee', 'acc', 'bbb'];
console.log(a);  //["aaa", "abc", "kkk", "eee", "acc", "bbb"]

a.sort();
console.log(a);  //["aaa", "abc", "acc", "bbb", "eee", "kkk"]

sort方法不是按照大小排序，而是按照對應字符串的字典順序排序;

能夠自定義排序方式：

var a = [1, 2, 88, 33, 999, 666];
a.sort(function(v1, v2){
    return v1 - v2;
});
console.log(a);  //[1, 2, 33, 88, 666, 999]

a.sort(function(v1, v2){
    return v2 - v1;
});
console.log(a);  //[999, 666, 88, 33, 2, 1]



//對象自定義排序
var a = [
    {name:"大錘", age:30},
    {name:"張三", age:20},
    {name:"李四", age:40},
    {name:"王二", age:50},
    {name:"趙六", age:18},
];
a.sort(function(v1, v2){
    return v1.age - v2.age;
});

for (var i = 0; i < a.length; i++){
    console.log(a[i].name + ": " + a[i].age);
}
/** 日誌：
趙六: 18
張三: 20
大錘: 30
李四: 40
王二: 50
*/

12 map()

　　對數組的全部成員依次調用一個函數，根據函數結果返回一個新數組。

var a = [1, 2, 3];

var b = a.map(function(n){
    return n*n;
});
console.log(a);  //[1, 2, 3]
console.log(b);  //[1, 4, 9]


//方法接受一個函數做爲參數。該函數調用時，map方法會將其傳入三個參數，分別是當前成員、當前位置和數組自己。

var c = a.map(function(ele, index, arr){
    return ele * index;
});
console.log(c);  //[0, 2, 6]

　　map方法不只能夠用於數組，還能夠用於字符串，用來遍歷字符串的每一個字符。可是，不能直接使用，而要經過函數的call方法間接使用，或者先將字符串轉爲數組，而後使用。

//第一個中寫法
var a = Array.prototype.map.call('abc', function(x){
    return x.toUpperCase();
});
console.log(a);   //["A", "B", "C"]

//第二種寫法
var a = [].map.call('abc', function(x){
    return x.toUpperCase();
});
console.log(a);    //["A", "B", "C"]

//第三種寫法
var upper = function(x){
    return x.toUpperCase();
}
var a = Array.prototype.map.call('abc', upper);
console.log(a);   //["A", "B", "C"]

13 forEach()

forEach方法與map方法很類似，也是遍歷數組的全部成員，執行某種操做，可是forEach方法通常不返回值，只用來操做數據。若是須要有返回值，通常使用map方法。

　　forEach方法的參數與map方法一致，也是一個函數，數組的全部成員會依次執行該函數。它接受三個參數，分別是當前位置的值、當前位置的編號和整個數組。　

var a = [22, 33, 11, 88, 66];

//第一種寫法
a.forEach(function(ele, index, arr){
    console.log('a[' + index + '] = ' + ele + '; //' + arr[index]);
});


//第二種寫法
console.log('......第二種寫法.....');
function log(ele, index, arr){
    console.log('a[' + index + '] = ' + ele + '; //' + arr[index]);
}
a.forEach(log);

/** 打印日誌：
a[0] = 22; //22
a[1] = 33; //33
a[2] = 11; //11
a[3] = 88; //88
a[4] = 66; //66
......第二種寫法.....
a[0] = 22; //22
a[1] = 33; //33
a[2] = 11; //11
a[3] = 88; //88
a[4] = 66; //66
*/

　　forEach方法也能夠接受第二個參數，用來綁定回調函數的this關鍵字;

　　這個參數對於多層this很是有用，由於多層this一般指向是不一致的。

var out = [];

[1, 2, 3].forEach(function(elem) {
  this.push(elem * elem);
}, out);

console.log(out);  //[1, 4, 9]

var obj = {
  name: '張三',
  times: [1, 2, 3],
  print: function () {
    //第一個this指的是obj對象
    this.times.forEach(function (n) {
      console.log(this.name + ': ' + n);  //這個this指的是obj對象
    }, this);
  },
  print2: function(){
     this.times.forEach(function(n){
        console.log(this.name + ': ' + n);  //這個this指的是指向頂層對象window
      });
  }
};

/** 打印日誌：
.....print....
張三: 1
張三: 2
張三: 3
....print2....
: 1
: 2
: 3
*/

　　關於數組的for循環和forEach 對於關鍵字continue、break、return的支持

　　for循環裏支持continue、break、return關鍵字，continue進入下一個循環；break跳出循環；return直接返回再也不往下執行代碼；

　　forEach不支持continue和break（使用會運行報錯），支持return關鍵字；碰到return表示跳出當前循環，執行下一個循環；

function testOne(){
    var a = [1, 2, 3, 4, 5];

    console.log('... for -- continue ...');
    for (var i = 0; i < a.length; i++){

        if (i > 1 && i<3){
            continue;
        }
        console.log(a[i]);
    }

    console.log('... for -- break ...');
    for (var i = 0; i < a.length; i++){
        if (i > 1 && i<3){
            break;
        }
        console.log(a[i]);
    }

    console.log('... for -- return ...');
    for (var i = 0; i < a.length; i++){
        if (i > 1 && i<3){
            return;  //返回，後面的代碼再也不執行
        }
        console.log(a[i]);
    }

    console.log('.....testOne end.....');
}

function testTwo(){
    var a = [1, 2, 3, 4, 5];

    console.log('... forEach -- return ...');
    a.forEach(function(el, i){
        if (i > 1 && i<3){
            return;  //跳出當前循環，執行下一個循環，至關於for循環中的continue關鍵字效果
        }
        console.log(a[i]);
    });

    console.log('.....testTwo end.....');
}

testOne();
testTwo();

/** 打印日誌：
... for -- continue ...
2
5
.. for -- break ...
2
... for -- return ...
2
... forEach -- return ...
2
5
.....testTwo end.....
*/

14 filter()

filter方法的參數是一個函數，全部數組成員依次執行該函數，返回結果爲true的成員組成一個新數組返回。該方法不會改變原數組。

var a = [1, 2, 3, 4, 5];
var b = a.filter(function(ele){
    return ele > 3;
});

console.log(a);   // [1, 2, 3, 4, 5]
console.log(b);  //[4, 5]

15 some()，every()

　　這兩個方法相似「斷言」（assert），用來判斷數組成員是否符合某種條件。

　　它們接受一個函數做爲參數，全部數組成員依次執行該函數，返回一個布爾值。該函數接受三個參數，依次是當前位置的成員、當前位置的序號和整個數組。

　　some方法是隻要有一個數組成員的返回值是true，則整個some方法的返回值就是true，不然false。

var a = [1, 2, 3, 4, 5];
var b = a.some(function(ele, index, arr){
    return ele >= 3;
});
console.log(b);  //true

var c = a.every(function(ele, index, arr){
    return ele >= 3;
});
console.log(c);  //false

16 reduce()，reduceRight()

reduce方法和reduceRight方法依次處理數組的每一個成員，最終累計爲一個值。

　　它們的差異是，reduce是從左到右處理（從第一個成員到最後一個成員），reduceRight則是從右到左（從最後一個成員到第一個成員），其餘徹底同樣。　

　　這兩個方法的第一個參數都是一個函數。該函數接受如下四個參數。

　　1) 累積變量，默認爲數組的第一個成員

　　2）當前變量，默認爲數組的第二個成員

　　3）當前位置（從0開始）

　　4）原數組

　　這四個參數之中，只有前兩個是必須的，後兩個則是可選的。

var a = [1, 2, 3, 4, 5];
var b = a.reduce(function(x, y){
    console.log(x, y);
    return x + y;
});

console.log(b);

/** 日誌：
1 2
3 3
6 4
10 5
15
*/

　　利用reduce方法，能夠寫一個數組求和的sum方法。

Array.prototype.sum = function(){
    
    var tmp = this.reduce(function(partial, value){
        var num = partial + value;
        console.log(String(partial) + '+' + String(value) + '=' + num);
        return num;
    });
    
    console.log('tmp = ' + tmp);
    console.log(this);  //this指當前數組對象
    return tmp;
}

var result = [1, 2, 4, 8, 16, 32].sum();
console.log('result = ' + result);

/** 打印日誌：
1+2=3
3+4=7
7+8=15
15+16=31
31+32=63
tmp = 63
(6) [1, 2, 4, 8, 16, 32]
result = 63
*/

　　若是要對累積變量指定初值，能夠把它放在reduce方法和reduceRight方法的第二個參數。

[1, 2, 3, 4, 5].reduce(function(x, y){
  return x + y;
}, 10);
//25  //10+1+2+3+4+5=25

17 indexOf()，lastIndexOf()

indexOf方法返回給定元素在數組中第一次出現的位置，若是沒有出現則返回-1;

lastIndexOf方法返回給定元素在數組中最後一次出現的位置，若是沒有出現則返回-1;

var a = ['aaa', 'bbb', 'ccc', 'ddd', 'ccc', 'aaa'];
console.log(a.indexOf('aaa'));    //0
console.log(a.indexOf(2));        // -1
console.log(a.lastIndexOf('aaa'));    // 5

18 數組的鏈式使用

　　上面這些數組方法之中，有很多返回的仍是數組，因此能夠鏈式使用。

var users = [
  {name: 'tom', email: 'tom@example.com'},
  {name: 'peter', email: 'ttpeter@example.com'}
];

users
.map(function (user) {
  return user.email;
})
.filter(function (email) {
  return /^tt/.test(email);  //正則匹配出tt開頭的字符串
})
.forEach(alert);
//最後彈出ttpeter@example.com

3、數值、字符串、布爾值三大包裝對象

　　一、數組和函數本質上都是對象，就連三種原始類型的值——數值、字符串、布爾值——在必定條件下，也會自動轉爲對象，也就是原始類型的「包裝對象」。

　　二、所謂「包裝對象」，就是分別與數值、字符串、布爾值相對應的Number、String、Boolean三個原生對象。這三個原生對象能夠把原始類型的值變成（包裝成）對象。

var a = 123, b = 'abc', c = true;
console.log(typeof a);  //number
console.log(typeof b);    //string
console.log(typeof c);  //boolean

console.log(".............");

var v1 = new Number(a);
var v2 = new String(b);
var v3 = new Boolean(c);
console.log(typeof v1);   //object
console.log(typeof v2);   //object
console.log(typeof v3);      //object

console.log("*************");
console.log((v1===a) + ', ' + (v1==a));  //false, true
console.log((v2===b) + ', ' + (v2==b));  //false, true
console.log((v3===c) + ', ' + (v3==c));  //false, true

　　三、包裝對象實例可使用Object對象提供的原生方法，主要是valueOf方法和toString方法。

valueOf()方法返回包裝對象實例對應的原始類型的值;

　　　 toString()方法返回實例對應的字符串形式。

new Number(123).valueOf()  // 123
new String("abc").valueOf() // "abc"
new Boolean("true").valueOf() // true

new Number(123).toString() // "123"
new String("abc").toString() // "abc"
new Boolean("true").toString() // "true"

　　四、原始類型的值，能夠自動看成對象調用，即調用各類對象的方法和參數。這時，JavaScript引擎會自動將原始類型的值轉爲包裝對象，在使用後馬上銷燬

　　　　好比，字符串能夠調用length屬性，返回字符串的長度

var str = 'abc';
str.length // 3

// 等同於
var strObj = new String(str)
// String {
//   0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"
// }
strObj.length // 3

/**
上面代碼中，字符串abc的包裝對象有每一個位置的值、有length屬性、還有一個內部屬性[[PrimitiveValue]]保存字符串的原始值。這個[[PrimitiveValue]]內部屬性，外部是沒法調用，僅供ValueOf或toString這樣的方法內部調用。

這個臨時對象是隻讀的，沒法修改。因此，字符串沒法添加新屬性。
*/
str.x = 123;
str.x  //undefined

　　五、三種包裝對象還能夠在原型上添加自定義方法和屬性，供原始類型的值直接調用。

　　　　可是，這種自定義方法和屬性的機制，只能定義在包裝對象的原型上，若是直接對原始類型的變量添加屬性，則無效。

//好比，咱們能夠新增一個double方法，使得字符串和數字翻倍。
String.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

console.log('abc'.double()); //abcabc


Number.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

console.log((123).double()); //246

4、Number對象

　　一、Number對象是數值對應的包裝對象，能夠做爲構造函數使用，也能夠做爲工具函數使用　　

//一、Number構造函數
var a = new Number(1);
console.log(typeof a);  //object

//二、做爲工具函數，它能夠將任何類型的值轉爲數值
Number(true);  //1
Number('a');  //NaN

　　二、Number對象屬性

/**
Number.POSITIVE_INFINITY：正的無限，指向Infinity。
Number.NEGATIVE_INFINITY：負的無限，指向-Infinity。
Number.NaN：表示非數值，指向NaN。
Number.MAX_VALUE：表示最大的正數，相應的，最小的負數爲-Number.MAX_VALUE。
Number.MIN_VALUE：表示最小的正數（即最接近0的正數，在64位浮點數體系中爲5e-324），相應的，最接近0的負數爲-Number.MIN_VALUE。
Number.MAX_SAFE_INTEGER：表示可以精確表示的最大整數，即9007199254740991。
Number.MIN_SAFE_INTEGER：表示可以精確表示的最小整數，即-9007199254740991。
*/

console.log(Number.POSITIVE_INFINITY); // Infinity
console.log(Number.NEGATIVE_INFINITY); // -Infinity
console.log(Number.NaN) // NaN

console.log(Number.MAX_VALUE)  // 1.7976931348623157e+308
console.log(Number.MAX_VALUE < Infinity)  // true

console.log(Number.MIN_VALUE)   // 5e-324
console.log(Number.MIN_VALUE > 0)  // true

console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER) // -9007199254740991

　　三、Number 對象實例的方法

　　　　Number對象部署了本身的toString方法，用來將一個數值轉爲字符串形式;

toString方法能夠接受一個參數，表示輸出的進制。若是省略這個參數，默認將數值先轉爲十進制，再輸出字符串；

　　　　不然，就根據參數指定的進制，將一個數字轉化成某個進制的字符串。

console.log((10).toString());  //"10" 默認輸出十進制字符串
console.log((10).toString(2));  //"1010" 輸出二進制字符串
console.log((10).toString(8));  //「12」 輸出八進制字符串
console.log((10).toString(16)); //「a" 輸出十六進制字符串
console.log((0b1111).toString()); //二進制0b1111輸出十進制字符串 15
console.log((0xff).toString());  //十六進制輸出十進制字符串255

　　Number.prototype.toFixed(): toFixed方法用於將一個數轉爲指定位數的小數，返回這個小數對應的字符串。

console.log((10).toFixed(2)); //"10.00"
console.log((10.005).toFixed(2)); //"10.01"

　　Number.prototype.toExponential(): toExponential方法用於將一個數轉爲科學計數法形式。

console.log((10).toExponential());  // "1e+1"
console.log((10).toExponential(1)); // "1.0e+1"
console.log((10).toExponential(2)); // "1.00e+1"

console.log((1234).toExponential());  // "1.234e+3"
console.log((1234).toExponential(1)); // "1.2e+3"
console.log((1234).toExponential(2)); // "1.23e+3"

　　Number.prototype.toPrecision(): toPrecision方法用於將一個數轉爲指定位數的有效數字。

console.log((12.34).toPrecision(1)); // "1e+1"
console.log((12.34).toPrecision(2)); // "12"
console.log((12.34).toPrecision(3)); // "12.3"
console.log((12.34).toPrecision(4)); // "12.34"
console.log((12.34).toPrecision(5)); // "12.340"

//toPrecision方法的參數爲有效數字的位數，範圍是1到21，超出這個範圍會拋出RangeError錯誤。
//toPrecision方法用於四捨五入時不太可靠，跟浮點數不是精確儲存有關。

console.log((12.35).toPrecision(3)); // "12.3"
console.log((12.25).toPrecision(3)); // "12.3"
console.log((12.15).toPrecision(3)); // "12.2"
console.log((12.45).toPrecision(3)); // "12.4"

5、Math對象

Math是JavaScript的內置對象，提供一系列數學常數和數學方法。該對象不是構造函數，不能生成實例，全部的屬性和方法都必須在Math對象上調用

　　一、Math對象提供如下一些只讀的數學常數。

Math.E：常數e。
Math.LN2：2的天然對數。
Math.LN10：10的天然對數。
Math.LOG2E：以2爲底的e的對數。
Math.LOG10E：以10爲底的e的對數。
Math.PI：常數Pi。
Math.SQRT1_2：0.5的平方根。
Math.SQRT2：2的平方根。

console.log(Math.E); // 2.718281828459045
console.log(Math.LN2); // 0.6931471805599453
console.log(Math.LN10); // 2.302585092994046
console.log(Math.LOG2E); // 1.4426950408889634
console.log(Math.LOG10E); // 0.4342944819032518
console.log(Math.PI); // 3.141592653589793
console.log(Math.SQRT1_2); // 0.7071067811865476
console.log(Math.SQRT2); // 1.4142135623730951

　　二、方法

Math.abs()：絕對值
Math.ceil()：向上取整
Math.floor()：向下取整
Math.max()：最大值
Math.min()：最小值
Math.pow()：指數運算
Math.sqrt()：平方根
Math.log()：天然對數
Math.exp()：e的指數
Math.round()：四捨五入
Math.random()：隨機數

//一、絕對值
console.log(Math.abs(1));  //1
console.log(Math.abs(-1)); //1

//二、最大值，最小值
console.log(Math.max(88, 11, -9)); //88
console.log(Math.min(88, 11, -9)); //-9

//三、Math.floor方法接收一個參數，返回小於該參數的最大整數
console.log(Math.floor(3.2)); //3
console.log(Math.floor(-3.2)); //-4

//四、Math.ceil方法接收一個參數，返回大於該參數的最小整數
console.log(Math.ceil(3.2)); //4
console.log(Math.ceil(-3.2)); //-3

//五、Math.round 四捨五入
console.log(Math.round(3.2)); //3
console.log(Math.round(3.8)); //4
console.log(Math.round(-8.9)); //-9
console.log(Math.round(-8.2)); //-8

//六、Math.pow 返回第一個參數爲底數，第二個參數爲冪的指數值
console.log(Math.pow(2, 2)); //4
console.log(Math.pow(2, 4)); //16

//七、Math.sqrt 返回參數值的平方根。若是參數
console.log(Math.sqrt(4)); //2
console.log(Math.sqrt(-4)); //NaN
console.log(Math.sqrt(10)); //3.1622776601683795

//八、Math.log 返回以e爲底的天然對數值
console.log(Math.log(Math.E)); //1
console.log(Math.log(10));    //2.302585092994046

//九、Math.exp 返回常數e的參數次方
console.log(Math.exp(1)); //2.718281828459045
console.log(Math.exp(3)); //20.085536923187668

//十、Math.random()  : 返回0到1的一個僞隨機數，可能等於0，可是必定小於1
console.log(Math.random()); //0.3902195410235101
console.log(Math.round(Math.random()*100));//53

　　三、三角函數方法

Math.sin()：返回參數的正弦
Math.cos()：返回參數的餘弦
Math.tan()：返回參數的正切
Math.asin()：返回參數的反正弦（弧度值）
Math.acos()：返回參數的反餘弦（弧度值）
Math.atan()：返回參數的反正切（弧度值）

console.log(Math.sin(0)); // 0
console.log(Math.cos(0)); // 1
console.log(Math.tan(0)); // 0
console.log(Math.asin(1)); // 1.5707963267948966
console.log(Math.acos(1)); // 0

6、Date

　　一、new Date(milliseconds)

　　Date對象接受從1970年1月1日00:00:00 UTC開始計算的毫秒數做爲參數。這意味着若是將Unix時間戳（單位爲秒）做爲參數，必須將Unix時間戳乘以1000。

console.log(new Date(1885128188000)); //Wed Sep 26 2029 22:43:08 GMT+0800 (CST)
console.log(new Date(3600 * 24 * 1000));//Fri Jan 02 1970 08:00:00 GMT+0800 (CST)
console.log(new Date(3600*24*1000 + 3600*24*365*47*1000));//Wed Dec 21 2016 08:00:00 GMT+0800 (CST)

　　二、new Date(datestring)

　　Date對象還接受一個日期字符串做爲參數，返回所對應的時間。

console.log(new Date('2013-2-15'));
console.log(new Date('2013/2/15'));
console.log(new Date('02/15/2013'));
console.log(new Date('2013-FEB-15'));
console.log(new Date('FEB, 15, 2013'));
console.log(new Date('FEB 15, 2013'));
console.log(new Date('Feberuary, 15, 2013'));
console.log(new Date('Feberuary 15, 2013'));
console.log(new Date('15 Feb 2013'));
console.log(new Date('15, Feberuary, 2013'));
/** 打印結果：
Wed Sep 26 2029 22:43:08 GMT+0800 (CST)
Fri Jan 02 1970 08:00:00 GMT+0800 (CST)
Wed Dec 21 2016 08:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
*/

　　三、new Date(year, month [, day, hours, minutes, seconds, ms])

　　Date對象還能夠接受多個整數做爲參數，依次表示年、月、日、小時、分鐘、秒和毫秒。若是採用這種格式，最少須要提供兩個參數（年和月），其餘參數都是可選的，默認等於0。

　　由於若是隻使用「年」這一個參數，Date對象會將其解釋爲毫秒數。

　　各個參數的取值範圍以下。

year：四位年份，若是寫成兩位數，則加上1900
month：表示月份，0表示一月，11表示12月
date：表示日期，1到31
hour：表示小時，0到23
minute：表示分鐘，0到59
second：表示秒鐘，0到59
ms：表示毫秒，0到999

console.log(new Date(2013, 0)); //Tue Jan 01 2013 00:00:00 GMT+0800 (CST)
console.log(new Date(2013, 0, 0));//Mon Dec 31 2012 00:00:00 GMT+0800 (CST)
console.log(new Date(2013, 15, 0));//Mon Mar 31 2014 00:00:00 GMT+0800 (CST)
console.log(new Date(2013, 11, 32, 0, 18));//Wed Jan 01 2014 00:18:00 GMT+0800 (CST)
//2014年1月1號零點18分： 2013年12月份31天  + 1
console.log(new Date(2013, 13, 32, 0, 18)); //Tue Mar 04 2014 00:18:00 GMT+0800 (CST)

　　四、Date.parse()

Date.parse方法用來解析日期字符串，返回距離1970年1月1日 00:00:00的毫秒數。

console.log(Date.parse('January 26, 2011 13:51:50')); //1296021110000
console.log(Date.parse('Mon, 25 Dec 1995 13:30:00 GMT'));//819898200000
console.log(Date.parse('Mon, 25 Dec 1995 13:30:00 +0430'));//819882000000
console.log(Date.parse('2011-10-10'));//1318204800000
console.log(Date.parse('2011-10-10T14:48:00'));//1318229280000

　　五、get類方法

　　Date對象提供了一系列get*方法，用來獲取實例對象某個方面的值。

getTime()：返回距離1970年1月1日00:00:00的毫秒數，等同於valueOf方法。
getDate()：返回實例對象對應每月的幾號（從1開始）。
getDay()：返回星期幾，星期日爲0，星期一爲1，以此類推。
getYear()：返回距離1900的年數。
getFullYear()：返回四位的年份。
getMonth()：返回月份（0表示1月，11表示12月）。
getHours()：返回小時（0-23）。
getMilliseconds()：返回毫秒（0-999）。
getMinutes()：返回分鐘（0-59）。
getSeconds()：返回秒（0-59）。
getTimezoneOffset()：返回當前時間與UTC的時區差別，以分鐘表示，返回結果考慮到了夏令時因素。

var time = new Date(2013, 05, 18, 12, 32, 58);
console.log(time);//Tue Jun 18 2013 12:32:58 GMT+0800 (CST)
console.log(time.getTime()); //1371529978000
console.log(time.getDate());//18
console.log(time.getDay());//2
console.log(time.getYear());//113
console.log(time.getFullYear());//2013
console.log(time.getMonth());//5
console.log(time.getHours());//12
console.log(time.getMilliseconds());//0
console.log(time.getMinutes());//32
console.log(time.getSeconds());//58
console.log(time.getTimezoneOffset());//-480

　　六、set類方法

　　Date對象提供了一系列set*方法，用來設置實例對象的各個方面。

setDate(date)：設置實例對象對應的每月的幾號（1-31），返回改變後毫秒時間戳。
setYear(year): 設置距離1900年的年數。
setFullYear(year [, month, date])：設置四位年份。
setHours(hour [, min, sec, ms])：設置小時（0-23）。
setMilliseconds()：設置毫秒（0-999）。
setMinutes(min [, sec, ms])：設置分鐘（0-59）。
setMonth(month [, date])：設置月份（0-11）。
setSeconds(sec [, ms])：設置秒（0-59）。
setTime(milliseconds)：設置毫秒時間戳。

　　這些方法基本是跟get*方法一一對應的，可是沒有setDay方法，由於星期幾是計算出來的，而不是設置的。

　　另外，須要注意的是，凡是涉及到設置月份，都是從0開始算的，即0是1月，11是12月。

var time = new Date(2013, 05, 18, 12, 32, 58);
console.log(time);//Tue Jun 18 2013 12:32:58 GMT+0800 (CST)

//將日期日後推1000天
time.setDate(time.getDate() + 1000);
console.log(time);//Mon Mar 14 2016 12:32:58 GMT+0800 (CST)


//設置月份爲11月
time.setMonth(10);
console.log(time); //Mon Nov 14 2016 12:32:58 GMT+0800 (CST)

//將時間設置6小時後
time.setHours(time.getHours() + 6);
console.log(time);//Mon Nov 14 2016 18:32:58 GMT+0800 (CST)

7、正則表達式（Regular Expression)

一、正則匹配規則：字面量字符和元字符

　　大部分字符在正則表達式中，就是字面的含義，好比/a/匹配a，/b/匹配b。那麼它們就叫作「字面量字符」（literal characters）；

　　還有一部分字符具備特殊做用，這種字符叫元字符（metacharacters），主要有：

位置字符^和$ --> ^表示字符串開始位置；$表示字符串結束位置
方括號[] --> 一系列字符只須要匹配一個就ok，這一系列字符能夠放在方括號內
連字符- --> 連字符號主要和方括號一塊兒使用，連續字符選擇供選擇的字符簡寫，主要有a-z, A-Z, 0-9, 表示小寫字母a到z, 大寫字母A到Z, 數字0到9區間字符供選擇
脫字符^ --> 若是方括號內的第一個字符是[^]，則表示除了字符類之中的字符，其餘字符均可以匹配。好比，[^xyz]表示除了x、y、z以外均可以匹配
點字符. --> 點字符（.）匹配除回車（\r）、換行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）之外的全部字符；
小括號() --> 小括號裏面表示一個總體，須要總體匹配，通常用來分組匹配，和選擇符號|配合使用；
選擇符號| --> 豎線符號表示或關係
------------- 空格字符 -----------
\n 匹配換行鍵
\r 匹配回車鍵
\t 匹配製表符tab（U+0009）
\v 匹配垂直製表符（U+000B）
\f 匹配換頁符（U+000C）
----------- 預約義模式: 某些常見模式的簡寫方式 ---------
\d 匹配0-9之間的任一數字，至關於[0-9]
\D 匹配全部0-9之外的字符，至關於[^0-9]
\w 匹配任意的字母、數字和下劃線，至關於[A-Za-z0-9_]
\W 除全部字母、數字和下劃線之外的字符，至關於[^A-Za-z0-9_]
\s 匹配空格（包括製表符、空格符、斷行符等），相等於[\t\r\n\v\f]
\S 匹配非空格的字符，至關於[^\t\r\n\v\f]， [\S\s]指代一切字符
\b 匹配詞的邊界
\B 匹配非詞邊界，即在詞的內部
------ 重複類，使用到{}和量詞符號 -----
{} 模式的精確匹配次數，{n}表示剛好重複n次，{n,}表示至少重複n次，{n,m}表示重複很多於n次，很少於m次。
量詞符用來設定某個模式出現的次數
? 問號表示某個模式出現0次或1次，等同於{0,1}。
* 星號表示某個模式出現0次或屢次，等同於{0,}。
+ 加號表示某個模式出現1次或屢次，等同於{1,}。
------- 特殊字符 --------
\cX 表示Ctrl-[X]，其中的X是A-Z之中任一個英文字母，用來匹配控制字符
[\b] 匹配退格鍵(U+0008)，不要與\b混淆
\0 匹配null字符（U+0000）
\xhh 匹配一個以兩位十六進制數（\x00-\xFF）表示的字符
\uhhhh 匹配一個以四位十六進制數（\u0000-\uFFFF）表示的unicode字符

二、建立正則表達式的兩種方法：字面建立和構造方法

var regex = /xyz/i;
var regex2 = new RegExp('xyz', 'i');

console.log(regex.test('xyz'));  //true
console.log(regex2.test('xyz'));  //true
console.log(regex.test('xxx'));  //false
console.log(regex2.test('xxx')); //false

2.一、正則對象的屬性：

ignoreCase：返回一個布爾值，表示是否設置了i修飾符，該屬性只讀。
global：返回一個布爾值，表示是否設置了g修飾符，該屬性只讀。
multiline：返回一個布爾值，表示是否設置了m修飾符，該屬性只讀。
lastIndex：返回下一次開始搜索的位置。該屬性可讀寫，可是隻在設置了g修飾符時有意義。
source：返回正則表達式的字符串形式（不包括反斜槓），該屬性只讀。

var reg = /xyz/g;

console.log(reg.ignoreCase + ", " + reg.global + ", " + reg.multiline); //false, true, false
console.log(reg.lastIndex + ", " + reg.source);  //0, xyz

reg.test('abcxyzabcxyz');
console.log(reg.ignoreCase + ", " + reg.global + ", " + reg.multiline); //false, true, false
console.log(reg.lastIndex + ", " + reg.source);  //6, xyz

2.二、正則對象的方法：test() 和 exec()

正則對象的test方法返回一個布爾值，表示當前模式是否能匹配參數字符串

var r = /x/g;
var s = '_x_y_x_y';

console.log(r.lastIndex); //0

console.log(r.test(s)); //true
console.log(r.lastIndex); //2

console.log(r.test(s)); //true
console.log(r.lastIndex); //6

console.log(r.test(s)); //false
console.log(r.lastIndex); //0

正則對象的exec方法，能夠返回匹配結果。若是發現匹配，就返回一個數組，成員是每個匹配成功的子字符串，不然返回null

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;

console.log(r1.exec(s)); //["x", index: 1, input: "_x_x"]
console.log(r2.exec(s)); //null

exec方法的返回數組還包含如下兩個屬性：

input：整個原字符串
index：整個模式匹配成功的開始位置（從0開始計數）

若是正則表示式包含圓括號（即含有「組匹配」），則返回的數組會包括多個成員。第一個成員是整個匹配成功的結果，後面的成員就是圓括號對應的匹配成功的組。也就是說，第二個成員對應第一個括號，第三個成員對應第二個括號，以此類推。整個數組的length屬性等於組匹配的數量再加1。

var r = /a(b+)a/;
var arr = r.exec('_abba_aba_');

console.log(arr); //["abba", "bb", index: 1, input: "_abba_aba_"]
console.log(arr.index + ", " + arr.input);//1, _abba_aba_


var arr2 = r.exec('Y_Yabba_aba_Y');
console.log(arr2); //["abba", "bb", index: 3, input: "Y_Yabba_aba_Y"]
console.log(arr2.index + ", " + arr2.input);//3, Y_Yabba_aba_Y



//多個組匹配演示（多個括號）
var r = /a(b+)(c+)a/g;
var s = '_abca_abbca_abbcca_';
var arr = r.exec(s);

console.log(arr); //["abca", "b", "c", index: 1, input: "_abca_abbca_abbcca_"]

var arr2 = r.exec(s);
console.log(arr2); //["abbca", "bb", "c", index: 6, input: "_abca_abbca_abbcca_"]

var arr3 = r.exec(s);
console.log(arr3); //["abbcca", "bb", "cc", index: 12, input: "_abca_abbca_abbcca_"]

var arr4 = r.exec(s);
console.log(arr4); //null

2.三、字符串對象的方法之中，有4種與正則對象有關

match()：返回一個數組，成員是全部匹配的子字符串。
search()：按照給定的正則表達式進行搜索，返回一個整數，表示匹配開始的位置。
replace()：按照給定的正則表達式進行替換，返回替換後的字符串。
split()：按照給定規則進行字符串分割，返回一個數組，包含分割後的各個成員。

//一、String.prototype.match(): 字符串對象的match方法對字符串進行正則匹配，和正則對象的exec方法相似：匹配成功則返回一個數組，匹配失敗則返回null。 match()方法使得正則表達式的lastIndex無效（正則的lastIndex都是在g修飾符下才有效果）
var s = '_x_x';
var r1 = /x/;
var r2 = /y/;
var r3 = /x/g;

console.log(s.match(r1)); //["x", index: 1, input: "_x_x"]
console.log(s.match(r2));// null
console.log(s.match(r3));//["x", "x"]
console.log(r1.exec(s)); //["x", index: 1, input: "_x_x"]
console.log(r2.exec(s)); //null
console.log(r3.exec(s)); //["x", index: 1, input: "_x_x"]


s = '_x_xx_';
console.log(s.match(r1)); //["x", index: 1, input: "_x_xx_"]
console.log("r1.lastIndex: " + r1.lastIndex); //r1.lastIndex: 0
console.log(r1.exec(s)); //["x", index: 1, input: "_x_xx_"]
console.log(r1.lastIndex); //0
console.log(s.match(r3)); //["x", "x", "x"]
console.log("r3.lastIndex: " + r3.lastIndex); //r3.lastIndex: 0
console.log(r3.exec(s)); //["x", index: 1, input: "_x_xx_"]
console.log(r3.lastIndex); //2

//二、String.prototype.search(): 字符串對象的search方法，返回第一個知足條件的匹配結果在整個字符串中的位置。若是沒有匹配到，則返回-1
console.log('_x_x'.search(/x/)); //1
console.log('_x_x'.search(/y/)); //-1

//search方法會忽略g修飾符
var r = /x/g;
console.log('_x_x'.search(r)); //1
console.log(r.lastIndex); // 0


//三、String.prototype.replace(): 字符串對象的replace()方法能夠替換匹配的值。它接受兩個參數，第一個是搜索模式，第二個是替換的內容
//3.一、搜索模式若是不加g修飾符，就替換第一個匹配成功的值，不然替換全部匹配成功的值
console.log('aaa'.replace('a', 'b')); //baa
console.log('aaa'.replace(/a/, 'b')); //baa
console.log('aaa'.replace(/a/g, 'b'));//bbb

//3.二、replace方法的一個應用，就是消除字符串首尾兩端的空格
var str = '  dajiahao div.hao  ';
console.log(str); //  dajiahao div.hao  
console.log(str.replace(/^\s+|\s+$/g, ''));  //dajiahao div.hao

replace方法的第二個參數可使用美圓符號$，用來指代所替換的內容

$& 指代匹配的子字符串
$` 指代匹配結果前面的文本
$' 指代匹配結果後面的文本
$n 指代匹配成功的第n組內容，n是從1開始的天然數
$$ 指代美圓符號$

//3.三、replace方法的第二個參數可使用美圓符號$， 用來指代所替換的內容
/*
$& 指代匹配的子字符串。
$` 指代匹配結果前面的文本。
$' 指代匹配結果後面的文本。
$n 指代匹配成功的第n組內容，n是從1開始的天然數。
$$ 指代美圓符號$。
*/

//$1對應匹配的hello, $2對應匹配的world
console.log('hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')); //world hello

//$&對應匹配結果bbb, $`對應匹配結果前面的文本Aa, $'對應匹配結果後面的文本CDF
console.log('AabbbCDF'.replace('bbb', '[$\'-$&-$`]')); //Aa[CDF-bbb-Aa]CDF

//replace方法的第二個參數還能夠是一個函數
var result = '3 and 5'.replace(/[0-9]+/g, function(match){
    return 2 * match;
});
console.log(result); //6 and 10

result = 'I like basketball, football, swimming... yes, I do'.replace(/basketball|football|swimming/ig, function(match){
    return match.toUpperCase();
});
console.log(result); //I like BASKETBALL, FOOTBALL, SWIMMING... yes, I do

//String.prototype.split(): 字符串對象split方法按照正則規則分割字符串，返回一個由分割後的各個部分組成的數組

var str = 'a, b,c, d,e';
//非正則分割
console.log(str.split(',')); //["a", " b", "c", " d", "e"]
//正則分割，去除多餘的空格
console.log(str.split(/, */));//["a", "b", "c", "d", "e"]
//指定返回數組的最大成員
console.log(str.split(/, */, 2)); //["a", "b"]


//正則默認是貪婪匹配
console.log('aaa*a*'.split(/a*/));//["", "*", "*"]
console.log('aaa**a*'.split(/a*/));//["", "*", "*", "*"]
//若是正則表達式帶有括號，則括號匹配的部分也會做爲數組成員返回
console.log('aaa*a*'.split(/(a*)/));//["", "aaa", "*", "a", "*"]

2.四、正則規則的測試代碼

//正則規則
//一、字面量字符: 大部分字符在正則表達式中，就是字面的含義
console.log(/dog/.test('my dog')); //true

//二、點字符. : 匹配除回車\r、換行\n、行分隔符\u202八、段分隔符\u2029之外的全部字符
console.log(/a.b/.test('afb')); //true
console.log(/a.b/.test('afab')); //false
console.log(/a.b/.test('a\rb')); //false


//三、位置字符^和$
//     ^ 表示字符串的開始位置
//   $ 表示字符串的結束位置
console.log(/^test/.test('test12...')); //true
console.log(/^test/.test('12test')); //false
console.log(/test$/.test('12test')); //true
console.log(/test$/.test('test12')); //false


//四、選擇符| :表示’或關係’，例cat|dog表示cat或dog
console.log(/11|22/.test('911'))//true
console.log(/11|22/.test('922'));//true
console.log(/11|22/.test('912')); //false

//選擇符會包括它先後的多個字符，好比/ab|cd/指的是匹配ab或cd, 而不是指匹配b或者c。若是想修改這個行爲，可使用圓括號
console.log(/a( |\t)b/.test('a\tb')); //true
console.log(/a |\tb/.test(' b')); //false
console.log(/a |\tb/.test('\tb')); //true


//五、轉義符：正則表達式中那些有特殊含義的字符，若是要匹配他們自己，須要在他們前面加上反斜槓。好比匹配加號，就要寫成\+
console.log(/1+1/.test('1+1')); // false
console.log(/1\+1/.test('1+1')); //true

//六、方括號[]和脫字符^， 和連字符-
//有一系列字符可供選擇，只要匹配其中一個就能夠。全部可供選擇的字符放在方括號內，配合-和^使用
console.log(/[abc]/.test('hello, world')); //false
console.log(/[abc]/.test('apple')); //true

//脫字符^ 通常用在方括號內的第一個字符[^], 表示除了方括號中的字符，其餘字符均可以匹配，好比[^xyz]表示除了x、y、z以外均可以匹配
console.log(/[^xyz]/.test('hello world')); //true
console.log(/[^xyz]/.test('yellow')); //true
console.log(/[^xyz]/.test('xyzxxxyyz'));//false

//^注意1：若是方括號內沒有其餘字符，即只有[^]，就表示匹配一切字符，其中包括換行符，而點號.是不包含換行符的
var s = 'I love \n you';
console.log( /love.*you/.test(s) ); //false
console.log( /love[^]*you/.test(s) );//true

//^注意2：脫字符只有在字符類的[]第一個位置纔有特殊含義，不然就是字面含義
console.log(/[a^b]/.test('hello')); //false
console.log(/[a^b]/.test('hello^'));//true

//連字符-： 對於連續序列的字符，連字符-用來提供簡寫形式，表示字符的連續範圍，好比[abc]能夠寫成[a-c], [0123456789]能夠簡寫成[0-9], [A-Z]表示26個大寫字母
console.log(/a-z/.test('b')); //false
console.log(/[a-z]/.test('b')); //true
console.log(/[a-z]/.test('B')); //false
console.log(/[a-g]/.test('m')); //false


//七、預約義模式：某些常見模式的簡寫方式
/*
\d 匹配0-9之間的任一數字，至關於[0-9]。
\D 匹配全部0-9之外的字符，至關於[^0-9]。
\w 匹配任意的字母、數字和下劃線，至關於[A-Za-z0-9_]。
\W 除全部字母、數字和下劃線之外的字符，至關於[^A-Za-z0-9_]。
\s 匹配空格（包括製表符、空格符、斷行符等），相等於[\t\r\n\v\f]。
\S 匹配非空格的字符，至關於[^\t\r\n\v\f]。
\b 匹配詞的邊界。
\B 匹配非詞邊界，即在詞的內部。
*/
console.log( /\d/.test('a') ); //false
console.log( /\d/.test('8') ); //true
console.log( /\D/.test('8') ); //false
console.log( /\D/.test('a') ); //true
console.log( /\D/.test('\n') ); //true
console.log( /\w/.test('<_>') ); //true
console.log( /\w/.test('<>') ); //false
console.log( /\W/.test('abc') ); //false
console.log( /\W/.test('_') ); //false
console.log( /\W/.test('\n') ); //true
console.log( /\W/.test('^123') ); //true
console.log( /\W/.test('123') );//false
console.log( /\s/.test('\n\r') ); //true
console.log( /\s/.test('aa') );//false
console.log( /\S/.test('aa') );//true
console.log( /\S/.test('\n\r') );//false


//八、重複類：模式的精確匹配次數，使用大括號{}表示。{n}表示剛好重複n次， {n, }表示至少重複n次， {n,m}表示重複很多於n次，很少於m次
console.log( /lo{2}k/.test('look') ); //true
console.log( /lo{2}k/.test('lok') ); //false
console.log( /lo{2,5}k/.test('loook') );//true


//九、量詞符：量詞符用來設定某個模式出現的次數
/*
? 問號表示某個模式出現0次或1次，等同於{0, 1}。
* 星號表示某個模式出現0次或屢次，等同於{0,}。
+ 加號表示某個模式出現1次或屢次，等同於{1,}。
*/
console.log( /lo?k/.test('lk') ); //true
console.log( /lo?k/.test('look') );//false
console.log( /lo*k/.test('lk') ); //true
console.log( /lo*k/.test('looooook') ); //true
console.log( /lo+k/.test('lk') );//false
console.log( /lo+k/.test('loooook') );//true

//十、貪婪模式：正則模式匹配的時候，默認狀況下都是最大可能匹配，即匹配直到下一個字符不知足匹配規則爲止。這被稱爲貪婪模式。主要指量詞符+/*
console.log( 'aaabaa'.match(/a+/) ); //["aaa", index: 0, input: "aaabaa"]
console.log( 'aaabbcc'.match(/a+/) ); //["aaa", index: 0, input: "aaabbcc"]

//非貪婪模式：在正則模式結尾添加一個問號?，就把默認的貪婪模式改爲非貪婪模式：表示一旦條件知足，就不在往下匹配
console.log( 'aaabaa'.match(/a+?/) ); //["a", index: 0, input: "aaabaa"]


//十一、修飾符：修飾符（modifier)表示模式的附加規則，放在正則模式的最尾部。修飾符能夠單個使用，也能夠多個一塊兒使用
//g修飾符：表示全局匹配，加上它之後，正則對象匹配所有符合條件的結果，主要用於搜索和替換
var r = /b/;
var s = 'abba';
console.log( r.test(s) ); //true
console.log( r.test(s) ); //true
console.log( r.test(s) ); //true
//上面的正則模式不含g修飾符，每次都是從字符串頭部開始匹配。因此，連續作了三次匹配，都返回true

r = /b/g;
console.log( r.test(s) ); //true
console.log( r.test(s) ); //true
console.log( r.test(s) ); //false

//i修飾符：表示忽略大小寫
console.log( /abc/.test('ABC') ); //false
console.log( /abc/i.test('ABC') ); //true

//m修飾符：m修飾符表示多行模式，會修改^和$的行爲。默認狀況下（即不加m修飾符時），^和$匹配字符串的開始處和結尾處，加上m後，^和$還會匹配行首和行尾，即^和$會識別換行符\n
console.log( /world$/.test('hello world\n') ); // false
console.log( /world$/m.test('hello world\n') ); // true
console.log( /^b/m.test('a\nb') ); // true

組匹配測試

捕獲組

//組匹配
//一、正則表達式的括號表示分組匹配，括號中的模式能夠用來匹配分組的內容

console.log( /fred+/.test('fredd') ); //true
console.log( /(fred)+/.test('fredfred') ); //true
//fred+是匹配d字符{1,}, (fred)+是匹配字符串fred總體有多個

var arr = 'abcabc'.match(/(.)b(.)/);
console.log( arr ); //["abc", "a", "c", index: 0, input: "abcabc"]
//正則表達式/(.)b(.)/一共使用兩個括號，第一個括號捕獲a, 第二個括號捕獲c。 使用組匹配時，不宜同時使用g修飾符，不然match方法不會捕獲分組的內容
//在正則表達式內部，能夠用\n引用括號匹配的內容，n是從1開始的天然數，表示對應順序的括號

console.log( /y(..)(.)\2\1/.test('yabccab') );//true
//\2指第二個括號匹配的內容c， \1指第一個括號匹配的內容ab

console.log( /y((..)\2)\1/.test('yabababab') );//true
//\1指向外層括號，\2指向內層括號

//匹配網頁標籤
var tagName = /<([^>]+)>[^<]*<\/\1>/;
console.log( tagName.exec("<h1>Element</h1>") );//["<h1>Element</h1>", "h1", index: 0, input: "<h1>Element</h1>"]
//圓括號匹配尖括號之中的標籤，而\1就表示對應的閉合標籤

//匹配帶有屬性的標籤
var html = '<b class="hello">Hello</b><i>world</i>';
var tag = /<(\w+)([^>]*)>(.*?)<\/\1>/g;

var match = tag.exec(html);
console.log( match ); //["<b class="hello">Hello</b>", "b", " class="hello"", "Hello", index: 0, input: "<b class="hello">Hello</b><i>world</i>"]

match = tag.exec(html);
console.log( match );//["<i>world</i>", "i", "", "world", index: 26, input: "<b class="hello">Hello</b><i>world</i>"]

非捕獲組

//二、非捕獲組
// (?:x)稱爲非捕獲組（Non-capturing group), 表示不返回該組匹配的內容，即匹配的結果中不計入這個括號
//查看捕獲組和非捕獲組的區別
console.log( 'abc'.match(/(.)b(.)/) ); //["abc", "a", "c", index: 0, input: "abc"]
console.log( 'abc'.match(/(?:.)b(.)/) ); //["abc", "c", index: 0, input: "abc"]


console.log( /y((..)\2)\1/.test('yabababab') );//true
console.log( /y((?:..)\2)\1/.test('yabababab') );//false
//使用了非捕獲組，則\2組不存在了

//分解網址的正則表達式
// 正常匹配
var url = /(http|ftp):\/\/([^/\r\n]+)(\/[^\r\n]*)?/;
console.log( url.exec('http://google.com/') );
// ["http://google.com/", "http", "google.com", "/", index: 0, input: "http://google.com/"]

// 非捕獲組匹配
var url = /(?:http|ftp):\/\/([^/\r\n]+)(\/[^\r\n]*)?/;
console.log( url.exec('http://google.com/') );
// ["http://google.com/", "google.com", "/", index: 0, input: "http://google.com/"]

參考書籍：阮一峯之《JavaScript標準參考教程》

原文連接：http://www.cnblogs.com/tandaxia/p/4385746.html