JavaScript | 對象詳解

—————————————————————————————————————————————————————————

對象有哪些（導圖）

• 內建對象
  • 數據封裝對象
    • Object對象
    • Object.prototype
    • Array對象
    • Function對象

    基本包裝類型

    • Number對象
    • Boolean對象
    • String對象
  • 工具類對象
    • Math對象
    • Date對象
    • RegExp對象
  • 全局對象
    • Global對象
  • 錯誤對象
    • Error對象
• 自定義對象

註解：基本包裝類型

由於有了基本包裝類型，因此js中的基本類型值能夠被當作對象來訪問。

共同特徵：

• 每一個包裝類型都映射到同名的基本類型
• 在讀取模式下訪問基本類型值時，就會建立對應的基本包裝類型的一個對象，從而方便了數據操做
• 操做基本類型值的語句已經執行完畢，就會當即銷燬新建立的包裝對象

—————————————————————————————————————————————————————————

Object對象

• Object 對象是 Js 中全部對象的父級對象，咱們建立的全部對象都繼承於此

  方法：

  未歸類：

Object.create():	指定原型對象和屬性建立一個對象
Object.defineProperty():	給對象添加/修改一個屬性並指定該屬性的配置
Object.defineProperties():	在一個對象上添加或修改一個或者多個自有屬性，並返回該對象
Object.keys():	方法會返回一個由給定對象的全部可枚舉自身屬性的屬性名組成的數組，數組中屬性名的排列順序和使用for-in循環遍歷該對象時返回的順序一致(二者的主要區別是for-in還會遍歷除一個對象從其原型鏈上繼承到得可枚舉的屬性)
Object.getOwnPropertyNames():	返回一個由指定對象的全部自身屬性的屬性名（包括不可枚舉屬性）組成的數組
Object.getOwnPropertyDescriptor()：	返回指定對象上一個自有屬性對應的屬性描述符。(自有屬性指的是直接賦予該對象的屬性，不須要從原型鏈上進行查找的屬性）)
Object.getPrototypeOf():	返回指定對象的原型(也就是該對象內部屬性[[Prototype]]的值)

可擴展性方法：

內建對象和自定義對象是顯示可擴展的，宿主對象的可擴展性由JavaScript引擎定義。可擴展性的目的是爲了將對象鎖定，防止外界干擾，一般和對象的屬性的可配置的行與可寫性配合使用

Object.freeze():	凍結一個對象。凍結對象是指那些不能添加新的屬性，不能修改已有屬性的值，不能刪除已有屬性，以及不能修改已有屬性的可枚舉性、可配置性、可寫性的對象。也就是說這個對象永遠不能改變的 p.s. 隻影響對象自己，不影響從其原型繼承來的屬性。
Object.isFrozen():	判斷對象是否已經被凍結
Object.preventExtensions():	阻止對象擴展
Object.isExtensible():	檢測一個對象是否可擴展(是否能夠在它上面添加新的屬性)
Object.seal():	可讓一個對象密封，並返回被密封以後的對象。密封對象是指那些不能添加新的屬性、不能刪除已有屬性，以及不能修改已有屬性的可枚舉性、可配置性、可寫性，但可能能夠修改已有屬性的值的對象 p.s. 若是對象的存儲器屬性具備setter方法，存取器屬性將不受影響，仍能夠經過屬性賦值調用它們
Object.isSealed():	檢測一個對象是否被密封sealed

 

var obj = {};
// 檢測是否可擴展
console.log(Object.isExtensible(obj));
// 內建對象Date
var oTest = new Date();
console.log(Object.isExtensible(oTest));
oTest.x = 1;
console.log(oTest.x);
// 對象鎖定
oTest2 = Object.preventExtensions(oTest);
// 證實oTest2與oTest是同一對象,已經不可擴展
console.log(oTest2 === oTest);
console.log(Object.isExtensible(oTest2));
// 此時顯示y爲undefined未定義的
oTest2.y = 1;
console.log(oTest2.y);
// defineProperty方法會報錯,提示不可擴展
// Object.defineProperty(oTest2,'z',{value:1});
// *******************************************************************
// 封閉對象seal()
var oTest3 = { x: 1, y: 2 };
var oTest4 = Object.seal(oTest3);
// false不可擴展
console.log(Object.isExtensible(oTest3));
// true已經被封閉了
console.log(Object.isSealed(oTest3));
// 自身已有的屬性不受影響
oTest3.y = 55;
console.log(oTest3.y);
// 提示不能將新屬性定義爲訪問器屬性
// Object.defineProperty(object,'username',{
//     get:function(){
//         return 'this is a test';
//     }
// });
oTest3.z = 111;
console.log(oTest3.z);
// 已有屬性也不會被刪除
delete oTest3.x;
console.log(oTest3.x);
// 檢測屬性 configurable:false,不可配置
console.log(Object.getOwnPropertyDescriptor(oTest3, 'x'));
// *******************************************************************
// 凍結對象freeze()
console.log('freeze:');
var oTest5 = { x: 1, y: 2, z: 3 };
oTest6 = Object.freeze(oTest5);
// 凍結後檢測對象 writable:false,變成了只讀屬性
console.log(Object.getOwnPropertyDescriptor(oTest6, 'x'));
// 檢測是否已經被凍結
console.log(Object.isFrozen(oTest6));
// *******************************************************************
// 淺凍結
// 在對象中添加子對象,向子對象添加屬性
console.log('Shallow frozen:');
var oTest7 = {
    internal: {}
};
Object.freeze(oTest7);
oTest7.internal.x = 1;
console.log(oTest7.internal.x);
// 在這裏只凍結了oTest7的internal,internal對象沒有被凍結
console.log(Object.getOwnPropertyDescriptor(oTest7, 'internal'));
console.log(Object.getOwnPropertyDescriptor(oTest7.internal, 'x'));
// *******************************************************************
// 遞歸凍結,包括子對象所有凍結
console.log('Deep frozen:');

