當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
javascript高级程序设计 学习笔记 第五章 上
生活随笔
收集整理的這篇文章主要介紹了
javascript高级程序设计 学习笔记 第五章 上
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? 第五章 ? 引用類型的值(對(duì)象)是引用類型的一個(gè)實(shí)例。在 ECMAScript 中,引用類型是一種數(shù)據(jù)結(jié)構(gòu), 用于將數(shù)據(jù)和功能組織在一起。它也常被稱為類,但這種稱呼并不妥當(dāng)。盡管 ECMAScript 從技術(shù)上講是一門面向?qū)ο蟮恼Z(yǔ)言,但它不具備傳統(tǒng)的面向?qū)ο笳Z(yǔ)言所支持的類和接口等基本結(jié)構(gòu)。引用類型有時(shí)候也被稱為對(duì)象定義,因?yàn)樗鼈兠枋龅氖且活悓?duì)象所具有的屬性和方法。 ? 對(duì)象是某個(gè)特定引用類型的實(shí)例。新對(duì)象是使用 new 操作符后跟一個(gè)構(gòu)造函數(shù)來(lái)創(chuàng)建的。 構(gòu)造函數(shù)本身就是一個(gè)函數(shù),只不過(guò)該函數(shù)是出于創(chuàng)建新對(duì)象的目的而定義的。 ? ECMAScript 提供了很多原生引用類 型(例如 Object),以便開發(fā)人員用以實(shí)現(xiàn)常見的計(jì)算任務(wù)。 ? 5.1 Object類型 到目前為止,我們看到的大多數(shù)引用類型值都是 Object 類型的實(shí)例;而且,Object 也是 ECMAScript 中使用最多的一個(gè)類型。 創(chuàng)建 Object 實(shí)例的方式有兩種。第一種是使用 new 操作符后跟 Object 構(gòu)造函數(shù)。 eg: var person = new Object();
person.name = "Nicholas";
person.age = 29; 另一種方式是使用對(duì)象字面量表示法。對(duì)象字面量是對(duì)象定義的一種簡(jiǎn)寫形式,目的在于簡(jiǎn)化創(chuàng)建 包含大量屬性的對(duì)象的過(guò)程。 eg: var person = { name : "Nicholas", age : 29
}; 在最后一個(gè)屬性后面添加逗號(hào),會(huì)在 IE7 及更早版本和Opera 中導(dǎo)致錯(cuò)誤。 ? 在這個(gè)例子中,左邊的花括號(hào)({)表示對(duì)象字面量的開始,因?yàn)樗霈F(xiàn)在了表達(dá)式上下文 (expression context)中。ECMAScript 中的表達(dá)式上下文指的是能夠返回一個(gè)值(表達(dá)式)。賦值操作 符表示后面是一個(gè)值,所以左花括號(hào)在這里表示一個(gè)表達(dá)式的開始。同樣的花括號(hào),如果出現(xiàn)在一個(gè)語(yǔ)句上下文(statement context)中,例如跟在 if 語(yǔ)句條件的后面,則表示一個(gè)語(yǔ)句塊的開始。 ? 在使用對(duì)象字面量語(yǔ)法時(shí),屬性名也可以使用字符串。 eg: var person = {"name" : "Nicholas", "age" : 29, 5 : true
}; 這個(gè)例子會(huì)創(chuàng)建一個(gè)對(duì)象,包含三個(gè)屬性:name、age 和 5。但這里的數(shù)值屬性名會(huì)自動(dòng)轉(zhuǎn)換為字符串。 ? 對(duì)象字面量也是向函數(shù)傳遞大量可選參 數(shù)的首選方式。 eg: ? 這種傳遞參數(shù)的模式最適合需要向函數(shù)傳入大量可選參數(shù)的情形。一般來(lái)講,命名參數(shù)雖然容易處理,但在有多個(gè)可選參數(shù)的情況下就會(huì)顯示不夠靈活。最好的做法 是對(duì)那些必需值使用命名參數(shù),而使用對(duì)象字面量來(lái)封裝多個(gè)可選參數(shù)。 ? 一般來(lái)說(shuō),訪問(wèn)對(duì)象屬性時(shí)使用的都是點(diǎn)表示法,這也是很多面向?qū)ο笳Z(yǔ)言中通用的語(yǔ)法。不過(guò), 在 JavaScript 也可以使用方括號(hào)表示法來(lái)訪問(wèn)對(duì)象的屬性。在使用方括號(hào)語(yǔ)法時(shí),應(yīng)該將要訪問(wèn)的屬性 以字符串的形式放在方括號(hào)中。 eg: alert(person["name"]); //"Nicholas"
alert(person.name); //"Nicholas" 從功能上看,這兩種訪問(wèn)對(duì)象屬性的方法沒(méi)有任何區(qū)別。但方括號(hào)語(yǔ)法的主要優(yōu)點(diǎn)是可以通過(guò)變量 來(lái)訪問(wèn)屬性。 eg: var propertyName = "name";
alert(person[propertyName]); //"Nicholas" 如果屬性名中包含會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤的字符,或者屬性名使用的是關(guān)鍵字或保留字,也可以使用方括 號(hào)表示法。 eg: person["first name"] = "Nicholas"; 由于"first name"中包含一個(gè)空格,所以不能使用點(diǎn)表示法來(lái)訪問(wèn)它。然而,屬性名中是可以包 含非字母非數(shù)字的,這時(shí)候就可以使用方括號(hào)表示法來(lái)訪問(wèn)它們。 ? 通常,除非必須使用變量來(lái)訪問(wèn)屬性,否則我們建議使用點(diǎn)表示法。 ? 5.2 Array類型 數(shù)據(jù)的有序列表,但與其他語(yǔ)言不同的是,ECMAScript 數(shù)組的每一項(xiàng)可以保存任何類型的數(shù)據(jù)。而且,ECMAScript 數(shù)組的大小是可以動(dòng)態(tài)調(diào)整的,即可以隨著數(shù)據(jù)的添加自動(dòng)增長(zhǎng)以容 納新增數(shù)據(jù)。 ? 創(chuàng)建數(shù)組的基本方式有兩種。第一種是使用 Array構(gòu)造函數(shù)。 eg: var colors = new Array(); 如果預(yù)先知道數(shù)組要保存的項(xiàng)目數(shù)量,也可以給構(gòu)造函數(shù)傳遞該數(shù)量,而該數(shù)量會(huì)自動(dòng)變成 length 屬性的值。 eg: var colors = new Array(20); 也可以向 Array 構(gòu)造函數(shù)傳遞數(shù)組中應(yīng)該包含的項(xiàng)。以下代碼創(chuàng)建了一個(gè)包含 3 個(gè)字符串值的數(shù)組: var colors = new Array("red", "blue", "green"); 給構(gòu)造函數(shù)傳遞值:如果傳遞的是數(shù) 值,則會(huì)按照該數(shù)值創(chuàng)建包含給定項(xiàng)數(shù)的數(shù)組;而如果傳遞的是其他類型的參數(shù),則會(huì)創(chuàng)建包含那個(gè)值 的只有一項(xiàng)的數(shù)組。 ? 另外,在使用 Array 構(gòu)造函數(shù)時(shí)也可以省略 new 操作符。如下面的例子所示,省略 new 操作符的 結(jié)果相同: var colors = Array(3); // 創(chuàng)建一個(gè)包含 3 項(xiàng)的數(shù)組
var names = Array("Greg"); // 創(chuàng)建一個(gè)包含 1 項(xiàng),即字符串"Greg"的數(shù)組 創(chuàng)建數(shù)組的第二種基本方式是使用數(shù)組字面量表示法。數(shù)組字面量由一對(duì)包含數(shù)組項(xiàng)的方括號(hào)表 示,多個(gè)數(shù)組項(xiàng)之間以逗號(hào)隔開。 var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含 3 個(gè)字符串的數(shù)組
var names = []; // 創(chuàng)建一個(gè)空數(shù)組
var values = [1,2,]; // 不要這樣!這樣會(huì)創(chuàng)建一個(gè)包含 2 或 3 項(xiàng)的數(shù)組
var options = [,,,,,]; // 不要這樣!這樣會(huì)創(chuàng)建一個(gè)包含 5 或 6 項(xiàng)的數(shù)組 分析： 在 IE 中,values 會(huì)成為一個(gè)包含 3 個(gè)項(xiàng)且每 項(xiàng)的值分別為 1、2 和 undefined 的數(shù)組;在其他瀏覽器中,values 會(huì)成為一個(gè)包含 2 項(xiàng)且值分別為 1 和 2 的數(shù)組。原因是 IE8 及之前版本中的 ECMAScript 實(shí)現(xiàn)在數(shù)組字面量方面存在 bug。由于這個(gè) bug導(dǎo)致的另一種情況如最后一行代碼所示,該行代碼可能會(huì)創(chuàng)建包含 5 項(xiàng)的數(shù)組(在 IE9+、Firefox、Opera、Safari 和 Chrome 中),也可能會(huì)創(chuàng)建包含 6 項(xiàng)的數(shù)組(在 IE8 及更早版本中)。在像這種省略值的情況下, 每一項(xiàng)都將獲得undefined值;這個(gè)結(jié)果與調(diào)用Array構(gòu)造函數(shù)時(shí)傳遞項(xiàng)數(shù)在邏輯上是相同的。但是 由于 IE 的實(shí)現(xiàn)與其他瀏覽器不一致,因此我們強(qiáng)烈建議不要使用這種語(yǔ)法。 ? 在讀取和設(shè)置數(shù)組的值時(shí),要使用方括號(hào)并提供相應(yīng)值的基于 0 的數(shù)字索引,如下所示: var colors = ["red", "blue", "green"]; // 定義一個(gè)字符串?dāng)?shù)組 alert(colors[0]); // 顯示第一項(xiàng) colors[2] = "black"; // 修改第三項(xiàng) colors[3] = "brown"; // 新增第四項(xiàng) 如果設(shè) 置某個(gè)值的索引超過(guò)了數(shù)組現(xiàn)有項(xiàng)數(shù),如這個(gè)例子中的 colors[3]所示,數(shù)組就會(huì)自動(dòng)增加到該索引 值加 1 的長(zhǎng)度(就這個(gè)例子而言,索引是 3,因此數(shù)組長(zhǎng)度就是 4)。 ? 數(shù)組的 length 屬性很有特點(diǎn)——它不是只讀的。因此,通過(guò)設(shè)置這個(gè)屬性,可以從數(shù)組的末尾移 除項(xiàng)或向數(shù)組中添加新項(xiàng)。請(qǐng)看下面的例子: var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含 3 個(gè)字符串的數(shù)組
colors.length = 2;
alert(colors[2]); //undefined 如果將其 length屬性設(shè)置為大于數(shù)組 項(xiàng)數(shù)的值,則新增的每一項(xiàng)都會(huì)取得 undefined 值,如下所示: var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含 3 個(gè)字符串的數(shù)組
colors.length = 4;
alert(colors[3]); //undefined 利用 length 屬性也可以方便地在數(shù)組末尾添加新項(xiàng),如下所示: var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含 3 個(gè)字符串的數(shù)組
colors[colors.length] = "black"; //(在位置3)添加一種顏色
colors[colors.length] = "brown"; //(在位置4)再添加一種顏色 數(shù)組最多可以包含 4 294 967 295 個(gè)項(xiàng). 5.2.1 檢測(cè)數(shù)組 對(duì)于一個(gè)網(wǎng)頁(yè),或者一個(gè)全局作用域而言,使用 instanceof 操作符就能得到滿意的結(jié)果: if (value instanceof Array){
//對(duì)數(shù)組執(zhí)行某些操作
} instanceof 操作符的問(wèn)題在于,它假定只有一個(gè)全局執(zhí)行環(huán)境。如果網(wǎng)頁(yè)中包含多個(gè)框架,那實(shí) 際上就存在兩個(gè)以上不同的全局執(zhí)行環(huán)境,從而存在兩個(gè)以上不同版本的 Array構(gòu)造函數(shù)。如果你從 一個(gè)框架向另一個(gè)框架傳入一個(gè)數(shù)組,那么傳入的數(shù)組與在第二個(gè)框架中原生創(chuàng)建的數(shù)組分別具有各自 不同的構(gòu)造函數(shù)。 ? 為了解決這個(gè)問(wèn)題,ECMAScript 5 新增了 Array.isArray()方法。這個(gè)方法的目的是最終確定某 個(gè)值到底是不是數(shù)組,而不管它是在哪個(gè)全局執(zhí)行環(huán)境中創(chuàng)建的。這個(gè)方法的用法如下。 if (Array.isArray(value)){
//對(duì)數(shù)組執(zhí)行某些操作
} 支持 Array.isArray()方法的瀏覽器有 IE9+、Firefox 4+、Safari 5+、Opera 10.5+和 Chrome。 5.2.2 轉(zhuǎn)換方法 所有對(duì)象都具有 toLocaleString()、toString()和 valueOf()方法。其中,調(diào)用 數(shù)組的 toString()方法會(huì)返回由數(shù)組中每個(gè)值的字符串形式拼接而成的一個(gè)以逗號(hào)分隔的字符串。而 調(diào)用 valueOf()返回的還是數(shù)組。實(shí)際上,為了創(chuàng)建這個(gè)字符串會(huì)調(diào)用數(shù)組每一項(xiàng)的 toString()方 法。 ? 當(dāng)調(diào)用數(shù)組的 toLocaleString()方法時(shí),它也會(huì)創(chuàng)建一個(gè)數(shù)組值的以逗號(hào)分隔的字符 串。而與前兩個(gè)方法唯一的不同之處在于,這一次為了取得每一項(xiàng)的值,調(diào)用的是每一項(xiàng)的 toLocale- String()方法,而不是 toString()方法。 eg: var person1 = { toLocaleString : function () { return "Nikolaos"; }, toString : function() { return "Nicho";
} };
var person2 = { toLocaleString : function () { return "Grigorios"; }, toString : function() { return "Greg";
} };
var people = [person1, person2];
alert(people); //Nicho,Greg
alert(people.toString()); //Nicho,Greg
alert(people.toLocaleString()); //Nikolaos,Grigorios 數(shù)組繼承的 toLocaleString()、toString()和 valueOf()方法,在默認(rèn)情況下都會(huì)以逗號(hào)分隔的字 符串的形式返回?cái)?shù)組項(xiàng)。而如果使用 join()方法,則可以使用不同的分隔符來(lái)構(gòu)建這個(gè)字符串。join()方 法只接收一個(gè)參數(shù),即用作分隔符的字符串,然后返回包含所有數(shù)組項(xiàng)的字符串。 eg: var colors = [1, "green", "blue"];colors.join("||"); // "1||green||blue" 我們使用 join()方法重現(xiàn)了 toString()方法的輸出。在傳遞逗號(hào)的情況下,得到了以 逗號(hào)分隔的數(shù)組值。 var colors = [1, "green", "blue"];
colors.toString(); //"1,green,blue"
//colors.join(",") //"1,green,blue" 如果不給 join()方法傳入任何值,或者給它傳入 undefined,則使用逗號(hào)作為分隔 符。IE7 及更早版本會(huì)錯(cuò)誤的使用字符串"undefined"作為分隔符。 eg: var colors = [1, "blue","red"];//colors.join() //"1,blue,red"
//colors.join("undefined") //"1undefinedblueundefinedred"
colors.join(undefined) //"1,blue,red"
//colors.join(null) //"1nullbluenullred" 如果數(shù)組中的某一項(xiàng)的值是 null 或者 undefined,那么該值在 join()、 toLocaleString()、toString()和 valueOf()方法返回的結(jié)果中以空字符串表示。 eg: var colors = [1, undefined, "blue",null];//colors.join(",") //"1,,blue,"
//colors.toString() //"1,,blue,"
colors.valueOf() //[1, undefined, "blue", null]
//colors.toLocaleString() //"1,,blue," colors.valueOf()結(jié)果并未預(yù)想的以空字符串表示？？？ eg: var nobody = [1,,"red"];
var color = [1,2,"red"];
var nullArr = [1,null,"red"];
var undefinedArr = [1,undefined,"red"];//nobody.valueOf() //[1, undefined, "red"]
//nobody.join(",") //"1,,red"
//nobody.toString() //"1,,red"
//nobody instanceof Array //true//color.valueOf() //[1, 2, "red"]
//color.join(",") //"1,2,red"
//color.toString() //"1,2,red"
//color instanceof Array //true//nullArr.valueOf() //[1, null, "red"]
//nullArr.join(",") //"1,,red"
//nullArr.toString() //"1,,red"
//nullArr instanceof Array //true//undefinedArr.valueOf() //[1, undefined, "red"]
//undefinedArr.join(",") //"1,,red"
undefinedArr.toString() //"1,,red"
//undefinedArr instanceof Array //true 分析：當(dāng)數(shù)組某一項(xiàng)為空時(shí)，valueOf結(jié)果為undefined,其他情況都返回原來(lái)值（null的valueOf結(jié)果為null,undefined的valueOf結(jié)果為undefined）; 而當(dāng)數(shù)組某項(xiàng)為空或null或nudefined：join(",")和toString()的結(jié)果都為空。 5.2.3 棧方法 棧是一種 LIFO(Last-In-First-Out, 后進(jìn)先出)的數(shù)據(jù)結(jié)構(gòu),也就是最新添加的項(xiàng)最早被移除。而棧中項(xiàng)的插入(叫做推入)和移除(叫做 彈出),只發(fā)生在一個(gè)位置——棧的頂部。ECMAScript 為數(shù)組專門提供了 push()和 pop()方法,以便 實(shí)現(xiàn)類似棧的行為。 ? push()方法可以接收任意數(shù)量的參數(shù),把它們逐個(gè)添加到數(shù)組末尾,并返回修改后數(shù)組的長(zhǎng)度。而 pop()方法則從數(shù)組末尾移除最后一項(xiàng),減少數(shù)組的 length 值,然后返回移除的項(xiàng)。 eg: var colors = new Array();
var count = colors.push("red", "green");console.log(count); //2
count = colors.push("black");console.log(count); //3
console.log(colors); // ["red", "green", "black"]var item = colors.pop();console.log(item); //black
console.log(colors.length); //2
console.log(colors); // ["red", "green"] 5.2.4 隊(duì)列方法 隊(duì)列數(shù)據(jù)結(jié)構(gòu)的訪問(wèn)規(guī)則是 FIFO(First-In-First-Out, 先進(jìn)先出)。隊(duì)列在列表的末端添加項(xiàng),從列表的前端移除項(xiàng)。shift(),它能夠移除數(shù)組中的第一個(gè)項(xiàng)并返回該項(xiàng),同時(shí)將數(shù)組長(zhǎng)度減 1。結(jié)合使用 shift()和 push()方法,可以像使 用隊(duì)列一樣使用數(shù)組。 eg: var colors = new Array();
var count = colors.push("red", "green");console.log(count); //2
count = colors.push("black");console.log(count); //3
console.log(colors); // ["red", "green", "black"]var item = colors.shift();console.log(item); //red
console.log(colors.length); //2
console.log(colors); // ["green", "black"] unshift()與 shift()的用途相反: 它能在數(shù)組前端添加任意個(gè)項(xiàng)并返回新數(shù)組的長(zhǎng)度。因此,同時(shí)使用 unshift()和 pop()方法,可以從相反的方向來(lái)模擬隊(duì)列,即在數(shù)組的前端添加項(xiàng),從數(shù)組末端移除項(xiàng)。 eg: var colors = new Array();
var count = colors.unshift("red", "green");console.log(count); //2
count = colors.unshift("black");console.log(count); //3
console.log(colors); // ["black", "red", "green"]var item = colors.pop();console.log(item); //green
console.log(colors.length); //2
console.log(colors); // ["black", "red"] ? ? 5.2.5 重排序方法 數(shù)組中已經(jīng)存在兩個(gè)可以直接用來(lái)重排序的方法:reverse()和 sort()。有讀者可能猜到了, reverse()方法會(huì)反轉(zhuǎn)數(shù)組項(xiàng)的順序。 eg: var values = [1, 2, 3, 4, 5];
values.reverse(); alert(values); //5,4,3,2,1 在默認(rèn)情況下,sort()方法按升序排列數(shù)組項(xiàng)——即最小的值位于最前面,最大的值排在最后面。 為了實(shí)現(xiàn)排序,sort()方法會(huì)調(diào)用每個(gè)數(shù)組項(xiàng)的 toString()轉(zhuǎn)型方法,然后比較得到的字符串,以 確定如何排序。即使數(shù)組中的每一項(xiàng)都是數(shù)值,sort()方法比較的也是字符串。 eg: var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5 sort()方法也會(huì)根據(jù)測(cè)試字符串的結(jié)果改變?cè)瓉?lái)的順序。 因?yàn)閿?shù)值 5 雖然小于 10,但在進(jìn)行字符串比較時(shí),"10"則位于"5"的前面,于是數(shù)組的順序就被修改了。 sort()方法可以接收一個(gè)比較函數(shù)作為參 數(shù),以便我們指定哪個(gè)值位于哪個(gè)值的前面。 eg: function compare(){return -1;} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [0, 10, 2, 15] 函數(shù)返回－1時(shí)，順序不變。 eg2: function compare(){return 1;} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [15, 2, 10, 0] 函數(shù)返回1時(shí)，順序相反。 eg3: function compare(){return 0;} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [0, 10, 2, 15] 函數(shù)返回0時(shí)，順序不變。 eg4: function compare(value1, value2) {if (value1 < value2) {return -1;} else if (value1 > value2) {return 1;} else {return 0; }} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [0, 2, 10, 15] 在將比較函數(shù)傳遞到 sort()方法之后,數(shù)值仍然保持了正確的升序。 eg5: function compare(value1, value2) {if (value1 < value2) {return 1;} else if (value1 > value2) {return -1;} else {return 0; }} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [15, 10, 2, 0] 通過(guò)比較函數(shù)產(chǎn)生降序排序的結(jié)果,只要交換比較函數(shù)返回的值即可。 ? 對(duì)于數(shù)值類型或者其 valueOf()方法會(huì)返回?cái)?shù)值類型的對(duì)象類型,可以使用一個(gè)更簡(jiǎn)單的比較函數(shù)。這個(gè)函數(shù)只要用第二個(gè)值減第一個(gè)值即可 function compare(value1, value2){ return value2 - value1; } 由于比較函數(shù)通過(guò)返回一個(gè)小于零、等于零或大于零的值來(lái)影響排序結(jié)果,因此減法操作就可以適 當(dāng)?shù)靥幚硭羞@些情況。 ? 5.2.6 操作方法 concat()方法可以基于當(dāng)前數(shù) 組中的所有項(xiàng)創(chuàng)建一個(gè)新數(shù)組。具體來(lái)說(shuō),這個(gè)方法會(huì)先創(chuàng)建當(dāng)前數(shù)組一個(gè)副本,然后將接收到的參數(shù) 添加到這個(gè)副本的末尾,最后返回新構(gòu)建的數(shù)組。在沒(méi)有給 concat()方法傳遞參數(shù)的情況下,它只是 復(fù)制當(dāng)前數(shù)組并返回副本。如果傳遞給 concat()方法的是一或多個(gè)數(shù)組,則該方法會(huì)將這些數(shù)組中的 每一項(xiàng)都添加到結(jié)果數(shù)組中。如果傳遞的值不是數(shù)組,這些值就會(huì)被簡(jiǎn)單地添加到結(jié)果數(shù)組的末尾。 eg: 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(),它能夠基于當(dāng)前數(shù)組中的一或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組。slice()方法可以 接受一或兩個(gè)參數(shù),即要返回項(xiàng)的起始和結(jié)束位置。在只有一個(gè)參數(shù)的情況下,slice()方法返回從該 參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)。如果有兩個(gè)參數(shù),該方法返回起始和結(jié)束位置之間的項(xiàng)— —但不包括結(jié)束位置的項(xiàng)。注意,slice()方法不會(huì)影響原始數(shù)組。 eg: 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 如果 slice()方法的參數(shù)中有一個(gè)負(fù)數(shù),則用數(shù)組長(zhǎng)度加上該數(shù)來(lái)確定相應(yīng)的位 置。例如,在一個(gè)包含 5 項(xiàng)的數(shù)組上調(diào)用 slice(-2,-1)與調(diào)用 slice(3,4)得到的 結(jié)果相同。如果結(jié)束位置小于起始位置,則返回空數(shù)組。 ? splice()方法,這個(gè)方法恐怕要算是最強(qiáng)大的數(shù)組方法了,它有很多種用法。 splice()的主要用途是向數(shù)組的中部插入項(xiàng),但使用這種方法的方式則有如下 3 種。
if (num <=1) {return 1;} else {return num * factorial(num-1)} };var trueFactorial = factorial;factorial = function(){ return 0; };console.log(trueFactorial(5)); //0 console.log(factorial(5)); //0 2.this 函數(shù)內(nèi)部的另一個(gè)特殊對(duì)象是 this,其行為與 Java 和 C#中的 this 大致類似。換句話說(shuō),this 引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象——或者也可以說(shuō)是 this 值(當(dāng)在網(wǎng)頁(yè)的全局作用域中調(diào)用函數(shù)時(shí), this 對(duì)象引用的就是 window)。 eg: window.color = "red"; var o = { color: "blue" }; function sayColor(){ console.log(this.color); } sayColor(); // red o.sayColor = sayColor; o.sayColor(); // blue 分析：函數(shù) sayColor()是在全局作用域中定義的,它引用了 this 對(duì)象。當(dāng)在全局作用域中調(diào)用 sayColor()時(shí),this 引用的是全局對(duì)象 window;而當(dāng)把這個(gè)函數(shù)賦給對(duì)象 o 并調(diào)用 o.sayColor() 2 時(shí),this 引用的是對(duì)象 o。 函數(shù)的名字僅僅是一個(gè)包含指針的變量而已。因此,即使是 在不同的環(huán)境中執(zhí)行,全局的 sayColor()函數(shù)與 o.sayColor()指向的仍然是同一 個(gè)函數(shù)。 ? ECMAScript 5 也規(guī)范化了另一個(gè)函數(shù)對(duì)象的屬性:caller。除了 Opera 的早期版本不支持,其他 4 瀏覽器都支持這個(gè) ECMAScript 3 并沒(méi)有定義的屬性。這個(gè)屬性中保存著調(diào)用當(dāng)前函數(shù)的函數(shù)的引用, 如果是在全局作用域中調(diào)用當(dāng)前函數(shù),它的值為 null。 eg: function outer(){ inner(); }; function inner(){ alert(inner.caller); }; outer(); //function outer(){inner();} 分析：因?yàn)?outer()調(diào)用了 inter(),所以inner.caller 就指向 outer()。為了實(shí)現(xiàn)更松散的耦合,也可以通過(guò) arguments.callee.caller來(lái)訪問(wèn)相同的信息。 eg: function outer(){ inner();}
function inner(){ alert(arguments.callee.caller); } outer(); // function outer(){inner();} IE、Firefox、Chrome 和 Safari 的所有版本以及 Opera 9.6 都支持 caller 屬性。 當(dāng)函數(shù)在嚴(yán)格模式下運(yùn)行時(shí),訪問(wèn) arguments.callee 會(huì)導(dǎo)致錯(cuò)誤。ECMAScript 5 還定義了 arguments.caller 屬性,但在嚴(yán)格模式下訪問(wèn)它也會(huì)導(dǎo)致錯(cuò)誤,而在非嚴(yán)格模式下這個(gè)屬性始終是 undefined。定義這個(gè)屬性是為了分清 arguments.caller 和函數(shù)的 caller 屬性。以上變化都是為 了加強(qiáng)這門語(yǔ)言的安全性,這樣第三方代碼就不能在相同的環(huán)境里窺視其他代碼了。 嚴(yán)格模式還有一個(gè)限制:不能為函數(shù)的 caller 屬性賦值,否則會(huì)導(dǎo)致錯(cuò)誤。 ? 5.5.5 函數(shù)屬性和方法 ? ?
values.reverse(); alert(values); //5,4,3,2,1 在默認(rèn)情況下,sort()方法按升序排列數(shù)組項(xiàng)——即最小的值位于最前面,最大的值排在最后面。 為了實(shí)現(xiàn)排序,sort()方法會(huì)調(diào)用每個(gè)數(shù)組項(xiàng)的 toString()轉(zhuǎn)型方法,然后比較得到的字符串,以 確定如何排序。即使數(shù)組中的每一項(xiàng)都是數(shù)值,sort()方法比較的也是字符串。 eg: var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5 sort()方法也會(huì)根據(jù)測(cè)試字符串的結(jié)果改變?cè)瓉?lái)的順序。 因?yàn)閿?shù)值 5 雖然小于 10,但在進(jìn)行字符串比較時(shí),"10"則位于"5"的前面,于是數(shù)組的順序就被修改了。 sort()方法可以接收一個(gè)比較函數(shù)作為參 數(shù),以便我們指定哪個(gè)值位于哪個(gè)值的前面。 eg: function compare(){return -1;} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [0, 10, 2, 15] 函數(shù)返回－1時(shí)，順序不變。 eg2: function compare(){return 1;} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [15, 2, 10, 0] 函數(shù)返回1時(shí)，順序相反。 eg3: function compare(){return 0;} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [0, 10, 2, 15] 函數(shù)返回0時(shí)，順序不變。 eg4: function compare(value1, value2) {if (value1 < value2) {return -1;} else if (value1 > value2) {return 1;} else {return 0; }} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [0, 2, 10, 15] 在將比較函數(shù)傳遞到 sort()方法之后,數(shù)值仍然保持了正確的升序。 eg5: function compare(value1, value2) {if (value1 < value2) {return 1;} else if (value1 > value2) {return -1;} else {return 0; }} var values = [0, 10,2,15];values.sort(compare);console.log(values); // [15, 10, 2, 0] 通過(guò)比較函數(shù)產(chǎn)生降序排序的結(jié)果,只要交換比較函數(shù)返回的值即可。 ? 對(duì)于數(shù)值類型或者其 valueOf()方法會(huì)返回?cái)?shù)值類型的對(duì)象類型,可以使用一個(gè)更簡(jiǎn)單的比較函數(shù)。這個(gè)函數(shù)只要用第二個(gè)值減第一個(gè)值即可 function compare(value1, value2){ return value2 - value1; } 由于比較函數(shù)通過(guò)返回一個(gè)小于零、等于零或大于零的值來(lái)影響排序結(jié)果,因此減法操作就可以適 當(dāng)?shù)靥幚硭羞@些情況。 ? 5.2.6 操作方法 concat()方法可以基于當(dāng)前數(shù) 組中的所有項(xiàng)創(chuàng)建一個(gè)新數(shù)組。具體來(lái)說(shuō),這個(gè)方法會(huì)先創(chuàng)建當(dāng)前數(shù)組一個(gè)副本,然后將接收到的參數(shù) 添加到這個(gè)副本的末尾,最后返回新構(gòu)建的數(shù)組。在沒(méi)有給 concat()方法傳遞參數(shù)的情況下,它只是 復(fù)制當(dāng)前數(shù)組并返回副本。如果傳遞給 concat()方法的是一或多個(gè)數(shù)組,則該方法會(huì)將這些數(shù)組中的 每一項(xiàng)都添加到結(jié)果數(shù)組中。如果傳遞的值不是數(shù)組,這些值就會(huì)被簡(jiǎn)單地添加到結(jié)果數(shù)組的末尾。 eg: 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(),它能夠基于當(dāng)前數(shù)組中的一或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組。slice()方法可以 接受一或兩個(gè)參數(shù),即要返回項(xiàng)的起始和結(jié)束位置。在只有一個(gè)參數(shù)的情況下,slice()方法返回從該 參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)。如果有兩個(gè)參數(shù),該方法返回起始和結(jié)束位置之間的項(xiàng)— —但不包括結(jié)束位置的項(xiàng)。注意,slice()方法不會(huì)影響原始數(shù)組。 eg: 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 如果 slice()方法的參數(shù)中有一個(gè)負(fù)數(shù),則用數(shù)組長(zhǎng)度加上該數(shù)來(lái)確定相應(yīng)的位 置。例如,在一個(gè)包含 5 項(xiàng)的數(shù)組上調(diào)用 slice(-2,-1)與調(diào)用 slice(3,4)得到的 結(jié)果相同。如果結(jié)束位置小于起始位置,則返回空數(shù)組。 ? splice()方法,這個(gè)方法恐怕要算是最強(qiáng)大的數(shù)組方法了,它有很多種用法。 splice()的主要用途是向數(shù)組的中部插入項(xiàng),但使用這種方法的方式則有如下 3 種。
- 刪除:可以刪除任意數(shù)量的項(xiàng),只需指定 2 個(gè)參數(shù):要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除的項(xiàng)數(shù)。 例如,splice(0,2)會(huì)刪除數(shù)組中的前兩項(xiàng)。
- 插入:可以向指定位置插入任意數(shù)量的項(xiàng),只需提供 3 個(gè)參數(shù):起始位置、0(要?jiǎng)h除的項(xiàng)數(shù)) 和要插入的項(xiàng)。如果要插入多個(gè)項(xiàng),可以再傳入第四、第五,以至任意多個(gè)項(xiàng)。例如, splice(2,0,"red","green")會(huì)從當(dāng)前數(shù)組的位置 2 開始插入字符串"red"和"green"。
- 替換:可以向指定位置插入任意數(shù)量的項(xiàng),且同時(shí)刪除任意數(shù)量的項(xiàng),只需指定 3 個(gè)參數(shù):起 始位置、要?jiǎng)h除的項(xiàng)數(shù)和要插入的任意數(shù)量的項(xiàng)。插入的項(xiàng)數(shù)不必與刪除的項(xiàng)數(shù)相等。例如, splice (2,1,"red","green")會(huì)刪除當(dāng)前數(shù)組位置 2 的項(xiàng),然后再?gòu)奈恢?2 開始插入字符串 "red"和"green"。
- splice()方法始終都會(huì)返回一個(gè)數(shù)組,該數(shù)組中包含從原始數(shù)組中刪除的項(xiàng)(如果沒(méi)有刪除任何 項(xiàng),則返回一個(gè)空數(shù)組)。
- every():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對(duì)每一項(xiàng)都返回 true,則返回 true。
- filter():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),返回該函數(shù)會(huì)返回 true 的項(xiàng)組成的數(shù)組。
- forEach():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。這個(gè)方法沒(méi)有返回值。
- map():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
- some():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對(duì)任一項(xiàng)返回 true,則返回 true。
- “月/日/年”,如 6/13/2004;
- “英文月名 日,年”,如 January 12,2004;
- “英文星期幾 英文月名 日 年 時(shí):分:秒 時(shí)區(qū)”,如 Tue May 25 2004 00:00:00 GMT-0700。
- ISO 8601 擴(kuò)展格式 YYYY-MM-DDTHH:mm:ss.sssZ(例如 2004-05-25T00:00:00)。只有兼容
- toDateString()——以特定于實(shí)現(xiàn)的格式顯示星期幾、月、日和年;
- toTimeString()——以特定于實(shí)現(xiàn)的格式顯示時(shí)、分、秒和時(shí)區(qū);
- toLocaleDateString()——以特定于地區(qū)的格式顯示星期幾、月、日和年;
- toLocaleTimeString()——以特定于實(shí)現(xiàn)的格式顯示時(shí)、分、秒;
- toUTCString()——以特定于實(shí)現(xiàn)的格式完整的 UTC 日期。
- ?g:表示全局(global)模式,即模式將被應(yīng)用于所有字符串,而非在發(fā)現(xiàn)第一個(gè)匹配項(xiàng)時(shí)立即 停止;
- ?i:表示不區(qū)分大小寫(case-insensitive)模式,即在確定匹配項(xiàng)時(shí)忽略模式與字符串的大小寫;
- ?m:表示多行(multiline)模式,即在到達(dá)一行文本末尾時(shí)還會(huì)繼續(xù)查找下一行中是否存在與模式匹配的項(xiàng)。
- global:布爾值,表示是否設(shè)置了 g 標(biāo)志。
- ignoreCase:布爾值,表示是否設(shè)置了 i 標(biāo)志。
- lastIndex:整數(shù),表示開始搜索下一個(gè)匹配項(xiàng)的字符位置,從 0 算起。
- multiline:布爾值,表示是否設(shè)置了 m 標(biāo)志。
- source:正則表達(dá)式的字符串表示,按照字面量形式而非傳入構(gòu)造函數(shù)中的字符串模式返回。
- ?input 屬性返回了原始字符串;
- ?leftContext 屬性返回了單詞 short 之前的字符串,而 rightContext 屬性則返回了 short
- ?lastMatch 屬性返回最近一次與整個(gè)正則表達(dá)式匹配的字符串,即 short;
- ?lastParen 屬性返回最近一次匹配的捕獲組,即例子中的 s。
- 匹配字符串開始和結(jié)尾的\A 和\Z 錨；但支持以插入符號(hào)(^)和美元符號(hào)($)來(lái)匹配字符串的開始和結(jié)尾。
- 向后查找(lookbehind)；但完全支持向前查找(lookahead)。
- 并集和交集類
- 原子組(atomic grouping)
- Unicode 支持(單個(gè)字符除外,如\uFFFF)
- 命名的捕獲組；但支持編號(hào)的捕獲組。
- s(single,單行)和 x(free-spacing,無(wú)間隔)匹配模式
- 條件匹配
- 正則表達(dá)式注釋
if (num <=1) {return 1;} else {return num * factorial(num-1)} };var trueFactorial = factorial;factorial = function(){ return 0; };console.log(trueFactorial(5)); //0 console.log(factorial(5)); //0 2.this 函數(shù)內(nèi)部的另一個(gè)特殊對(duì)象是 this,其行為與 Java 和 C#中的 this 大致類似。換句話說(shuō),this 引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象——或者也可以說(shuō)是 this 值(當(dāng)在網(wǎng)頁(yè)的全局作用域中調(diào)用函數(shù)時(shí), this 對(duì)象引用的就是 window)。 eg: window.color = "red"; var o = { color: "blue" }; function sayColor(){ console.log(this.color); } sayColor(); // red o.sayColor = sayColor; o.sayColor(); // blue 分析：函數(shù) sayColor()是在全局作用域中定義的,它引用了 this 對(duì)象。當(dāng)在全局作用域中調(diào)用 sayColor()時(shí),this 引用的是全局對(duì)象 window;而當(dāng)把這個(gè)函數(shù)賦給對(duì)象 o 并調(diào)用 o.sayColor() 2 時(shí),this 引用的是對(duì)象 o。 函數(shù)的名字僅僅是一個(gè)包含指針的變量而已。因此,即使是 在不同的環(huán)境中執(zhí)行,全局的 sayColor()函數(shù)與 o.sayColor()指向的仍然是同一 個(gè)函數(shù)。 ? ECMAScript 5 也規(guī)范化了另一個(gè)函數(shù)對(duì)象的屬性:caller。除了 Opera 的早期版本不支持,其他 4 瀏覽器都支持這個(gè) ECMAScript 3 并沒(méi)有定義的屬性。這個(gè)屬性中保存著調(diào)用當(dāng)前函數(shù)的函數(shù)的引用, 如果是在全局作用域中調(diào)用當(dāng)前函數(shù),它的值為 null。 eg: function outer(){ inner(); }; function inner(){ alert(inner.caller); }; outer(); //function outer(){inner();} 分析：因?yàn)?outer()調(diào)用了 inter(),所以inner.caller 就指向 outer()。為了實(shí)現(xiàn)更松散的耦合,也可以通過(guò) arguments.callee.caller來(lái)訪問(wèn)相同的信息。 eg: function outer(){ inner();}
function inner(){ alert(arguments.callee.caller); } outer(); // function outer(){inner();} IE、Firefox、Chrome 和 Safari 的所有版本以及 Opera 9.6 都支持 caller 屬性。 當(dāng)函數(shù)在嚴(yán)格模式下運(yùn)行時(shí),訪問(wèn) arguments.callee 會(huì)導(dǎo)致錯(cuò)誤。ECMAScript 5 還定義了 arguments.caller 屬性,但在嚴(yán)格模式下訪問(wèn)它也會(huì)導(dǎo)致錯(cuò)誤,而在非嚴(yán)格模式下這個(gè)屬性始終是 undefined。定義這個(gè)屬性是為了分清 arguments.caller 和函數(shù)的 caller 屬性。以上變化都是為 了加強(qiáng)這門語(yǔ)言的安全性,這樣第三方代碼就不能在相同的環(huán)境里窺視其他代碼了。 嚴(yán)格模式還有一個(gè)限制:不能為函數(shù)的 caller 屬性賦值,否則會(huì)導(dǎo)致錯(cuò)誤。 ? 5.5.5 函數(shù)屬性和方法 ? ?
轉(zhuǎn)載于:https://www.cnblogs.com/xmyun/p/6415296.html
總結(jié)
以上是生活随笔為你收集整理的javascript高级程序设计 学习笔记 第五章 上的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [转载]如何做到 jQuery-free
- 下一篇： 【ExtJS】FormPanel 布局(