05js課件-4 .javascript基礎(chǔ)第2章核心

JavaScript

核心啟奧-Web前端培訓(xùn)教程第2章授課目標(biāo)：對(duì)象的創(chuàng)建及操作數(shù)組的創(chuàng)建及操作

函數(shù)的定義及使用

JS內(nèi)部對(duì)象介紹復(fù)合型數(shù)據(jù)啟奧-Web前端培訓(xùn)教程對(duì)象和數(shù)組啟奧-Web前端培訓(xùn)教程對(duì)象和數(shù)組都不是單一的值，而是一組值的集合對(duì)象：一組已命名值的集合，對(duì)象的值可以是任意數(shù)據(jù)類(lèi)型數(shù)組：一組值的有序集合，通過(guò)下標(biāo)定義數(shù)組的順序，數(shù)組的值可以是任意數(shù)據(jù)類(lèi)型，包含數(shù)組。如果一個(gè)數(shù)組的值還是數(shù)組，這樣的數(shù)組就是多維數(shù)組對(duì)象啟奧-Web前端培訓(xùn)教程JS中的對(duì)象啟奧-Web前端培訓(xùn)教程JS語(yǔ)言是基于對(duì)象的（Object-Based），而不是面向?qū)ο蟮模╫bject-oriented）。之所以說(shuō)它是一門(mén)基于對(duì)象的語(yǔ)言，主要是因?yàn)樗鼪](méi)有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z(yǔ)言的許多功能。而是把其它語(yǔ)言所創(chuàng)建的復(fù)雜對(duì)象統(tǒng)一起來(lái)，從而形成一個(gè)非常強(qiáng)大的對(duì)象系統(tǒng)。雖然JS語(yǔ)言是一門(mén)基于對(duì)象的語(yǔ)言，但它還是具有一些面向?qū)ο蟮幕咎卣?。它可以根?jù)需要?jiǎng)?chuàng)建自己的對(duì)象，從而進(jìn)一步擴(kuò)大JavaScript的應(yīng)用范圍，增強(qiáng)編寫(xiě)功能強(qiáng)大的Web文檔。對(duì)象的結(jié)構(gòu)與用途啟奧-Web前端培訓(xùn)教程對(duì)象是由屬性(properties)和方法(methods)兩個(gè)基本的元素的構(gòu)成的。前者是對(duì)象在實(shí)施其所需要行為的過(guò)程中，實(shí)現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對(duì)象能夠按照設(shè)計(jì)者的意圖而被執(zhí)行，從而與特定的函數(shù)相聯(lián)一個(gè)對(duì)象要真正的被使用，可采用以下幾種方式：引用JavaScript內(nèi)部對(duì)象由瀏覽器環(huán)境中提供創(chuàng)建新對(duì)象這就是說(shuō)一個(gè)對(duì)象在被引用之前，這個(gè)對(duì)象必須存在，否則引用將毫無(wú)意義，從而出現(xiàn)錯(cuò)誤信息。從上面中我們可以看出JavaScript引用對(duì)象可通過(guò)三種方式獲取。要么創(chuàng)建新的對(duì)象，要么利用現(xiàn)存的對(duì)象。創(chuàng)建對(duì)象啟奧-Web前端培訓(xùn)教程使用new運(yùn)算符來(lái)創(chuàng)建空對(duì)象varmyobj=newObject();//注意new后面的Object的大小寫(xiě)Object是JS的內(nèi)置對(duì)象，但new后面的Object()

并不是這個(gè)對(duì)象本身，而是它的構(gòu)造函數(shù)直接量創(chuàng)建對(duì)象varmyobj={};//創(chuàng)建一個(gè)空對(duì)象varmyobj={name:"對(duì)象a"，job:"學(xué)生"};//創(chuàng)建帶有屬性的對(duì)象所有對(duì)象的值都包含在一對(duì)"

{}