function deepFreeze(obj) {
    var prop, propKey;
    Object.freeze(obj);
    // 經過for循環來檢測是否爲子對象,並遞歸調用
    for (propKey in obj) {
        prop = obj[propKey];
        // 若是這個對象沒有私有屬性||類型不等於Object||已凍結
        // 則跳過 - 進入下一循環
        if (!obj.hasOwnProperty(propKey) || !(typeof prop === 'object') || Object.isFrozen(prop)) {
            continue;
        }
        deepFreeze(prop);
    }
}
var oTest8 = {
    internal: {
        x: 1
    }
}
deepFreeze(oTest8);
oTest8.internal.y = 2;
console.log(oTest8.internal.y);
console.log(Object.getOwnPropertyDescriptor(oTest8, 'internal'));
console.log(Object.getOwnPropertyDescriptor(oTest8.internal, 'x'));
console.log(Object.getOwnPropertyDescriptor(oTest8.internal, 'y'));
// *******************************************************************
// 凍結規則:
// 1.若是一個對象是可擴展的,那則是非凍結的,
// 2.一個不可擴展的對象同時也是一個凍結的對象
var oTest9 = {};
Object.preventExtensions(oTest9);
console.log(Object.isFrozen(oTest9));
// 3.空對象和非空對象對比,默認都是不被凍結的,可擴展的
var oTest10 = {};
var oTest11 = { x: 1 };
// 4.空對象禁止擴展後,是被凍結的
Object.preventExtensions(oTest10);
console.log('3:' + Object.isFrozen(oTest10));
// 5.非空對象禁止擴展後,不凍結
Object.preventExtensions(oTest11);
console.log('4:' + Object.isFrozen(oTest11));
// 6.非空對象刪除已有屬性後,凍結
delete oTest11.x;
console.log('5:' + Object.isFrozen(oTest11));
// 7.若是一個不可擴展的對象擁有一個可寫但不可配置的屬性,非凍結
// 8.若是一個不可擴展的對象擁有一個不可配置但可寫的屬性,非凍結
// 9.若是一個不可擴展的對象擁有一個訪問器屬性,非凍結
// 10.被凍結的對象一樣也是被密封的和不可擴展的

檢測對象已有屬性方法：

• in：包括原型上的
• hasOwnProperty() ： 僅檢測對象本身有的屬性

function foo()  {}
foo.prototype.z = 5;
var obj1 = new foo();
obj1.x = 1;
obj1.y = 2;
console.log('x' in obj1);
console.log('y' in obj1);
console.log('toString' in obj1);
console.log('nonono' in obj1);
console.log(obj1.hasOwnProperty('x'));
console.log(obj1.hasOwnProperty('z'));

—————————————————————————————————————————————————————————

Object.prototype

• 屬性： Object.prototype.constructor: 返回一個指向建立了該對象原型的函數引用

  方法：

Object.prototype.isPrototypeOf():	檢測一個對象是否存在於另外一個對象的原型鏈上
Object.prototype.propertyIsEnumerable():	檢測指定的屬性名是不是當前對象可枚舉的自身屬性
Object.prototype.toString():	返回一個表明該對象的字符串
Object.prototype.valueOf():	返回的詩this值，即對象自己

—————————————————————————————————————————————————————————

Array對象

Array對象圖解

• JavaScript 的數組由索引和值組成

• 索引便可以是正整數，也能夠是其餘類型，但其餘類型索引不算在數組長度內

• 當數組索引不連續時，又稱爲稀疏數組，但相比較連續數組來講，稀疏數組查找元素的速度較慢，未定義部分爲 undefined

方法：

檢測數組方法：

Array.isArray(value)

檢測value是否爲數組

轉換方法：

