使用 new 操做符後跟 Object 構造函數建立對象html
//正常模式 var person = new Object(); person.name = "Nicholas"; person.age = 29; //簡寫 var person = {}; //與 new Object()相同 person.name = "Nicholas"; person.age = 29;
使用對象字面量表示法建立對象前端
//正常模式 var person = { name : "Nicholas", age : 29 }; //屬性名也可使用字符串 var person = { "name" : "Nicholas", "age" : 29, 5 : true };
對象字面量也是向函數傳遞大量可選參數的首選方式java
function displayInfo(args) { var output = ""; if (typeof args.name == "string"){ output += "Name: " + args.name + "\n"; } if (typeof args.age == "number") { output += "Age: " + args.age + "\n"; } alert(output); } displayInfo({ name: "Nicholas", age: 29 }); displayInfo({ name: "Greg" });
訪問對象的方法:點表示法和方括號法ios
//點表示法 alert(person.name); //"Nicholas" //方括號法 alert(person["name"]); //"Nicholas"---正常 var propertyName = "name"; alert(person[propertyName]); //"Nicholas" ---使用變量 person["first name"] = "Nicholas"; //--包含會致使語法錯誤的字符,好比空格
概念正則表達式
數組的每一項能夠保存任何類型的數據,數組最多能夠包含 4 294 967 295 個項,超過這個上限值,就會發生異常express
建立數組的基本方式:Array 構造函數數組
var colors1 = new Array(); //空數組 var colors2 = new Array(20); //數組長度爲20 var colors3 = Array(3); //省略new操做符,效果同上 var colors4 = new Array('Grey'); // 建立一個包含 1 項,即字符串"Greg"的數組 var colors5 = Array('Grey'); // 省略new操做符,效果同上 var colors6 = new Array("red", "blue", "green"); //["red", "blue", "green"]
建立數組的基本方式:數組字面量表示法瀏覽器
var colors = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組 var names = []; // 建立一個空數組 var values = [1,2,]; // 不要這樣!這樣會建立一個包含 2 或 3 項的數組 var options = [,,,,,]; // 不要這樣!這樣會建立一個包含 5 或 6 項的數組
在讀取和設置數組的值時,要使用方括號並提供相應值的基於 0 的數字索引app
var colors = ["red", "blue", "green"]; // 定義一個字符串數組 alert(colors[0]); // 顯示第一項 colors[2] = "black"; // 修改第三項 colors[3] = "brown"; // 新增第四項
使用length訪問數組的長度dom
var colors = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組 var names = []; // 建立一個空數組 alert(colors.length); //3 alert(names.length); //0
使用length能夠設置數組的長度
var colors1 = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組 colors1.length = 4; alert(colors1[3]); //undefined var colors2 = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組 colors[colors2.length] = "black"; //(在位置 3)添加一種顏色 colors[colors2.length] = "brown"; //(在位置 4)再添加一種顏色 var colors3 = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組 colors3[99] = "black"; // (在位置 99)添加一種顏色 alert(colors3.length); // 100
檢測數組
instanceof
操做符:假定只有一個全局執行環境
if (value instanceof Array){ //對數組執行某些操做 }
Array.isArray()
方法
if (Array.isArray(value)){ //對數組執行某些操做 }
轉換方法
調用數組的 toString()方法會返回由數組中每一個值的字符串形式拼接而成的一個以逗號分隔的字符串,而
調用 valueOf()返回的仍是數組
var colors = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組 alert(colors.toString()); // red,blue,green alert(colors.valueOf()); // red,blue,green alert(colors); // red,blue,green ,等同於toString
toLocaleString()方法常常也會返回與 toString()和 valueOf()方法相同的值,但也不老是如此
var person1 = { toLocaleString : function () { return "Nikolaos"; }, toString : function() { return "Nicholas"; } }; var person2 = { toLocaleString : function () { return "Grigorios"; }, toString : function() { return "Greg"; } }; var people = [person1, person2]; alert(people); //Nicholas,Greg alert(people.toString()); //Nicholas,Greg alert(people.toLocaleString()); //Nikolaos,Grigorios
數組繼承的 toLocaleString()、toString()和 valueOf()方法,在默認狀況下都會以逗號分隔的字符串的形式返回數組項,而若是使用 join()方法,則可使用不一樣的分隔符來構建這個字符串。join()方法只接收一個參數,即用做分隔符的字符串,而後返回包含全部數組項的字符串。
var colors = ["red", "green", "blue"]; alert(colors.join(",")); //red,green,blue alert(colors.join()); //red,green,blue alert(colors.join(undefined)); //red,green,blue alert(colors.join("||")); //red||green||blue
若是數組中的某一項的值是 null 或者 undefined,那麼該值在 join()、toLocaleString()、toString()和 valueOf()方法返回的結果中以空字符串表示
var arr = [1,'red',undefined,null]; arr.join();//"1,red,," arr.toLocaleString() ;//"1,red,," arr.toString();////"1,red,," arr.valueOf();//[1, "red", undefined, null]
棧方法
push()方法:接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度
pop()方法:從數組末尾移除最後一項,減小數組的 length 值,而後返回移除的項
var colors = new Array(); // 建立一個數組 var count = colors.push("red", "green"); // 推入兩項 alert(count); //2 count = colors.push("black"); // 推入另外一項 alert(count); //3 var item = colors.pop(); // 取得最後一項 alert(item); //"black" alert(colors.length); //2
隊列方法
shift()方法:移除數組中的第一個項並返回該項,同時將數組長度減 1
var colors = new Array(); //建立一個數組 var count = colors.push("red", "green"); //推入兩項 alert(count); //2 count = colors.push("black"); //推入另外一項 alert(count); //3 var item = colors.shift(); //取得第一項 alert(item); //"red" alert(colors.length); //2
unshift()方法:在數組前端添加任意個項並返回新數組的長度
var colors = new Array(); //建立一個數組 var count = colors.unshift("red", "green"); //推入兩項 alert(count); //2 count = colors.unshift("black"); //推入另外一項 alert(count); //3 var item = colors.pop(); //取得最後一項 alert(item); //"green" alert(colors.length); //2
重排序方法
reverse()方法:反轉數組項的順序
var values = [1, 2, 3, 4, 5]; values.reverse(); alert(values); //5,4,3,2,1
sort()方法:
默認是按升序排列數組項,會調用每一個數組項的 toString()轉型方法,而後比較獲得的字符串,以肯定如何排序。即便數組中的每一項都是數值,sort()方法比較的也是字符串,
var values = [0, 1, 5, 10, 15]; values.sort(); alert(values); //0,1,10,15,5
sort()方法能夠接收一個比較函數做爲參數,以便咱們指定哪一個值位於哪一個值的前面
function compare(value1, value2) { if (value1 < value2) { return 1; } else if (value1 > value2) { return -1; } else { return 0; } } var values = [0, 1, 5, 10, 15]; values.sort(compare); alert(values); // 15,10,5,1,0
對於數值類型或者其 valueOf()方法會返回數值類型的對象類型,可使用更簡單的比較函數
function compare(value1, value2){ return value2 - value1; }
操做方法
concat()方法:基於當前數組中的全部項建立一個新數組
//在沒有給 concat()方法傳遞參數的狀況下,它只是複製當前數組並返回副本 //若是傳遞給 concat()方法的是一或多個數組,則該方法會將這些數組中的每一項都添加到結果數組中 //若是傳遞的值不是數組,這些值就會被簡單地添加到結果數組的末尾 var colors = ["red", "green", "blue"]; var colors2 = colors.concat("yellow", ["black", "brown"]); alert(colors); //red,green,blue alert(colors2); //red,green,blue,yellow,black,brown
slice()方法:基於當前數組中的一或多個項建立一個新數組
//在只有一個參數的狀況下,slice()方法返回從該參數指定位置開始到當前數組末尾的全部項 //若是有兩個參數,該方法返回起始和結束位置之間的項,但不包括結束位置的項 //slice()方法不會影響原始數組 //若是 slice()方法的參數中有一個負數,則用數組長度加上該數來肯定相應的位置 var colors = ["red", "green", "blue", "yellow", "purple"]; var colors2 = colors.slice(1); var colors3 = colors.slice(1,4); alert(colors2); //green,blue,yellow,purple alert(colors3); //green,blue,yellow
splice()方法:
//刪除:指定 2 個參數:要刪除的第一項的位置和要刪除的項數 //插入:提供 3 個參數:起始位置、0(要刪除的項數)、要插入的項 //替換:指定3個參數:起始位置、要刪除的項數和要插入的任意數量的項 //始終都會返回一個數組,該數組中包含從原始數組中刪除的項(若是沒有刪除任何項,則返回空數組) var colors = ["red", "green", "blue"]; var removed = colors.splice(0,1); // 刪除第一項 alert(colors); // green,blue alert(removed); // red,返回的數組中只包含一項 removed = colors.splice(1, 0, "yellow", "orange"); // 從位置 1 開始插入兩項 alert(colors); // green,yellow,orange,blue alert(removed); // 返回的是一個空數組 removed = colors.splice(1, 1, "red", "purple"); // 插入兩項,刪除一項 alert(colors); // green,red,purple,orange,blue alert(removed); // yellow,返回的數組中只包含一項
位置方法
indexOf()方法:接受兩個參數是查找項和查找起點位置的索引,從數組的開頭(位置 0)開始向後查找
lastIndexOf()方法:接受兩個參數是查找項和查找起點位置的索引,從數組的末尾開始向前查找
//這兩個方法都返回要查找的項在數組中的位置,或者在沒找到的狀況下返回-1 var numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.indexOf(4)); //3 alert(numbers.lastIndexOf(4)); //5 alert(numbers.indexOf(4, 4)); //5 alert(numbers.lastIndexOf(4, 4)); //3 var person = { name: "Nicholas" }; var people = [{ name: "Nicholas" }]; var morePeople = [person]; alert(people.indexOf(person)); //-1 alert(morePeople.indexOf(person)); //0
迭代方法
every()方法:對數組中的每一項運行給定函數,若是該函數對每一項都返回 true,則返回 true
//三個參數:數組項的值、該項在數組中的位置和數組對象自己 var numbers = [1,2,3,4,5,4,3,2,1]; var everyResult = numbers.every(function(item, index, array){ return (item > 2); }); alert(everyResult); //false
some()方法:對數組中的每一項運行給定函數,若是該函數對任一項返回 true,則返回 true
//三個參數:數組項的值、該項在數組中的位置和數組對象自己 var numbers = [1,2,3,4,5,4,3,2,1]; var someResult = numbers.some(function(item, index, array){ return (item > 2); }); alert(someResult); //true
filter()方法:對數組中的每一項運行給定函數,返回該函數會返回 true 的項組成的數組
//三個參數:數組項的值、該項在數組中的位置和數組對象自己 var numbers = [1,2,3,4,5,4,3,2,1]; var filterResult = numbers.filter(function(item, index, array){ return (item > 2); }); alert(filterResult); //[3,4,5,4,3]
map()方法:對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組
var numbers = [1,2,3,4,5,4,3,2,1]; var mapResult = numbers.map(function(item, index, array){ return item * 2; }); alert(mapResult); //[2,4,6,8,10,8,6,4,2]
forEach()方法:對數組中的每一項運行給定函數。這個方法沒有返回值
var numbers = [1,2,3,4,5,4,3,2,1]; numbers.forEach(function(item, index, array){ //執行某些操做 });
歸併方法
reduce()方法:從數組的第一項開始,逐個遍歷到最後,而後構建一個最終返回的值
reduceRight()方法:從數組的最後一項開始,向前遍歷到第一項,而後構建一個最終返回的值
建立對象
根據當前日期和時間建立對象:使用 new 操做符和 Date 構造函數
var now = new Date(); //Tue Dec 04 2018 22:39:16 GMT+0800 (中國標準時間)
根據特定的日期和時間建立日期對象:
Date.parse()方法接收一個表示日期的字符串參數,而後嘗試根據這個字符串返回相應日期的毫秒數
var someDate1 = new Date(Date.parse("May 25, 2004")); var someDate2 = new Date(Date.parse("6/13/2004")); var someDate3 = new Date(Date.parse("Tue May 25 2004 00:00:00 GMT-0700")); var someDate4 = new Date(Date.parse("2004-05-25T00:00:00")); var someDate5 = new Date("May 25, 2004"); //能夠省略,後臺調用Date.parse var someDate6 = new Date("NotNumber"); //NaN
Date.UTC()方法一樣也返回表示日期的毫秒數,但它與 Date.parse()在構建值時使用不一樣的信息
//GMT 時間 var y21k=new Date(Date.UTC(2000, 0));// GMT 時間 2000 年 1 月 1 日午夜零時 var allFives1=new Date(Date.UTC(2005,4,5,17,55,55)); //2005,5,5,17:55:55 //本地時間 var y2k2 = new Date(2000, 0); // 本地時間 2000 年 1 月 1 日午夜零時 var allFives2 = new Date(2005, 4, 5, 17, 55, 55);//2005年5月5日下午 5:55:55
ECMAScript 5 添加了 Data.now()方法:表示調用這個方法時的日期和時間的毫秒數
//支持 Data.now()方法 var start = Date.now();//取得開始時間 doSomething();//調用函數 var stop = Date.now(),//取得中止時間 result = stop – start; //在不支持它的瀏覽器中,使用+操做符把 Data 對象轉換成字符串 var start = +new Date();//取得開始時間 doSomething();//調用函數 var stop = +new Date(),//取得中止時間 result = stop - start;
繼承的方法
toLocaleString()和 toString()方法:按照與瀏覽器設置的地區相適應的格式返回日期和時間
new Date().toLocaleString();//2018/12/4 下午10:48:27 new Date().toString();//Tue Dec 04 2018 22:48:54 GMT+0800 (中國標準時間)
Date 類型對象調用valueOf()方法
new Date().valueOf();//1543934978417 typeof new Date().valueOf();//number
日期格式化方法
toDateString()——以特定於實現的格式顯示星期幾、月、日和年
new Date().toDateString();//Tue Dec 04 2018
toTimeString()——以特定於實現的格式顯示時、分、秒和時區
new Date().toTimeString();//22:53:27 GMT+0800 (中國標準時間)
toLocaleDateString()——以特定於地區的格式顯示星期幾、月、日和年
new Date().toLocaleDateString()//2018/12/4
toLocaleTimeString()——以特定於實現的格式顯示時、分、秒
new Date().toLocaleTimeString()//下午10:54:36
toUTCString()——以特定於實現的格式完整的 UTC 日期
new Date().toUTCString()//Tue, 04 Dec 2018 14:55:13 GMT
日期/時間組件方法
方 法 | 說 明 |
---|---|
getTime() | 返回表示日期的毫秒數;與valueOf()方法返回的值相同 |
setTime(毫秒) | 以毫秒數設置日期,會改變整個日期 |
getFullYear() | 取得4位數的年份(如2007而非僅07) |
getUTCFullYear() | 返回UTC日期的4位數年份 |
setFullYear(年) | 設置日期的年份。傳入的年份值必須是4位數字(如2007而非僅07) |
setUTCFullYear(年) | 設置UTC日期的年份。傳入的年份值必須是4位數字(如2007而非僅07) |
getMonth() | 返回日期中的月份,其中0表示一月,11表示十二月 |
getUTCMonth() | 返回UTC日期中的月份,其中0表示一月,11表示十二月 |
setMonth(月) | 設置日期的月份。傳入的月份值必須大於0,超過11則增長年份 |
setUTCMonth(月) | 設置UTC日期的月份。傳入的月份值必須大於0,超過11則增長年份 |
getDate() | 返回日期月份中的天數(1到31) |
getUTCDate() | 返回UTC日期月份中的天數(1到31) |
setDate(日) | 設置日期月份中的天數。若是傳入的值超過了該月中應有的天數,則增長月份 |
setUTCDate(日) | 設置UTC日期月份中的天數。若是傳入的值超過了該月中應有的天數,則增長月份 |
getDay() | 返回日期中星期的星期幾(其中0表示星期日,6表示星期六) |
getUTCDay() | 返回UTC日期中星期的星期幾(其中0表示星期日,6表示星期六) |
getHours() | 返回日期中的小時數(0到23) |
getUTCHours() | 返回UTC日期中的小時數(0到23) |
setHours(時) | 設置日期中的小時數。傳入的值超過了23則增長月份中的天數 |
setUTCHours(時) | 設置UTC日期中的小時數。傳入的值超過了23則增長月份中的天數 |
getMinutes() | 返回日期中的分鐘數(0到59) |
getUTCMinutes() | 返回UTC日期中的分鐘數(0到59) |
setMinutes(分) | 設置日期中的分鐘數。傳入的值超過59則增長小時數 |
setUTCMinutes(分) | 設置UTC日期中的分鐘數。傳入的值超過59則增長小時數 |
getSeconds() | 返回日期中的秒數(0到59) |
getUTCSeconds() | 返回UTC日期中的秒數(0到59) |
setUTCSeconds(秒) | 設置UTC日期中的秒數。傳入的值超過了59會增長分鐘數 |
getMilliseconds() | 返回日期中的毫秒數 |
getUTCMilliseconds() | 返回UTC日期中的毫秒數 |
setMilliseconds(豪秒) | 設置日期中的毫 |
setUTCMilliseconds(毫秒) | 設置UTC日期中的毫秒數 |
getTimezoneOffset() | 返回本地時間與UTC時間相差的分鐘數。例如,美國東部標準時間返回300。在某地進入夏令時的狀況下,這個值會有所變化 |
RegExp基本概念
語法:包括模式(字符類、限定符、分組、向前查找以及反向引用)和標誌(g、i、m)
//表達式 var expression = / pattern / flags ; //例子 var pattern1 = /at/g; // 匹配字符串中全部"at"的實例 var pattern2 = /[bc]at/i; // 匹配第一個"bat"或"cat",不區分大小寫 var pattern3 = /.at/gi; // 匹配全部以"at"結尾的 3 個字符的組合,不區分大小寫
轉義:模式中使用的全部元字符都必須轉義( [ { \ ^ $ | ) ? * + .]}
var pattern1 = /[bc]at/i;// 匹配第一個"bat"或"cat",不區分大小寫 var pattern2 = /\[bc\]at/i; // 匹配第一個" [bc]at",不區分大小寫 var pattern3 = /.at/gi; // 匹配全部以"at"結尾的 3 個字符的組合,不區分大小寫 var pattern4 = /\.at/gi; //匹配全部".at",不區分大小寫
建立方式
字面量形式(前面的方式)
var pattern1 = /[bc]at/i;
RegExp 構造函數:
//兩個參數:一個是要匹配的字符串模式,另外一個是可選的標誌字符串 var pattern1 = new RegExp("[bc]at", "i"); //因爲 RegExp 構造函數的模式參數是字符串,因此在某些狀況下要對字符進行雙重轉義 var pattern2 = new RegExp("\\[bc\\]at") //==/\[bc\]at/ var pattern3 = new RegExp("\\.at) //==/\.at/ var pattern4 = new RegExp("name\\/age") //==/name\/age/ var pattern5 = new RegExp("\\d.\\d{1,2}" ) //==/\d.\d{1,2}//
實例是否共享
//在ES3中,正則表達式字面量始終會共享同一個RegExp實例, //而使用構造函數建立的每個新 RegExp 實例都是一個新實例 //ES5明確規定,使用正則表達式字面量必須像直接調用 RegExp 構造函數同樣,每次都創新實例 var re = null; for (var i=0; i < 10; i++){ re = /cat/g; re.test("catastrophe"); } for (var i=0; i < 10; i++){ re = new RegExp("cat", "g"); re.test("catastrophe"); }
RegExp實例屬性
global:布爾值,表示是否設置了 g 標誌
(/\[bc\]at/i).global//false (new RegExp("\\[bc\\]at", "i")).global//false
ignoreCase:布爾值,表示是否設置了 i 標誌
(/\[bc\]at/i).ignoreCase//true (new RegExp("\\[bc\\]at", "i")).ignoreCase//true
lastIndex:整數,表示開始搜索下一個匹配項的字符位置,從 0 算起
(/\[bc\]at/i).lastIndex //0 (new RegExp("\\[bc\\]at", "i")).lastIndex //0
multiline:布爾值,表示是否設置了 m 標誌
(/\[bc\]at/i).multiline //false (new RegExp("\\[bc\\]at", "i")).multiline //false
source:正則表達式的字符串表示,按照字面量形式而非傳入構造函數中的字符串模式返回
(/\[bc\]at/i).source // "\[bc\]at" (new RegExp("\\[bc\\]at", "i")).source // "\[bc\]at"
RegExp實例方法
exec()方法
//接受一個參數,即要應用模式的字符串,而後返回包含第一個匹配項信息的數組 //在沒有匹配項的狀況下返回 null //返回的數組雖然是 Array 的實例,但包含兩個額外的屬性:index 和 input //index 表示匹配項在字符串中的位置,而 input 表示應用正則表達式的字符串 //在數組中,第一項是與整個模式匹配的字符串,其餘項是與模式中的捕獲組匹配的字符串 //若是模式中沒有捕獲組,則該數組只包含一項 var text = "mom and dad and baby"; var pattern = /mom( and dad( and baby)?)?/gi; var matches = pattern.exec(text); alert(matches.index); // 0 alert(matches.input); // "mom and dad and baby" alert(matches[0]); // "mom and dad and baby" alert(matches[1]); // " and dad and baby" alert(matches[2]); // " and baby" //在模式中設置了全局標誌(g),它每次也只會返回一個匹配項 //在不設置全局標誌的狀況下,在同一個字符串上屢次調用 exec()將始終返回第一個匹配項的信息 //在設置全局標誌的狀況下,每次調用 exec()則都會在字符串中繼續查找新匹配項 var text = "cat, bat, sat, fat"; var pattern1 = /.at/; var matches = pattern1.exec(text); alert(matches.index); //0 alert(matches[0]); //cat alert(pattern1.lastIndex); //0 matches = pattern1.exec(text); alert(matches.index); //0 alert(matches[0]); //cat alert(pattern1.lastIndex); //0 var pattern2 = /.at/g; var matches = pattern2.exec(text); alert(matches.index); //0 alert(matches[0]); //cat alert(pattern2.lastIndex); //3 matches = pattern2.exec(text); alert(matches.index); //5 alert(matches[0]); //bat alert(pattern2.lastIndex); //8
test()方法
//接受一個字符串參數。在模式與該參數匹配的狀況下返回true;不然,返回 false var text = "000-00-0000"; var pattern = /\d{3}-\d{2}-\d{4}/; if (pattern.test(text)){ alert("The pattern was matched."); }
RegExp 實例繼承的 toLocaleString()和 toString()方法都會返回正則表達式的字面量
var pattern = new RegExp("\\[bc\\]at", "gi"); alert(pattern.toString()); // /\[bc\]at/gi alert(pattern.toLocaleString()); // /\[bc\]at/gi
正則表達式的 valueOf()方法返回正則表達式自己
(new RegExp("\\[bc\\]at", "gi")).valueOf();// /\[bc\]at/gi (/\[bc\]at/gi).valueOf();// /\[bc\]at/gi
RegExp構造函數屬性(靜態屬性)
各個屬性及其返回值
var text = "this has been a short summer"; var pattern = /(.)hort/g; /* * 注意:Opera 不支持 input、lastMatch、lastParen 和 multiline 屬性 * Internet Explorer 不支持 multiline 屬性 */ if (pattern.test(text)){//寫法一 alert(RegExp.input); // this has been a short summer alert(RegExp.leftContext); // this has been a alert(RegExp.rightContext); // summer alert(RegExp.lastMatch); // short alert(RegExp.lastParen); // s alert(RegExp.multiline); // false } if (pattern.test(text)){//寫法二 alert(RegExp.$_); // this has been a short summer alert(RegExp["$`"]); // this has been a alert(RegExp["$'"]); // summer alert(RegExp["$&"]); // short alert(RegExp["$+"]); // s alert(RegExp["$*"]); // false }
9 個用於存儲捕獲組的構造函數屬性
var text = "this has been a short summer"; var pattern = /(..)or(.)/g; if (pattern.test(text)){ alert(RegExp.$1); //sh alert(RegExp.$2); //t }
模式的侷限性
基本概念
函數其實是對象。每一個函數都是 Function 類型的實例,並且都與其餘引用類型同樣具備屬性和方法
函數定義的方式:
函數聲明語法
function sum (num1, num2) { return num1 + num2; }
函數表達式
var sum = function(num1, num2){ return num1 + num2; };
Function 構造函數
var sum = new Function("num1", "num2", "return num1 + num2"); // 不推薦
函數名僅僅是指向函數的指針,不會與某個函數綁定
function sum(num1, num2){ return num1 + num2; } alert(sum(10,10)); //20 var anotherSum = sum; alert(anotherSum(10,10)); //20 sum = null; alert(anotherSum(10,10)); //20
沒有重載
function addSomeNumber(num){ return num + 100; } function addSomeNumber(num) { return num + 200; } var result = addSomeNumber(100); //300
函數聲明與函數表達式
解析器會率先讀取函數聲明,並使其在執行任何代碼以前可用(能夠訪問)
alert(sum(10,10));//20 function sum(num1, num2){ return num1 + num2; }
函數表達式必須等到解析器執行到它所在的代碼行,纔會真正被解釋執行
alert(sum(10,10));//報錯 var sum = function(num1, num2){ return num1 + num2; };
能夠同時使用函數聲明和函數表達式,可是這種語法在 Safari 中會致使錯誤
var sum = function sum(){}
做爲值的函數
能夠像傳遞參數同樣把一個函數傳遞給另外一個函數
function callSomeFunction(someFunction, someArgument){ return someFunction(someArgument); } function add10(num){ return num + 10; } var result1 = callSomeFunction(add10, 10); alert(result1); //20 function getGreeting(name){ return "Hello, " + name; } var result2 = callSomeFunction(getGreeting, "Nicholas"); alert(result2); //"Hello, Nicholas"
能夠將一個函數做爲另外一個函數的結果返回
function createComparisonFunction(propertyName) { return function(object1, object2){ var value1 = object1[propertyName]; var value2 = object2[propertyName]; if (value1 < value2){ return -1; } else if (value1 > value2){ return 1; } else { return 0; } }; } var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}]; data.sort(createComparisonFunction("name")); alert(data[0].name); //Nicholas data.sort(createComparisonFunction("age")); alert(data[0].name); //Zachary
函數內部屬性
arguments:類數組對象,包含着傳入函數中的全部參數;有一個callee屬性,是一個指針,指向擁有這個 arguments 對象的函數
function factorial(num){ if (num <=1) { return 1; } else { return num * arguments.callee(num-1) } }
this:引用的是函數據以執行的環境對象
window.color = "red"; var o = { color: "blue" }; function sayColor(){ alert(this.color); } sayColor(); //"red" // o.sayColor = sayColor; o.sayColor(); //"blue"
caller:保存着調用當前函數的函數的引用,若是是在全局做用域中調用當前函數,它的值爲 null
function outer(){ inner(); } function inner(){ alert(inner.caller);//也能夠寫成 } outer();//顯示 outer()函數的源代碼。
函數屬性和方法
length屬性:表示函數但願接收的命名參數的個數
function sayName(name){ alert(name); } function sum(num1, num2){ return num1 + num2; } function sayHi(){ alert("hi"); } alert(sayName.length); //1 alert(sum.length); //2 alert(sayHi.length); //0
prototype屬性:保存全部實例方法的原型對象(後面介紹)
apply()方法:在特定的做用域中調用函數,實際上等於設置函數體內 this 對象的值
//接收兩個參數:一個是在其中運行函數的做用域,另外一個是參數數組 //第二個參數能夠是 Array 的實例,也能夠是arguments 對象 function sum(num1, num2){ return num1 + num2; } function callSum1(num1, num2){ return sum.apply(this, arguments); // 傳入 arguments 對象 } function callSum2(num1, num2){ return sum.apply(this, [num1, num2]); // 傳入數組 } alert(callSum1(10,10)); //20 alert(callSum2(10,10)); //20
call()方法:與 apply()方法的做用相同,它們的區別僅在於接收參數的方式不一樣
//第一個參數是 this 值沒有變化,變化的是其他參數都直接傳遞給函數 function sum(num1, num2){ return num1 + num2; } function callSum(num1, num2){ return sum.call(this, num1, num2); } alert(callSum(10,10)); //20 //apply()和 call()真正的用武之地:擴充函數賴以運行的做用域 window.color = "red"; var o = { color: "blue" }; function sayColor(){ alert(this.color); } sayColor(); //red sayColor.call(this); //red sayColor.call(window); //red sayColor.call(o); //blue
bind()方法:建立一個函數的實例,其 this 值會被綁定到傳給 bind()函數的值
window.color = "red"; var o = { color: "blue" }; function sayColor(){ alert(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor(); //blue
toLocaleString()和 toString()方法:始終都返回函數的代碼
function sayHello(){console.log('hello');} sayHello.toString();//"function sayHello(){console.log('hello');}" sayHello.toLocaleString();//"function sayHello(){console.log('hello');}"
valueOf()方法:也只返回函數代碼
function sayHello(){console.log('hello');} sayHello.valueOf()//sayHello(){console.log('hello');}
爲了便於操做基本類型值,提供了 3 個特殊的引用類型:Boolean、Number 和String
當讀取一個基本類型值的時候,後臺就會建立一個對應的基本包裝類型的對象
var s1 = "some text"; var s2 = s1.substring(2); //後臺處理: var s1 = new String("some text");//建立 String 類型的一個實例; var s2 = s1.substring(2); //在實例上調用指定的方法 s1 = null; //銷燬這個實例
引用類型與基本包裝類型的主要區別就是對象的生存期
var s1 = "some text"; s1.color = "red"; alert(s1.color); //undefined
Object 構造函數也會像工廠方法同樣,根據傳入值的類型返回相應基本包裝類型的實例
var obj = new Object("some text"); alert(obj instanceof String); //true
使用 new 調用基本包裝類型的構造函數,與直接調用同名的轉型函數是不同的
var value = "25"; var number = Number(value); //轉型函數 alert(typeof number); //"number" var obj = new Number(value); //構造函數 alert(typeof obj); //"object"
Boolean類型
建立:調用 Boolean構造函數並傳入 true 或 false 值
方法:
布爾表達式中的全部對象都會被轉換爲 true
var falseObject = new Boolean(false); var result = falseObject && true; alert(result); //true var falseValue = false; result = falseValue && true; alert(result); //false
typeof 操做符對基本類型返回"boolean",而對引用類型返回"object"
var falseObject = new Boolean(false); var falseValue = false; alert(typeof falseObject); //object alert(typeof falseValue); //boolean
使用 instanceof操做符測試 Boolean 對象會返回 true,而測試基本類型的布爾值則返回 false
var falseObject = new Boolean(false); var falseValue = false; alert(falseObject instanceof Boolean); //true alert(falseValue instanceof Boolean); //false
Number類型
建立:調用 Number 構造函數時向其中傳遞相應的數值
var numberObject = new Number(10);
方法:
重寫了valueOf()方法,返回對象表示的基本類型的數值
重寫了toString()和toLocaleString()方法,返回字符串形式的數值
//toString()方法傳遞一個表示基數的參數,返回幾進制數值的字符串形式 var num = 10; alert(num.toString()); //"10" alert(num.toString(2)); //"1010" alert(num.toString(8)); //"12" alert(num.toString(10)); //"10" alert(num.toString(16)); //"a"
toFixed()方法會按照指定的小數位返回數值的字符串表示
var num = 10; alert(num.toFixed(2)); //"10.00" var num = 10.005; alert(num.toFixed(2)); //"10.01"
toExponential()方法:該方法返回以指數表示法(也稱 e 表示法)表示的數值的字符串形式
var num = 10; alert(num.toExponential(1)); //"1.0e+1"
toPrecision()方法可能會返回固定大小(fixed)格式,也可能返回指數(exponential)格式
//接收一個參數,即表示數值的全部數字的位數(不包括指數部分) var num = 99; alert(num.toPrecision(1)); //"1e+2" alert(num.toPrecision(2)); //"99" alert(num.toPrecision(3)); //"99.0"
typeof 操做符對基本類型返回"number",而對引用類型返回"object"
var numberObject = new Number(10); var numberValue = 10; alert(typeof numberObject); //"object" alert(typeof numberValue); //"number"
使用 instanceof操做符測試 Number對象會返回 true,而測試基本類型的布爾值則返回 false
var numberObject = new Number(10); var numberValue = 10; alert(numberObject instanceof Number); //true alert(numberValue instanceof Number); //false
String類型
建立:調用 String構造函數時向其中傳遞相應的字符串
var stringObject = new String("hello world");
基本方法:
valueOf()、toLocaleString()和toString()方法,都返回對象所表示的基本字符串值
length屬性:表示字符串中包含多個字符
var stringValue = "hello world"; alert(stringValue.length); //"11"
字符方法:
charAt()方法:以單字符字符串的形式返回給定位置的那個字符(ECMAScript 中沒有字符類型)
var stringValue = "hello world"; alert(stringValue.charAt(1)); //"e"
charCodeAt()方法:以字符編碼的形式返回給定位置的那個字符
var stringValue = "hello world"; alert(stringValue.charCodeAt(1)); //輸出"101"
方括號加數字索引來訪問字符串中的特定字符
var stringValue = "hello world"; alert(stringValue[1]); //"e"
字符串操做方法
concat()方法:用於將一或多個字符串拼接起來,返回拼接獲得的新字符串
//一個參數 var stringValue = "hello "; var result = stringValue.concat("world"); alert(result); //"hello world" alert(stringValue); //"hello" //多個參數 var stringValue = "hello "; var result = stringValue.concat("world", "!"); alert(result); //"hello world!" alert(stringValue); //"hello"
slice()、substr()和 substring():返回被操做字符串的一個子字符串,都接受一或兩個參數
//第一個參數指定子字符串的開始位置 //slice()和substring()的第二個參數(在指定的狀況下)表示子字符串到哪裏結束 //substr()的第二個參數指定的則是返回的字符個數 //若是沒有給這些方法傳遞第二個參數,則將字符串的長度做爲結束位置 var stringValue = "hello world"; alert(stringValue.slice(3)); //"lo world" alert(stringValue.substring(3)); //"lo world" alert(stringValue.substr(3)); //"lo world" alert(stringValue.slice(3, 7)); //"lo w" alert(stringValue.substring(3,7)); //"lo w" alert(stringValue.substr(3, 7)); //"lo worl" //在傳遞給這些方法的參數是負值的狀況下,它們的行爲就不盡相同 //slice()方法會將傳入的負值與字符串的長度相加, //substr()方法將負的第一個參數加上字符串的長度,而將負的第二個參數轉換爲 0 //substring()方法會把全部負值參數都轉換爲 0 var stringValue = "hello world"; alert(stringValue.slice(-3)); //"rld" alert(stringValue.substring(-3)); //"hello world" alert(stringValue.substr(-3)); //"rld" alert(stringValue.slice(3, -4)); //"lo w" alert(stringValue.substring(3, -4)); //"hel" alert(stringValue.substr(3, -4)); //""(空字符串)
字符串位置方法
indexOf()方法::從字符串的開頭向後搜索子字符串,返子字符串的位置(沒有找到返回-1)
//一個參數 var stringValue = "hello jsdada"; alert(stringValue.indexOf("o")); //4 //兩個參數:第二個參數表示從字符串中的哪一個位置開始搜索 var stringValue = "hello world"; alert(stringValue.indexOf("o", 6)); //7
lastIndexOf()方法:從字符串的末尾向前搜索子字符串,返子字符串的位置(沒有找到返回-1)
//一個參數 var stringValue = "hello jsdasda"; alert(stringValue.lastIndexOf("o")); //4 //兩個參數:第二個參數表示從字符串中的哪一個位置開始搜索 var stringValue = "hello world"; alert(stringValue.lastIndexOf("o", 6)); //4
擴展:循環調用 indexOf()或 lastIndexOf()來找到全部匹配的子字符串
trim()方法:
會建立一個字符串的副本,刪除前置及後綴的全部空格,而後返回結果
因爲 trim()返回的是字符串的副本,因此原始字符串中的前置及後綴空格會保持不變
var stringValue = " hello world "; var trimmedStringValue = stringValue.trim(); alert(stringValue); //" hello world " alert(trimmedStringValue); //"hello world"
字符串大小寫轉換方法
toLowerCase()和 toUpperCase()是兩個經典的方法,借鑑自 java.lang.String 中的同名方法
toLocaleLowerCase()和 toLocaleUpperCase()方法則是針對特定地區的實現
var stringValue = "hello world"; alert(stringValue.toLocaleUpperCase()); //"HELLO WORLD" alert(stringValue.toUpperCase()); //"HELLO WORLD" alert(stringValue.toLocaleLowerCase()); //"hello world" alert(stringValue.toLowerCase()); //"hello world"
字符串的模式匹配方法
match()方法:在字符串上調用這個方法,本質上與調用 RegExp 的 exec()方法相同
//match()方法只接受一個參數,要麼是一個正則表達式,要麼是一個 RegExp 對象 var text = "cat, bat, sat, fat"; var pattern = /.at/; //與 pattern.exec(text)相同 var matches = text.match(pattern); alert(matches.index); //0 alert(matches[0]); //"cat" alert(pattern.lastIndex); //0
search()方法:返回字符串中第一個匹配項的索引;若是沒有找到匹配項,則返回-1。
//search()方法始終是從字符串開頭向後查找模式 var text = "cat, bat, sat, fat"; var pos = text.search(/at/); alert(pos); //1
replace()方法:替換子字符串的操做
//第一個參數能夠是一個 RegExp 對象或者一個字符串(這個字符串不會被轉換成正則表達式) //第二個參數能夠是一個字符串或者一個函數 //若是第一個參數是字符串,那麼只會替換第一個子字符串 //要想替換全部子字符串,惟一的辦法就是提供一個正則表達式,並且要指定全局(g)標誌 var text = "cat, bat, sat, fat"; var result = text.replace("at", "ond"); alert(result); //"cond, bat, sat, fat" result = text.replace(/at/g, "ond"); alert(result); //"cond, bond, sond, fond" //若是第二個參數是字符串,那麼還可使用一些特殊的字符序列 var text = "cat, bat, sat, fat"; result = text.replace(/(.at)/g, "word ($1)"); alert(result); //word (cat), word (bat), word (sat), word (fat) //第二個參數也能夠是一個函數 function htmlEscape(text){ return text.replace(/[<>"&]/g, function(match, pos, originalText){ switch(match){ case "<":return "<"; case ">":return ">"; case "&":return "&"; case "\"":return """; } }); } alert(htmlEscape("<p class=\"greeting\">Hello world!</p>")); //<p class="greeting">Hello world!</p>
split()方法:基於指定的分隔符將一個字符串分割成多個子字符串,並將結果放在一個數組中
var colorText = "red,blue,green,yellow"; var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"] var colors2 = colorText.split(",", 2); //["red", "blue"] var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]
localeCompare()方法
在字母表比較兩個字符串,並返回下列值中的一個:
var stringValue = "yellow"; alert(stringValue.localeCompare("brick")); //1 alert(stringValue.localeCompare("yellow")); //0 alert(stringValue.localeCompare("zoo")); //-1
localeCompare()返回的數值取決於實現
function determineOrder(value) { var result = stringValue.localeCompare(value); if (result < 0){ alert(" 'yellow' comes before '" + value + "'."); } else if (result > 0) { alert("'yellow' comes after '" + value + "'."); } else { alert("'yellow' is equal to'" + value + "'.");} } determineOrder("brick"); determineOrder("yellow"); determineOrder("zoo");
fromCharCode()方法
靜態方法:接收一或多個字符編碼,而後將它們轉換成一個字符串。
從本質上來看,這個方法與實例方法 charCodeAt()執行的是相反的操做
alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"
HTML 方法
方 法 | 輸出結果 |
---|---|
anchor(name) | <a name = 'name'>string</a> |
big() | <big>string</big> |
bold() | <b>string</b> |
fixed() | <tt>string</tt> |
fontcolor(color) | <font color = 'color''>string</font> |
fontsize(size) | <font color = 'size''>string</font> |
italics() | <i>string</i> |
link(url) | <a href = 'url'>string</a> |
small() | <small>string</small> |
strike() | <strike>string</strike> |
sub() | <sub>string</sub> |
sup() | <sup>string</sup> |
基本概念
Global對象
不屬於任何其餘對象的屬性和方法,最終都是它的屬性和方法;事實上,沒有全局變量或全局函數;全部在全局做用域中定義的屬性和函數,都是 Global 對象的屬性,諸如 isNaN()、isFinite()、parseInt()以及 parseFloat()等等
URI 編碼方法
encodeURI()方法:主要用於整個 URI(例如,http://www.wrox.com/illegal value.htm)進行編碼
var uri = "http://www.wrox.com/illegal value.htm#start"; //"http://www.wrox.com/illegal%20value.htm#start" alert(encodeURI(uri));
encodeURIComponent()方法:主要用於對 URI 中的某一段(例如前面 URI 中的 illegal value.htm)進行編碼
var uri = "http://www.wrox.com/illegal value.htm#start"; //"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start" alert(encodeURIComponent(uri));
decodeURI()方法:只能對使用 encodeURI()替換的字符進行解碼
var uri = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"; //http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start alert(decodeURI(uri));
encodeURIComponent()方法:解碼使用 encodeURIComponent()編碼的全部字符,即它能夠解碼任何特殊字符的編碼
var uri = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"; //http://www.wrox.com/illegal value.htm#start alert(decodeURIComponent(uri));
eval()方法
像是一個完整的 ECMAScript 解析器,它只接受一個參數,即要執行的 JavaScript)字符串
eval("alert('hi')");//等價於 alert("hi");
經過 eval()執行的代碼能夠引用在包含環境中定義的變量
var msg = "hello world"; eval("alert(msg)"); //"hello world"
能夠在 eval()調用中定義一個函數,而後再在該調用的外部代碼中引用這個函數
eval("function sayHi() { alert('hi'); }"); sayHi();
在 eval()中建立的任何變量或函數都不會被提高
eval("var msg = 'hello world'; "); alert(msg); //"hello world"
嚴格模式下,在外部訪問不到 eval()中建立的任何變量或函數
"use strict"; eval = "hi"; //causes error
Global 對象的屬性
全部原生引用類型的構造函數,像Object 和 Function,也都是 Global 對象的屬性
屬 性 | 說 明 | 屬 性 | 說 明 |
---|---|---|---|
undefined | 特殊值undefined | Date | 構造函數Date |
NaN | 特殊值NaN | RegExp | 構造函數RegExp |
Infinity | 特殊值Infinity | Error | 構造函數Error |
Object | 構造函數Object | EvalError | 構造函數EvalError |
Array | 構造函數Array | RangeError | 構造函數RangeError |
Function | 構造函數Function | ReferenceError | 構造函數ReferenceError |
Boolean | 構造函數Boolean | SyntaxError | 構造函數SyntaxError |
String | 構造函數String | TypeError | 構造函數TypeError |
Number | 構造函數Number | URIError | 構造函數URIError |
window 對象
在全局做用域中聲明的全部變量和函數,就都成爲了 window對象的屬性
var color = "red"; function sayColor(){ alert(window.color); } window.sayColor(); //"red"
另外一種取得 Global 對象的方法
var global = function(){ return this; }();
Math對象
Math 對象的屬性
屬 性 | 說 明 |
---|---|
Math.E | 天然對數的底數,即常量e的值 |
Math.LN10 | 10的天然對數 |
Math.LN2 | 2的天然對數 |
Math.LOG2E | 以2爲底e的對數 |
Math.LOG10E | 以10爲底e的對數 |
Math.PI | π的值 |
Math.SQRT1_2 | 1/2的平方根(即2的平方根的倒數) |
Math.SQRT2 | 2的平方根 |
min()和 max()方法
用於肯定一組數值中的最小值和最大值
var max = Math.max(3, 54, 32, 16); alert(max); //54 var min = Math.min(3, 54, 32, 16); alert(min); //3
要找到數組中的最大或最小值,能夠像下面這樣使用 apply()方法
var values = [1, 2, 3, 4, 5, 6, 7, 8]; var max = Math.max.apply(Math, values);
舍入方法
Math.ceil()執行向上舍入,即它老是將數值向上舍入爲最接近的整數;
alert(Math.ceil(25.9)); //26 alert(Math.ceil(25.5)); //26 alert(Math.ceil(25.1)); //26
Math.floor()執行向下舍入,即它老是將數值向下舍入爲最接近的整數;
alert(Math.floor(25.9)); //25 alert(Math.floor(25.5)); //25 alert(Math.floor(25.1)); //25
Math.round()執行標準舍入,即它老是將數值四捨五入爲最接近的整數
alert(Math.round(25.9)); //26 alert(Math.round(25.5)); //26 alert(Math.round(25.1)); //25
random()方法
返回大於等於 0 小於 1 的一個隨機數
//值 = Math.floor(Math.random() * 可能值的總數 + 第一個可能的值) var num = Math.floor(Math.random() * 9 + 2);
經過一個函數來計算可能值的總數和第一個可能的值
function selectFrom(lowerValue, upperValue) { var choices = upperValue - lowerValue + 1; return Math.floor(Math.random() * choices + lowerValue); } var num = selectFrom(2, 10); alert(num); // 介於 2 和 10 之間(包括 2 和 10)的一個數值 var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]; var color = colors[selectFrom(0, colors.length-1)]; alert(color); // 多是數組中包含的任何一個字符串
其餘方法
方 法 | 說 明 | 方 法 | 說 明 |
---|---|---|---|
Math.abs(num | 返回num 的絕對值 | Math.asin(x) | 返回x 的反正弦值 |
Math.exp(num) | 返回Math.E 的num 次冪 | Math.atan(x) | 返回x 的反正切值 |
Math.log(num) | 返回num 的天然對數 | Math.atan2(y,x) | 返回y/x 的反正切值 |
Math.pow(num,power) | 返回num 的power 次冪 | Math.cos(x) | 返回x 的餘弦值 |
Math.sqrt(num) | 返回num 的平方根 | Math.sin(x) | 返回x 的正弦值 |
Math.acos(x) | 返回x 的反餘弦值 | Math.tan(x) | 返回x 的正切值 |
對象在 JavaScript 中被稱爲引用類型的值,並且有一些內置的引用類型能夠用來建立特定的對象,現簡要總結以下:
函數其實是 Function 類型的實例,所以函數也是對象;而這一點正是 JavaScript 最有特點的地方。因爲函數是對象,因此函數也擁有方法,能夠用來加強其行爲。由於有了基本包裝類型,因此 JavaScript 中的基本類型值能夠被看成對象來訪問。三種基本包裝類型分別是:Boolean、Number 和 String。如下是它們共同的特徵:
每一個包裝類型都映射到同名的基本類型;
在讀取模式下訪問基本類型值時,就會建立對應的基本包裝類型的一個對象,從而方便了數據操做;
操做基本類型值的語句一經執行完畢,就會當即銷燬新建立的包裝對象。
在全部代碼執行以前,做用域中就已經存在兩個內置對象:Global 和 Math。在大多數 ECMAScript實現中都不能直接訪問 Global 對象;不過,Web 瀏覽器實現了承擔該角色的 window 對象。全局變量和函數都是 Global 對象的屬性。Math 對象提供了不少屬性和方法,用於輔助完成複雜的數學計算任務。