"里，各個(gè)屬性之間以","分割，屬性名和屬性值之間，以":"連接注：對(duì)象中的"{}"，是一種值的表現(xiàn)形式，與語(yǔ)句中的代碼塊不同，因此在對(duì)象的"{}"后可以出現(xiàn)";"對(duì)象的屬性啟奧-Web前端培訓(xùn)教程通常我們使用"."運(yùn)算符來(lái)存取對(duì)象的屬性值位于"."左側(cè)的是我們要訪(fǎng)問(wèn)的對(duì)象右側(cè)是屬性或方法名，它必須是一個(gè)"標(biāo)識(shí)符

"，而不能是字符串或表達(dá)式特殊情況下，我們還可以使用"[]"，來(lái)訪(fǎng)問(wèn)屬性，如：myobj["name"]，注意屬性名在[]中的表現(xiàn)形式varobj={name:"a"};vartmp="a";alert(obj.tmp);vartmp="name";alert(obj[tmp]);到這你蒙圈了沒(méi)有？對(duì)象屬性的操作啟奧-Web前端培訓(xùn)教程屬性的枚舉枚舉：列出有窮序列集的所有成員枚舉與遍歷的區(qū)別：從字面理解，遍歷是

對(duì)對(duì)象中的所有成員逐一訪(fǎng)問(wèn)；而枚舉是

將對(duì)象中的成員逐一列舉。但是在此處，枚舉與遍歷所表達(dá)的意義相同判斷屬性是否存在：in當(dāng)屬性存在卻未賦值時(shí)，同樣返回false屬性的刪除：deletefor(vartmpinobj){alert(o[tmp]);}varobj={name:"a"};alert(nameinobj);varobj={name:"a"};alert("name"inobj);;alert("name"inobj);Object的基本屬性與方法啟奧-Web前端培訓(xùn)教程JS所有內(nèi)置對(duì)象都繼承自O(shè)bject類(lèi)，它們都定義了自己的屬性和方法（如：Array，Date）。在以后的課程中，我們會(huì)單獨(dú)介紹不同對(duì)象的方法。但是，所有創(chuàng)建的對(duì)象也支持Object所定義的屬性和方法。這里，我們簡(jiǎn)單列舉幾個(gè)所有對(duì)象都具備的，通用的屬性和方法，當(dāng)然，這些屬性和方法在短時(shí)間內(nèi)我們還用不到，僅作了解即可。[屬性]constructor：在JS中，每個(gè)對(duì)象都有一個(gè)constructor屬性，它引用了初始化這個(gè)對(duì)象的構(gòu)造函數(shù)[方法]toString()：該方法沒(méi)有參數(shù)，它返回一個(gè)某種程度上代表著對(duì)象的值的一個(gè)字符串[方法]valueOf()：和toString很像，但是它是當(dāng)JS需要把一個(gè)對(duì)象轉(zhuǎn)換為某種基本數(shù)據(jù)類(lèi)型而并不僅僅是字符串的時(shí)候，才調(diào)用的方法數(shù)組啟奧-Web前端培訓(xùn)教程JS中的數(shù)組啟奧-Web前端培訓(xùn)教程數(shù)組是一組值的有序集合，數(shù)組中的這些值叫做元素（element）；每個(gè)元素在數(shù)組中的位置叫做下標(biāo)（index）同一數(shù)組中的不同元素可以是不同數(shù)據(jù)類(lèi)型（JS屬于弱類(lèi)型語(yǔ)言）創(chuàng)建數(shù)組空數(shù)組：vararr=new

Array();指定長(zhǎng)度：vararr=newArray(

3

);指定元素：vararr=newArray("元素1","元素2","元素3");數(shù)組賦值：arr[0

]=“元素1”;//數(shù)組的下標(biāo)從0開(kāi)始數(shù)組的直接量：vararr=["元素1","元素2","元素3"];數(shù)組的讀寫(xiě)啟奧-Web前端培訓(xùn)教程通常情況下，我們使用[]來(lái)存取數(shù)組，[]的左邊是數(shù)組的名稱(chēng)，[]內(nèi)是數(shù)組的下標(biāo)數(shù)組下標(biāo)是從