toString()	把數組轉換爲字符串，並返回結果。
toLocaleString()	把數組轉換爲本地數組，並返回結果。
valueOf()	返回數組對象的原始值。
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。

棧方法：

pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度。

隊列方法：

shift()	刪除並返回數組的第一個元素
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。

重排序方法：

reverse()	顛倒數組中元素的順序。
sort()	對數組的元素進行排序

操做方法：

concat()	鏈接兩個或更多的數組，並返回結果。
slice()	從某個已有的數組返回選定的元素
splice()	刪除元素，並向數組添加新元素。

迭代方法：

every()	若是該函數對每一項都返回true,則true
filter()	該函數返回true的項組成數組
forEach()	這個方法沒有返回值
map()	返回每次函數調用的結果組成的數組
some()	若是該函數的任一項返回true,則返回true

位置方法：

Array.indexOf()	從數組開頭向後查找
Array.lastIndexOf()	從數組末尾向前查找

其餘方法：

toSource()

返回該對象的源代碼。

歸併方法：

迭代數組的全部項，構建一個最終返回的值

Array.reduce()	從數組第一項開始，逐個遍歷到最後
Array.reduceRight()	從數組最後一項開始遍歷

如下是手冊中沒有的爲prototype中定義的方法

• Array.map()
• Array.filter()
• Array.reduce()
• Array.reduceRight()
• Array.some()
• Array.every()
• Array.indexOf()
• Array.lastIndexOf()
• Array.isArray()

數組基本操做及經常使用方法

// Array對象 - 數組
// 建立數組
var colors1 = new Array();
var colors2 = new Array(20); // 指定數組長度,默認爲undefined*20,長度20
console.log(colors1.length);
console.log(colors2.length);
var colors3 = new Array(3); // 若是傳參爲1個數字則默認爲指定長度
console.log(colors3);
var colors4 = new Array("1"); // 傳入非數值則爲數組內容
console.log(colors4);
var colors5 = ['1', 'aaa', 21, 3.33];
console.log(colors5);
var colors6 = []; // 空數組
console.log(colors6);
// p.s.不要使用如下形式建立數組,容易出現歧義,數組項數不肯定
// var arr = [1,2,]; // 2或3項
// var arr = [,,,,,]; // 5或6項

// *****************************************************************
// 利用length屬性也方便爲數組添加元素
console.log(colors5.length);
colors5[colors5.length] = "new1";
colors5[colors5.length] = "new2";
console.log(colors5);
colors5.length = 2; // 指定長度後若是比以前小,則會移除多餘的部分
console.log(colors5);
colors5.length = 10; // 擴大length,則填補undefined
console.log(colors5);

// 數組項的上限是4294967295
var colors7 = new Array(4294967295);
// var colors7 = new Array(4294967296); // RangeError: Invalid array length
console.log(colors7);

// *****************************************************************
// 數組中能夠存放全部的變量形式
var arr2 = [1, 2.3, null, true, false, undefined, [1, 2, 3, 4], { x: 1, y: 2, z: 3 }];
console.log(arr2);
console.log(arr2[6][1]);
console.log(arr2[7].y);
// 打印數組長度
console.log(arr2.length);
// 引用內容來建立數組
var num = 1;
var arr3 = [num, num + 1, num * 2];
console.log(arr3);

// 經過構造函數的方式
var arr5 = new Array;
// 多個參數時定義的是數組的內容
var arr6 = new Array(1, 2, 3);
console.log(arr6);

// 任何變量均可以做爲索引值,但只有非負整數做爲索引時長度纔會變化
var arr8 = new Array();
arr8[2.3] = 'a';
arr8[-2333] = 'b';
arr8['c'] = 'b';

// *****************************************************************
// 經過for in取出元素以及元素的索引
for (var i in arr8) {
    console.log(i + ":" + arr8[i]);
}
console.log(arr8);
console.log(arr8.length);
arr8[2] = 'd';
console.log(arr8);
console.log(arr8.length);
// 壓棧彈棧操做
var arr9 = new Array(1, 2, 3);
arr9.push(4, 5, 6, 7);
console.log(arr9);
console.log(arr9.length);
arr9.pop();
arr9.pop();
console.log(arr9);
console.log(arr9.length);
// 在首部加入元素
arr9.unshift(9, 10, 11, 12);
console.log(arr9);
// 首部彈出元素
arr9.shift();
console.log(arr9);
// 刪除元素,但刪除後長度不變
delete arr9[3];
console.log(arr9);
console.log(arr9.length);
// 稀疏數組遍歷
var arr10 = [1, 2, 3];
arr10[100] = 99;
// for-in遍歷集成下來的屬性
for (var i in arr10) {
    console.log(i);
}
// 在forEach()中定義函數體,
arr10.forEach(Test);

function Test(element, index, array) {
    console.log("array:" + array + " index:" + index + " element:" + element);
}