0開(kāi)始的，最大值必須小于232-1如果使用的數(shù)字太大或者為負(fù)數(shù)，則JS會(huì)將這個(gè)下標(biāo)轉(zhuǎn)化為字符串，并且將這個(gè)字符串作為對(duì)象的屬性名添加數(shù)組元素：給數(shù)組指定下標(biāo)賦值JS的數(shù)組非常靈活，不必在創(chuàng)建數(shù)組時(shí)就制定數(shù)組長(zhǎng)度，即使制定了數(shù)組長(zhǎng)度，也可以隨意增加數(shù)組元素?cái)?shù)組元素的下標(biāo)不必須落在一個(gè)連續(xù)的數(shù)字范圍內(nèi)a[-1]="新數(shù)組";//為對(duì)象a創(chuàng)建了一個(gè)名為"-1"的屬性a[0]="元素1";a[100]="元素2";基本操作啟奧-Web前端培訓(xùn)教程數(shù)組的長(zhǎng)度length：數(shù)組的長(zhǎng)度就是指數(shù)組中包含的元素個(gè)數(shù)vararr=[2,4,6];arr.length;//3由于數(shù)組的下標(biāo)從0開(kāi)始，因此數(shù)組的長(zhǎng)度會(huì)比數(shù)組的最大下標(biāo)大1vararr=[2,4,6];arr[arr.length-1];//6刪除數(shù)組delete：同對(duì)象操作中刪除屬性使用delete

刪除數(shù)組值后，會(huì)將該值置為undefined，但元素本身還存在，也就是說(shuō)delete

操作并不減小數(shù)組長(zhǎng)度要真正刪除一個(gè)元素，使該元素之后的所有元素下標(biāo)前移？答案在后面遍歷數(shù)組forin：同對(duì)象操作中的遍歷vararr=[2,4,6];

for(varainarr)

{

alert(arr[a]);

}如果已知數(shù)組下標(biāo)是連續(xù)的，并且從0開(kāi)始，那么我們還可以通過(guò)數(shù)組長(zhǎng)度進(jìn)行for循環(huán)遍歷：for(vari=0;i<arr.length;i++){alert(arr[i]);}多維數(shù)組啟奧-Web前端培訓(xùn)教程我們之前所談?wù)摰臄?shù)組都是一維數(shù)組，在其他程序語(yǔ)言中，數(shù)組除了一維之外，還包括多維數(shù)組（二維或二維以上）多維數(shù)組從直觀的角度來(lái)理解，就是數(shù)組套數(shù)組的關(guān)系，JS雖然并不支持真正的多維數(shù)組，但是它允許數(shù)組的元素為數(shù)組，這就非常接近多維數(shù)組通常情況下，我們可以用for循環(huán)的方式來(lái)存取多維數(shù)組，在使用中，我們可以使用多個(gè)[]運(yùn)算符來(lái)完成多維數(shù)組的操作vararr=[1,2,3,4,5,6];for(vari=0;i<arr.length;i++){arr[i]=[1,2,3,4,5];}alert(arr[3][3]);試試用多維數(shù)組實(shí)現(xiàn)一個(gè)班級(jí)信息管理表數(shù)組的方法啟奧-Web前端培訓(xùn)教程增加push(e1,e2,e3...)：在數(shù)組末尾追加元素，并返回?cái)?shù)組的新長(zhǎng)度unshift(e1,e2,e3...)：在數(shù)組頭部添加元素，并返回?cái)?shù)組的新長(zhǎng)度concat(arr1,arr2,arr3...)：合并兩個(gè)或多個(gè)數(shù)組并返回集合刪除pop()：刪除并返回?cái)?shù)組的最后一個(gè)元素shift()：刪除并返回?cái)?shù)組的第一個(gè)元素子數(shù)組splice(s,e,ele1,ele2,ele3...

)：在指定位置插入指定的項(xiàng)slice(s,e)：在數(shù)組中選擇一部分組成新數(shù)組數(shù)組的方法啟奧-Web前端培訓(xùn)教程數(shù)組排序reverse()：反轉(zhuǎn)數(shù)組sort()：根據(jù)元素對(duì)數(shù)組進(jìn)行排序數(shù)組轉(zhuǎn)換toString()：將數(shù)組轉(zhuǎn)換為字符串并返回join()：用指定分隔符分割數(shù)組并返回字符串函數(shù)啟奧-Web前端培訓(xùn)教程函數(shù)的定義啟奧-Web前端培訓(xùn)教程定義函數(shù)的最常用方法就是調(diào)用function語(yǔ)句，該語(yǔ)句是由關(guān)鍵字function構(gòu)成的，它后面跟隨的是：函數(shù)名