// *****************************************************************
// 檢測數組
// instanceof
// 缺點:假定只有一個全局執行環境,若是網頁包含多個框架,實際存在兩個以上不一樣的全局執行環境時,就有兩個以上不一樣版本的Array構造函數,若是從一個框架向另外一個框架傳入一個數組,那麼傳入的數組與第二個框架中原生建立的數組分別具備各自不一樣的構造函數
console.log(colors5 instanceof Array);
// isArray()方法
console.log(Array.isArray(colors2));

// *****************************************************************
// 轉換方法
// toString()
console.log(colors5.toString());
// valueOf()
console.log(colors5.valueOf());
alert(colors5.valueOf()); // alert使用valueOf方法時會在後臺調用toString()
alert(colors5);
// toLocaleString()
// 與toString()和valueOf()同樣能夠返回值
// 調用的同時會建立一個數組值的以逗號分隔的字符串,不一樣之處在於爲了取得每一項的值,調用的是每一項的toLoaclString()
var person1 = {
    toLocaleString: function() {
        return "111";
    },
    toString: function() {
        return "222";
    }
};
var person2 = {
    toLocaleString: function() {
        return "333";
    },
    toString: function() {
        return "444";
    }
};
var people = [person1, person2];
alert(people); // 默認調用的是toString()方法
alert(people.toString());
alert(people.toLocaleString());
// join() 使用不一樣的分隔符來構建字符串
console.log(colors5.join('||'))

// *****************************************************************
// 棧方法
colors5.push('aaa', 'bbb'); // 壓棧
console.log(colors5);
var item1 = colors5.pop(); // 彈棧
console.log(item1);
console.log(colors5);

// 隊列方法
var len = colors5.push('ccc', 'ddd'); // 壓棧
console.log(len);
var item2 = colors5.shift(); // 定位到首部並移除,返回移除的元素
console.log(item2);
console.log(colors5);
colors5.unshift('new'); // 在隊列頭部推入元素,能夠unshift(),pop()聯用模擬反向隊列
console.log(colors5);

// 經過.map方法返回新函數,在map方法中調用Trans函數,對數組中的每個元素進行替換操做
var arr = ['abc', 'bcd', 'cde'];
res = arr.map(Trans);

function Trans(x) {
    return x.replace(/c/g, '!').toUpperCase();
}
console.log(res);

// filter
var arr = [1, 3, 4, 5, 6, 6, 123, 6547, null, undefined, ""];
res = arr.filter(function(x) {
    return (x <= 10) && (x != null) && (x != "");
})
console.log(res);

// reduce做爲累加器,從左到右依次進行返回運算
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
res = arr.reduce(function(a, b) {
    return a - b;
})
console.log(res);
res = arr.reduce(function(a, b) {
    return a * b;
})
console.log(res);
// reduceRight從右往左
res = arr.reduceRight(function(a, b) {
    return a - b;
})
console.log(res);

// every函數檢測是否全部的元素都符合要求,有不符合的則返回false
var age = [12, 34, 55, 4];
res = age.every(function(x) {
    return x >= 18;
})
console.log(res);
// some檢測的是否有符合的,有符合的則返回true
var age = [12, 34, 55, 4];
res = age.some(function(x) {
    return x >= 18;
})
console.log(res);

// 索引
var arr = ['a','b','c','b','d','b','e'];
// 第一個索引位
res = arr.indexOf('b');
console.log(res);
// 最後一個索引位
res = arr.lastIndexOf('b');
console.log(res);
// 索引開始位置
res = arr.indexOf('b',3);
console.log(res);

—————————————————————————————————————————————————————————

Date對象

方法

建立日期

Date.parse()	解析一個字符串,返回所通過的毫秒數
Date.UTC()	解析一個字符串,返回所通過的毫秒數

獲取當前時間

Date.now()

返回當前時間的毫秒數

繼承的方法

toString()	把時間轉換爲字符串，並返回結果。不一樣瀏覽器結果不一樣
toLocaleString()	把時間轉換爲字符串，並返回結果。不一樣瀏覽器結果不一樣
valueOf()	不返回字符串，返回日期的毫秒錶示，能夠經過比較操做符來比較日期值

日期格式轉換

toDateString()	特定於實現的格式顯示星期幾、月、日和年
toTimeString()	特定於實現的格式顯示時、分、秒和時區
toLocaleDateString()	特定於地區的格式顯示星期幾、月、日和年
toLocaleTimeString()	特定於實現的格式顯示時、分、秒
toUTCString()	特定於實現的格式顯示完整的UTC日期
toGMTString()	與toUTCString()等價，爲了確保向後兼容，建議使用toUTCString

日期/時間組件方法

Date對象基本操做及經常使用方法

// 顯示當前時間
console.log(Date());
// 顯示毫秒數
var d = new Date(138555555550);
console.log(d);
// 顯示填入的時間
var d = new Date(2011, 1, 3);
console.log(d);
// 傳入月日
var d = new Date(10,25);
console.log(d);