包含在圓括號(hào)中的0個(gè)參數(shù)或多個(gè)參數(shù)，其中每個(gè)參數(shù)用逗號(hào)分開(kāi)構(gòu)成函數(shù)主體的JavaScript語(yǔ)句，包含在花括號(hào)中函數(shù)的創(chuàng)建傳統(tǒng)函數(shù)：function

fn(x)

{

alert(

x

);

}

函數(shù)的直接量：varfn=function(){alert("測(cè)試");}vararr=newFunction("","alert('測(cè)試');");//注意函數(shù)體的雙引號(hào)函數(shù)的命名：函數(shù)的命名規(guī)則和標(biāo)識(shí)符是完全一樣，通常是動(dòng)詞或者以動(dòng)詞開(kāi)頭函數(shù)的參數(shù)啟奧-Web前端培訓(xùn)教程參數(shù)類(lèi)型形參：定義函數(shù)時(shí)使用的參數(shù)，如上面的x實(shí)參：調(diào)用函數(shù)時(shí)傳遞給函數(shù)的實(shí)際參數(shù)，如調(diào)用上面的函數(shù)jiayi(4)參數(shù)特性：JS中的函數(shù)屬于寬松類(lèi)型對(duì)于參數(shù)的數(shù)據(jù)類(lèi)型沒(méi)有限制對(duì)于參數(shù)的個(gè)數(shù)沒(méi)有限制（但是傳遞順序有嚴(yán)格限制），傳遞過(guò)程中，多余的參數(shù)會(huì)被忽略，當(dāng)傳遞的參數(shù)不足，被遺漏的參數(shù)將被默認(rèn)為undefined參數(shù)列表：Arguments

對(duì)象作用：Arguments對(duì)象是一個(gè)類(lèi)似數(shù)組的對(duì)象，可以按照數(shù)目獲取傳遞給函數(shù)的參數(shù)（arguments[0]表示實(shí)際傳遞的第一個(gè)參數(shù)）屬性：callee

屬性，用于引用當(dāng)前正在執(zhí)行的函數(shù)函數(shù)的調(diào)用方法啟奧-Web前端培訓(xùn)教程直接調(diào)用函數(shù)名(參數(shù))在鏈接中調(diào)用<ahref="javascript:函數(shù)名(參數(shù));">鏈接</a>在事件中調(diào)用事件類(lèi)型="函數(shù)名(參數(shù));"遞歸調(diào)用function函數(shù)名(參數(shù)){函數(shù)名(參數(shù));}作為數(shù)據(jù)的函數(shù)啟奧-Web前端培訓(xùn)教程在JS中，函數(shù)不只是一種語(yǔ)法，還可以是數(shù)據(jù)functionsquare(x){returnx*x;}這里的函數(shù)名沒(méi)有實(shí)質(zhì)意義，它只是用來(lái)引用函數(shù)的變量，我們可以將這個(gè)變量通過(guò)函數(shù)名再轉(zhuǎn)移給其他變量vara=square;varb=a(5);函數(shù)的返回值