// *********************************************************
// 建立日期
// Date.parse()方法解析一個字符串,返回所通過的毫秒數
console.log(Date.parse("2017-01-01"));  // 格式1
console.log(Date.parse("January 1,2017")); // 格式2
console.log(Date.parse("1/1/2017")); // 格式3
console.log(Date.parse("Tue May 25 2004 00:00:00 GMT-0700")); // 格式4
console.log(Date.parse("2004-05-25T00:00:00")); // 格式5
console.log(Date.parse("aaa")); // 對不能表示日期的字符串返回NaN
// Date.UTC()方法
console.log(Date.UTC(2000,0)); // 2000年1月,必傳的兩個參數
console.log(Date.UTC(2000,0,1,2,3,4,5)); // 2000年1月1日2點3分4秒5毫秒

// *********************************************************
// 經過Date.now()獲取當前時間
var start = Date.now();
// doSomething();
var stop = Date.now();
result = stop - start; // 經過兩次獲取當前時間相減獲得間隔時間

// p.s.不支持ES5的Date.now()方法的可使用以下
var start = +new Date();
// doSomething();
var stop = +new Date();
result = stop - start;

// *********************************************************
// 日期格式化
var curTime = new Date();
console.log(curTime);
console.log(curTime.toDateString());
console.log(curTime.toTimeString());
console.log(curTime.toLocaleDateString());
console.log(curTime.toLocaleTimeString());
console.log(curTime.toUTCString());
console.log(curTime.toGMTString());

—————————————————————————————————————————————————————————

Math對象

屬性

方法

abs(x)	返回數的絕對值。
acos(x)	返回數的反餘弦值。
asin(x)	返回數的反正弦值。
atan(x)	以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。
atan2(y,x)	返回從 x 軸到點 (x,y) 的角度（介於 -PI/2 與 PI/2 弧度之間）。
ceil(x)	對數進行上舍入。
cos(x)	返回數的餘弦。
exp(x)	返回 e 的指數。
floor(x)	對數進行下舍入。
log(x)	返回數的天然對數（底爲e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次冪。
random()	返回 0 ~ 1 之間的隨機數。
round(x)	把數四捨五入爲最接近的整數。
sin(x)	返回數的正弦。
sqrt(x)	返回數的平方根。
tan(x)	返回角的正切。
toSource()	返回該對象的源代碼。
valueOf()	返回 Math 對象的原始值。

—————————————————————————————————————————————————————————

RegExp對象

方法

匹配方法

exec()	捕獲組匹配
test()	一般匹配

實例屬性

• global 布爾值，表示是否設置了g標誌
• ignoreCase 布爾值，表示是否設置了i標誌
• lastIndex 整數，表示開始搜索下一個匹配項的字符位置，從0算起
• multiline 布爾值，表示是否設置了m標誌
• source 正則表達式的字符串表示，按照字面量形式而非傳入構造函數中的字符串模式返回

RegExp構造函數屬性

模式的侷限性 - 不支持的特性

• 匹配字符串開始和結尾的\A和\Z錨（但支持以 ^$來匹配字符串的首尾）
• 向後查找 lookbehind（但徹底支持向前查找 lookahead）
• 並集和交集類
• 原子組 atomic grouping
• Unicode 支持（單個字符除外 \uFFFF）
• 命名的捕獲組（但支持編號的捕獲組）
• s（single 單行）和x（free-spacing 無間隔）匹配模式
• 條件匹配
• 正則表達式註釋

基本操做

// 經過test()方法檢索字符串中的內容,返回true或false
var patt1 = new RegExp("r");
var res1 = patt1.test('this is javascript course');
console.log(res1);
// 另外一種形式
// 加上i表示忽略大小寫
patt2 = /Javascript/i;
res2 = patt2.test('this is javascript course');
console.log(res2);
// 是否包含[]中的字符
res3 = /[abc]/.test('Brlue');
// 加上^表示除了abc以外的
res4 = /[^abc]/.test('Brlue');
// 檢測是否包含數字
res5 = /[0-9]/.test('999');
// 檢測是否包含字母
res5 = /[a-z]/.test('999');
// 是否出現瞭如下幾個
res5 = /php|javascript|ios/.test('php');
console.log(res3);
console.log(res4);
console.log(res5);

// *************************************************************
// 屬性
var patt2 = /[abc]/i;
console.log(patt2.global);
console.log(patt2.ignoreCase);
console.log(patt2.lastIndex);
console.log(patt2.multiline);
console.log(patt2.source);

// *************************************************************
// exec()方法
// 專門爲捕獲組設計,接受一個參數(要應用模式的字符串),返回包含第一個匹配項信息的數組或null

// 在/mom( and dad( and baby)?)?/gi中包含兩個捕獲組,最內部的捕獲組匹配and baby,而包含它的捕獲組匹配and dad 或 and dad and baby
// 除了返回捕獲到的項以外,還返回兩個屬性input和index,分別爲檢測的字符串和索引位
var matches = /mom( and dad( and baby)?)?/gi.exec("mom and dad and baby");
console.log(matches);

var patt3 = /.at/;
var text = "cat,bat,sat,fat";
var matches = patt3.exec(text);
console.log(matches);
var patt3 = /.at/g; // 全局匹配下屢次執行,直到索引不到返回null
var matches;
do {
    matches = patt3.exec(text);
    console.log(matches);
}
while (matches);

// test()方法
// 如line 6 - 22

// *************************************************************
// 繼承的方法
var patt4 = new RegExp("/[abc]/", "gi");
console.log(patt4.toString());
console.log(patt4.toLocaleString());

// *************************************************************
// 構造函數屬性
var text = "this has been a short summer";
var pattern = /(.)hort/g;
// 長屬性名
if (pattern.test(text)) {
    console.log(RegExp.input);
    console.log(RegExp.leftContext);
    console.log(RegExp.rightContext);
    console.log(RegExp.lastMatch);
    console.log(RegExp.lastParen);
    console.log(RegExp.multiline);
}
// 短屬性名
if (pattern.test(text)) {
    console.log(RegExp.$_);
    console.log(RegExp["$`"]);
    console.log(RegExp["$'"]);
    console.log(RegExp["$&"]);
    console.log(RegExp["$+"]);
    console.log(RegExp["$*"]);
}

// *************************************************************
// 存儲輔助組 - 自動存放9個之內的匹配的捕獲組
if (pattern.test(text)) {
    console.log(RegExp.$1);
}

—————————————————————————————————————————————————————————

Function對象

• 函數是對象，函數名是指針

 

沒有重載：聲明瞭兩個同名函數，則後面的函數覆蓋前面的函數

屬性

內部屬性

• arguments - 包含傳入函數的全部參數

  arguments.callee - 指向擁有arguments的函數的指針，遞歸調用時代替函數名使用

• this - 引用的是函數據以執行的環境對象

其餘屬性

• caller - 保存調用當前函數的函數的引用
• length - 保存參數個數
• prototype - 保存全部實例方法

屬性使用方法及this詳解

// function.length
function fun1() {};

function fun2(var1) {};

function fun3(var1, var2) {};
console.log(fun1.length);
console.log(fun2.length);
console.log(fun3.length);

// *******************************************************
// arguments
function fun4(num1, num2) {
    console.log(this); // arguments
}

function callFun4(num1, num2) {
    console.log(arguments); // arguments爲參數數組
    console.log(this); // Window,callFun4是在全局環境下被調用
    return fun4.apply(arguments);
}
callFun4(10, 20);


// this - 指向的是調用它的上一級對象
var user1 = "222";

function fun5() {
    var user2 = "111";
    console.log(this.user1); // 222
    console.log(this.user2); // undefined
    console.log(this); // Window
}
fun5(); // fun5由window對象調用,因此this指向window

var oTest = {
    user: "333",
    fun6: function() {
        console.log(this.user); // 333 undefined
        console.log(this); // Object Window
    }
}
oTest.fun6(); // 在oTest中調用,this返回的就是Object
var callFun6 = oTest.fun6;
callFun6(); // this:Window

// 構造函數this
// 構造函數 new關鍵字改變this指向,指向構造函數fun7()
// new關鍵字會建立一個空的對象,而後自動調用一個apply()方法,將this指向這個空對象,這樣的話函數內部的this就會被這個空對象替代
function fun7(){
    this.user = "444";
    console.log(this); // fun7{user:"444";}
}
var callFun7 = new fun7();
console.log(callFun7.user); // 444

// 帶返回值的問題
function fun8(){
    this.user = "555";
    return {}; // 返回值是對象時,this指向返回的函數
    // return function(){};
    // return 1; // 返回其餘變量類型,則this正常指向fun8
    // return null; // 特殊的對象,指向fun8
}
var callFun8 = new fun8();
console.log(callFun8.user);
// p.s.嚴格模式下this默認不是Window而是undefined

方法

非繼承方法

 

call()	在特定做用於中調用函數，等於設置函數體內this對象的值，但須要明確列舉傳入的參數。擴大做用域
apply()	同上，但不須要逐個列舉傳入參數，一般用於直接傳入arguments對象或包含函數中先接收到的也是一個數組。擴大做用域
bind()	建立一個函數的實例，this值會綁定到傳給bind()函數的值

方法操做

"use strict";

// ****************************************************************
// call();
function fun1(num1, num2) {
    return num1 + num2;
}

function callFun1(num1, num2) {
    return fun1.call(this, num1, num2); // 使用call()方法下必須明確的傳入每個參數,
}
console.log(callFun1(10, 20));