return：在函數(shù)中使用return語(yǔ)句，即可向函數(shù)外部傳遞一個(gè)值出來(lái)默認(rèn)情況下，函數(shù)執(zhí)行完畢之后，都會(huì)返回一個(gè)undefined在函數(shù)的任意位置，都可以使用return語(yǔ)句，當(dāng)return語(yǔ)句執(zhí)行時(shí)，函數(shù)體將被終止除了賦給全局變量外，我們還可以將函數(shù)賦給對(duì)象的屬性，這時(shí)的函數(shù)叫做對(duì)象的方法方法中的指針標(biāo)識(shí)this：方法中被隱式傳遞的參數(shù)，表示當(dāng)前調(diào)用函數(shù)的對(duì)象內(nèi)部對(duì)象啟奧-Web前端培訓(xùn)教程JS中的內(nèi)部對(duì)象啟奧-Web前端培訓(xùn)教程我們說(shuō)JS是基于對(duì)象的編程語(yǔ)言，也就是說(shuō)，JS代碼中的所有內(nèi)容，都是以對(duì)象為基點(diǎn)開(kāi)始的JS中的內(nèi)部對(duì)象Number、String、Boolean、Object、Array、FunctionArguments、Global、Date、Math、RegExp、ErrorJavaPackage、JavaObject、JavaClass、JavaArray在這部分內(nèi)容里，我們只針對(duì)幾個(gè)比較常用的對(duì)象進(jìn)行了解StringGlobalMathDateString對(duì)象啟奧-Web前端培訓(xùn)教程String對(duì)象啟奧-Web前端培訓(xùn)教程屬性length：字符串中字符的個(gè)數(shù)，包含所有符號(hào)方法：JS中關(guān)于字符串的方法有很多，我們將對(duì)這些方法進(jìn)行分類(lèi)，再?gòu)闹羞x擇一些比較實(shí)用的方法進(jìn)行學(xué)習(xí)查找方法：字符查找、位置查找、匹配查找操作方法：拼接、截取、空格處理編碼方法：編碼與解碼轉(zhuǎn)換方法：大小寫(xiě)轉(zhuǎn)換，數(shù)組轉(zhuǎn)換String對(duì)象查找方法啟奧-Web前端培訓(xùn)教程字符查找：chatAt(n)：返回字符串中的第n

個(gè)字符位置查找：indexOf("s")：從前向后查找"s"

在字符串中第一次出現(xiàn)的位置lastIndexOf("s")：從后向前查找"s"

在字符串中第一次出現(xiàn)的位置匹配查找match()：根據(jù)正則表達(dá)式匹配內(nèi)容search()：同上replace()：根據(jù)正則表達(dá)式替換內(nèi)容String對(duì)象操作方法啟奧-Web前端培訓(xùn)教程拼接：concat()：把一個(gè)或多個(gè)值連接到字符串上，等價(jià)于"+"連接符截?。簊lice(s,e)：截取一個(gè)子字符串，從索引s開(kāi)始，到e結(jié)束，不包含esubstring(f,t)：與slice基本相同，不接受負(fù)參數(shù)substr(s,l)：截取一個(gè)子字符串，從索引s

開(kāi)始，截取l

個(gè)字符空格處理trim()：去除字符串首尾空格String對(duì)象編碼方法與轉(zhuǎn)換方法啟奧-Web前端培訓(xùn)教程編碼與解碼：encodeURI()：將字符串轉(zhuǎn)為16進(jìn)制序列decodeURI()：對(duì)encodeURI進(jìn)行解碼注：以上兩個(gè)函數(shù)并非String對(duì)象的方法，而是全局函數(shù)（Global）轉(zhuǎn)換：toUpperCase()：全部轉(zhuǎn)換為大寫(xiě)toLowerCase()：全部轉(zhuǎn)換為小寫(xiě)split(

"分隔符")：通過(guò)分隔符將字符串轉(zhuǎn)換為數(shù)組Global對(duì)象啟奧-Web前端培訓(xùn)教程Global對(duì)象啟奧-Web前端培訓(xùn)教程Global是一個(gè)全局對(duì)象，但它并不是一個(gè)類(lèi)，所以雖然所有全局變量都是Global的屬性，但并不可以在Global下去查找這些屬性：undefined是一個(gè)全局屬性，但是不可以通過(guò)Global.undefined使用它JS運(yùn)行在什么環(huán)境下，這個(gè)環(huán)境就是Global，通常我們所操作的Global是WindowGlobal的屬性：Infinity：無(wú)窮大NaN：非數(shù)值undefined：未定義的值Global對(duì)象啟奧-Web前端培訓(xùn)教程Global的函數(shù)：eval()：計(jì)算JS字符串，并把它作為腳本代碼來(lái)執(zhí)行encodeURI()：將字符串轉(zhuǎn)為16進(jìn)制序列decodeURI()：對(duì)encodeURI進(jìn)行解碼Number()：將對(duì)象轉(zhuǎn)為數(shù)字parseFloat()：將字符串轉(zhuǎn)為浮點(diǎn)數(shù)值parseIn