// apply();
function fun2(num1, num2) {
    return num1 + num2;
}

function callFun2(num1, num2) {
    return fun2.apply(this, arguments); // 使用apply傳入this和arguments
}
console.log(callFun2(10, 20));

// call()和apply()擴展函數做用域
// 擴大做用域的好處:對象不須要與方法有任何耦合關係,不須要將sayColor放到oTest{}對象中再調用了
window.color = "red";
var oTest = { color: "blue" };

function sayColor() {
    console.log(this);
    console.log(this.color);
}
// sayColor(); 嚴格模式下沒法打印window.color
sayColor.call(this);
sayColor.call(window);
sayColor.call(oTest); // this指向oTest

// ****************************************************************
// bind() 方法
window.color2 = "yellow";
var oTest2 = {color:"green"};
function sayColor2(){
    console.log(this);
    console.log(this.color);
}
var objectSayColor = sayColor2.bind(oTest2);
objectSayColor();

—————————————————————————————————————————————————————————

String對象

字符方法

charAt()	返回某個位置的字符
charCodeAt()	返回某個位置的字符ASCII碼

字符串操做方法

concat()	字符串拼接
slice()	返回子串
substring()	同上，區別見操做
substr()	同上，區別見操做

字符串位置方法

indexOf()	從一個字符串中搜索給定的字符串，返回子串的位置，沒有子串返回-1，從頭開始
lastIndexOf()	同上，從尾開始

特殊方法

trim()	刪除前置及後綴全部空格，返回結果
localeCompare()	比較字符串，返回 1 或 0 或 -1
fromCharCode()	接收一或多個字符編碼轉化成字符串

字符串大小寫轉換

toLocaleLowerCase()	把字符串轉換爲小寫。
toLocaleUpperCase()	把字符串轉換爲大寫。
toLowerCase()	把字符串轉換爲小寫。
toUpperCase()	把字符串轉換爲大寫。

支持正則對象的模式匹配方法

match()	找到一個或多個正則表達式的匹配。
replace()	替換與正則表達式匹配的子串。
search()	檢索與正則表達式相匹配的值。
split()	把字符串分割爲字符串數組。

方法操做

"use strict";

// 建立方法
var str = new String("hello,world");
console.log(str);
console.log(str.length);

// 字符方法
console.log(str.charAt(1)); // 返回某個位置的字符
console.log(str.charCodeAt(1)); // 返回某個位置的字符ASCII碼

// 字符串操做方法
var str2 = str.concat("!", "hugh,dong"); // 字符串拼接
console.log(str2);
console.log(str2.slice(2)); // 返回n以後的子串
console.log(str2.substring(2)); // 同上
console.log(str2.substr(2)); // 同上
console.log(str2.slice(3, 7)); // 返回 a-b位的子串
console.log(str2.substring(3, 7)); // 同上
console.log(str2.substr(3, 7)); // 返回a位開始數長度b的子串
console.log(str2.slice(-3)); // 返回倒數n個
console.log(str2.substring(-3)); // 返回所有
console.log(str2.substr(-3)); // 返回倒數n個
console.log(str2.slice(3, -4)); // 返回 a-b位的子串
console.log(str2.substring(3, -4)); // 返回開頭a個
console.log(str2.substr(3, -4)); // 返回空串

// trim()
var str3 = "     a  a a   ";
var str4 = str3.trim();
console.log(str4);

// **********************************************************************
var myArr = new Array;
var str = 'this is a test hello ishello maizi';
var patt = /is/ig;
var i = 0;
while ((myArr[i] = patt.exec(str)) !== null) {
    console.log(i + 1 + ':' + myArr[i] + " " + patt.lastIndex);
    i++;
}

str = 'this is a testis';
patt = /is/ig;
var res = str.match(patt);
console.log(res);

res = str.search(patt);
console.log(res);

res = str.replace(patt, '!');
console.log(res);

// 將年月日替換爲月日年
str = '2017-06-04';
res = str.replace(/(\d{4})-(\d{2})-(\d{2})/, '$2-$3-$1');
console.log(res);

// 調用方法,將匹配到的內容替換成爲hugh+匹配內容大寫
str = 'this is a testis';
res = str.replace(/is/g, func);

function func(match) {
    return 'hugh' + match.toLocaleUpperCase();
}
console.log(res);

// split
// 將匹配到的字符串先後拆分
res = str.split(/\s+/);
console.log(res);

—————————————————————————————————————————————————————————

Number對象

屬性

• constructor - 返回對建立此對象的 Number 函數的引用。
• MAX_VALUE - 可表示的最大的數。
• MIN_VALUE - 可表示的最小的數。
• NaN - 非數字值。
• NEGATIVE_INFINITY - 負無窮大，溢出時返回該值。
• POSITIVE_INFINITY - 正無窮大，溢出時返回該值。
• prototype - 使您有能力向對象添加屬性和方法。

方法

toString()	把數字轉換爲字符串，使用指定的基數。
toLocaleString()	把數字轉換爲字符串，使用本地數字格式順序。
toFixed()	把數字轉換爲字符串，結果的小數點後有指定位數的數字。
toExponential()	把對象的值轉換爲指數計數法。
toPrecision()	把數字格式化爲指定的長度。
valueOf()	返回一個 Number 對象的基本數字值。

—————————————————————————————————————————————————————————

Boolean對象

基本類型和引用類型的布爾值區別

p.s. 建議不使用引用類型（Boolean對象）

	寫法	值	typeof判斷	instanceof Boolean判斷
基本類型	var b = false;	false	boolean	false
引用類型	var b = new Boolean();	使用布爾表達式建立時的值都轉換爲true， var falseObject = new Boolean(false); 此時falseObject的值爲true	object	true

—————————————————————————————————————————————————————————

Global對象

• Global 全局對象某種意義上是不存在的，實際上不屬於任何其餘對象的屬性和方法最終都是它的屬性和方法。如： isNaN(),isFinite(),parseInt(),parseFloat(),encodeURI(),encodeURIComponent()...

  eval()方法 - 執行值中的js代碼

  p.s. 解釋代碼字符串能力強大，也很危險，尤爲是在執行用戶輸入數據的狀況下，不然可能會形成代碼注入

  屬性

—————————————————————————————————————————————————————————

Error對象

一般使用try/catch/finally來捕獲Error錯誤

Error類型：EvalError / InternalError / RangeError / ReferenceError / SyntaxError / TypeError / URIError

try
{
    // 當調用不存在的notExists(),e.name和e.message存放的錯誤名稱和錯誤信息
    // notExists();
    var n = 0;
    if (n == 0)
    {
        // 手動拋出一個錯誤信息
        throw new Error('Throw an error message');
    }
}
catch (e)
{
    console.log(e.name);
    console.log(e.message);
}
finally
{
    // finally中的老是被調用
    console.log('i am in finally');
}

try
{
    notExists();
}
catch (e)
{
    // 判斷錯誤的實例化類型
    if (e instanceof EvalError)
        console.log('this is a EvalError');
    else if (e instanceof SyntaxError)
        console.log('this is a SyntaxError');
    else if (e instanceof ReferenceError)
        console.log('this is a ReferenceError');
    else
        console.log('An unknown errorr');
}
// 對Error對象重寫
function myError(msg)
{
    this.name = "myError'sname";
    this.message = msg || "myError'info";
}
// 經過Object.create()建立錯誤原型
myError.prototype = Object.create(Error.prototype);
myError.prototype.constructor = myError;
try
{
    throw new myError();
}
catch (e)
{
    console.log(e.name);
    console.log(e.message);
}

—————————————————————————————————————————————————————————

自定義對象

• 經過var obj = {} 對象字面量法
• 經過var obj = new Object()建立
• 經過函數構造建立對象

  p.s. 使用的時候經過new操做符獲得對象

  用構造器建立對象的時候能夠接收參數

  構造器函數的首字母最好大寫，區別其餘的通常函數

  • function Person(){}
  • var Persion = function(){}
  • 構造器屬性 (constructor property)
    • 當咱們建立對象的時候，實際上同時也賦予了該對象一種特殊的屬性，即構造器屬性
    • 這個構造器屬性其實是一個指向用於建立該對象的構造器函數的引用
  • 經過instanceof操做符能夠檢測一個對象是否由某個指定的函數構造器建立
• 經過 Object.create() 建立對象

/***********************************
 * 對象字面量
 ***********************************/
var oTest = {};
document.write(typeof oTest + "</br>");
var oTest2 = { x: 1, 'y': 2, "z": 3 };
document.write(oTest2.x + " " + oTest2.y + " " + oTest2.z + "</br>");
var oTest3 = {
    username: 'rog91222',
    passwd: '123123',
    person: {
firstname: "hugh",
lastname: "dong"
    },
    age: 20
}
document.write(oTest3.username + " " + oTest3.person.firstname + " " + oTest3.age + "</br>");
/***********************************
 * new Object()建立對象
 ***********************************/
var oTest4 = new Object();
/***********************************
 * 經過構造器函數的形式建立對象
 ***********************************/
function funcTest(num1, num2) {
    this.n1 = num1;
    this.n2 = num2;
}
var oTest5 = new funcTest(1, 2);
document.write(oTest5.n1 + " " + oTest5.n2 + "</br>");
// 經過instanceof檢測是否由函數構造器構造的
document.write(oTest5 instanceof funcTest);
document.write("<br>")
/***********************************
 * 經過Object.create()建立對象
 ***********************************/
var oTest6 = Object.create({ x: 1 });
// 不繼承任何方法
var oTest7 = Object.create(null);
// 建立一個普通的空對象
var oTest8 = Object.create(Object.prototype);