JavaScript程序設(shè)計基礎(chǔ)與實戰(zhàn)- 課件 模塊8　JavaScript編程技巧及應(yīng)用

JavaScript編程技巧及應(yīng)用JavaScript程序設(shè)計基礎(chǔ)與實戰(zhàn)Learning

andpractice時間:演講人：目錄/DIRECTORY養(yǎng)成良好的JavaScript編程習(xí)慣編寫JavaScript程序時可能存在的問題優(yōu)化JavaScript代碼與提升程序性能JavaScript的異常處理JavaScript代碼的調(diào)試變量的結(jié)構(gòu)賦值JSON及其使用方法正確使用cookie實戰(zhàn)演練1.養(yǎng)成良好的JavaScript編程習(xí)慣

編寫JavaScript程序時，盡量養(yǎng)成良好的編程習(xí)慣，這樣可以提高編程效率，減少程序錯誤。（1）盡量少使用全局變量和函數(shù)。全局變量和函數(shù)可能會被其他腳本覆蓋，建議使用局部變量和函數(shù)替代。（2）始終聲明局部變量。所有在函數(shù)中使用的變量都應(yīng)該被聲明為局部變量。局部變量必須通過var或let關(guān)鍵字來聲明，否則它們將變成全局變量。嚴(yán)格模式不允許出現(xiàn)未聲明的變量。（3）把所有變量聲明放在每個腳本或函數(shù)的頂部。在腳本或函數(shù)頂部聲明變量的好處如下：獲得更整潔的代碼、提供查找局部變量的好位置、更容易避免聲明不需要的全局變量、減少不需要的重復(fù)聲明的可能性。例如：//在頂部聲明varprice,numamount;//稍后使用price=21.80;num=5;amount=price*num

；1.養(yǎng)成良好的JavaScript編程習(xí)慣

（4）在聲明時進(jìn)行變量初始化。在聲明時進(jìn)行變量初始化的好處如下：獲得更整潔的代碼、在單獨的位置初始化變量、避免變量未賦值。在聲明時進(jìn)行變量初始化使讀者能夠了解變量的預(yù)期用途和預(yù)期的數(shù)據(jù)類型。例如：//在開頭進(jìn)行變量聲明和初始化varname="",price=0,myArray=[],myObject={};（5）不要聲明Number、String或Boolean對象。建議始終將Number、String或Boolean值視作原始值，而非對象。如果把它們聲明為對象，則會拖慢代碼的執(zhí)行速度，并產(chǎn)生無法預(yù)料的副作用。例如：varx="張珊";vary=newString("張珊");(x===y)//結(jié)果為false，因為x是字符串，而y是對象1.養(yǎng)成良好的JavaScript編程習(xí)慣

（6）少使用newObject()等。建議使用{}來代替newObject()，使用""來代替newString()，使用0來代替newNumber()，使用false來代替newBoolean()，使用[]來代替newArray()，使用/()/來代替newRegExp()，使用function(){}來代替newFunction()。例如：varx1={};//新對象varx2="";//新的原始字符串varx3=0;//新的原始數(shù)值varx4=false;//新的原始布爾值varx5=[];//新的數(shù)組對象varx6=/()/;//新的正則表達(dá)式varx7=function(){};//新的函數(shù)對象（7）編寫程序時需要意識到數(shù)據(jù)類型可能會自動轉(zhuǎn)換。JavaScript是一種弱類型語言，變量可以定義為不同的數(shù)據(jù)類型，并且變量的數(shù)據(jù)類型可能會自動轉(zhuǎn)換。數(shù)值會被意外轉(zhuǎn)換為字符串或NaN。1.養(yǎng)成良好的JavaScript編程習(xí)慣

varx="Hello";//typeofx返回stringx=5;//typeofx返回number如果進(jìn)行數(shù)學(xué)運算，則JavaScript能夠?qū)?shù)值轉(zhuǎn)換為字符串，例如：varx=5+7;//x.valueOf()返回2,typeofx返回numbervarx=5+"7";//x.valueOf()返回57,typeofx返回stringvarx="5"+7;//x.valueOf()返回57,typeofx返回stringvarx=5-7;//x.valueOf()返回-2,typeofx返回numbervarx=5-"7";//x.valueOf()返回-2,typeofx返回numbervarx="5"-7;//x.valueOf()返回-2,typeofx返回numbervarx=5-"x";//x.valueOf()返回NaN,typeofx返回number1.養(yǎng)成良好的JavaScript編程習(xí)慣

如果使用字符串減去字符串，則不會產(chǎn)生錯誤而是返回NaN，例如："Hello"-"張珊"http://返回NaN（8）使用“===”運算符進(jìn)行比較?！?=”運算符總是在比較之前對操作數(shù)進(jìn)行類型轉(zhuǎn)換，以匹配類型，而“===”運算符會強制對值和類型進(jìn)行比較，例如：0=="";//true1=="1";//true1==true;//true0==="";//false1==="1";//false1===true;//false1.養(yǎng)成良好的JavaScript編程習(xí)慣

（9）靈活設(shè)置參數(shù)的默認(rèn)值。如果調(diào)用函數(shù)時缺少一個參數(shù)，那么這個缺少的參數(shù)的值會被設(shè)置為undefined，undefined可能會破壞代碼，所以為參數(shù)設(shè)置默認(rèn)值是一個好習(xí)慣。例如：functionmyFunction(x,y){if(y===undefined){y=0;}}（10）使用default來結(jié)束switch語句。即使認(rèn)為沒有這個必要，也建議使用default來結(jié)束switch語句。1.養(yǎng)成良好的JavaScript編程習(xí)慣

【示例8-1】demo0801.html代碼如下：varday="";switch(newDate().getDay()){case0:day="星期日";break;case1:day="星期一";break;case2:day="星期二";break;case3:day="星期三";break;case4:day="星期四";break;case5:day="星期五";break;case6:day="星期六";break;default:day="Unknown";}document.write("今天是"+day);2.

編寫JavaScript程序時可能存在的誤區(qū)用戶編寫JavaScript程序時可能會遇到一些誤區(qū)，因此，在編寫時應(yīng)盡量注意以下問題。1．意外使用賦值運算符意外使用賦值運算符的情況舉例如下。varx=0;if(x==10)這條if語句中的條件表達(dá)式會返回false（正如預(yù)期），因為x不等于10。如果在if語句中意外使用賦值運算符“=”而不是比較運算符“==”，則JavaScript程序可能會產(chǎn)生一些無法預(yù)料的結(jié)果。例如：varx=0;if(x=10)這條if語句中的條件表達(dá)式會返回true（也許不如預(yù)期），因為10的布爾值為true。例如：varx=0;if(x=0)這條if語句中的條件表達(dá)式會返回false（也許不如預(yù)期），因為0的布爾值為false。2.

編寫JavaScript程序時可能存在的誤區(qū)2．期望松散的比較在JavaScript程序的常規(guī)比較中，數(shù)據(jù)類型的重要性不是很明顯。以下if語句中的條件表達(dá)式會返回true。varx=10;vary="10";if(x==y)在嚴(yán)格模式的比較中，數(shù)據(jù)類型很重要。以下if語句中的條件表達(dá)式會返回false。varx=10;vary="10";if(x===y)一個常見的錯誤是，忘記在switch語句中使用的是嚴(yán)格比較。執(zhí)行以下switch語句會彈出警告框。varx=10;switch(x){case10:alert("Hello");}執(zhí)行以下switch語句不會彈出警告框。varx=10;switch(x){case"10":alert("Hello");}2.

編寫JavaScript程序時可能存在的誤區(qū)3．令人困惑的加法和連接運算符在JavaScript程序中，加法運算用于數(shù)值求和，連接運算用于連接字符串，這兩種運算均使用“+”運算符。正因如此，將數(shù)字作為數(shù)值相加與將數(shù)字作為字符串相加，將產(chǎn)生不同的結(jié)果。varx=10+5;//x的結(jié)果是15varx=10+"5";//x的結(jié)果是"105"4．令人誤解的浮點數(shù)JavaScript中的數(shù)字均保存為64位的浮點數(shù)。所有編程語言，包括JavaScript，都存在處理浮點數(shù)的問題。例如：varx=0.1;vary=0.2;varz=x+y//z的結(jié)果并不是0.3為了解決上述問題，可使用乘除運算。varz=(x*10+y*10)/10;//z的結(jié)果將是0.32.

編寫JavaScript程序時可能存在的誤區(qū)5．對JavaScript字符串換行JavaScript允許把一條語句換行為兩行。例如：varx="HelloWorld!";但是，在字符串中間換行是錯誤的。例如：varx="HelloWorld!";如果必須在字符串中換行，則必須使用反斜杠。例如：varx="Hello\World!";6．對return語句進(jìn)行換行在一行的結(jié)尾自動關(guān)閉語句是JavaScript的默認(rèn)行為。正因如此，下面兩個示例返回相同的結(jié)果。示例1：functionmyFunction(a){varpower=10returna*power}2.

編寫JavaScript程序時可能存在的誤區(qū)示例2：functionmyFunction(a){varpower=10;returna*power;}7．通過命名索引來訪問數(shù)組很多編程語言支持帶有命名索引的數(shù)組，帶有命名索引的數(shù)組被稱為關(guān)聯(lián)數(shù)組。（1）JavaScript的數(shù)組支持使用數(shù)字索引。在JavaScript中，數(shù)組可以使用數(shù)字索引。

【示例8-2】demo0802.html代碼如下：varperson=[];person[0]="吉琳";person[1]="女";person[2]=20;varlen=person.length;//person.length將返回3varname=person[0];//person[0]將返回"吉琳"document.write("數(shù)組的元素個數(shù)為"+len+"<br>");document.write("數(shù)組第1個元素的值為"+name);2.

編寫JavaScript程序時可能存在的誤區(qū)瀏覽demo0802.html網(wǎng)頁時，輸出結(jié)果如下。數(shù)組的元素個數(shù)為3數(shù)組的第1個元素的值為吉琳（2）JavaScript不支持?jǐn)?shù)組使用命名索引。在JavaScript中，如果數(shù)組使用命名索引，那么在訪問數(shù)組時，JavaScript會將數(shù)組重新定義為標(biāo)準(zhǔn)對象。在自動重新定義之后，數(shù)組方法或?qū)傩詫⒎祷豼ndefined或產(chǎn)生不正確的結(jié)果。

【示例8-3】demo0803.html代碼如下：varperson=[];person["name"]="吉琳";person["sex"]="女";person["age"]=20;varlen=person.length;//person.length將返回0varname=person[0];//person[0]將返回undefineddocument.write("數(shù)組的元素個數(shù)為"+len+"<br>");document.write("數(shù)組第1個元素的值為"+name);瀏覽demo0803.html網(wǎng)頁時，輸出結(jié)果如下。數(shù)組的元素個數(shù)為0數(shù)組第1個元素的值為undefined2.

編寫JavaScript程序時可能存在的誤區(qū)8．用逗號來結(jié)束定義對象和數(shù)組定義中的結(jié)尾逗號在ES5中是合法的。對象實例：person={name:"吉琳",sex:"女",age:20,}數(shù)組實例：points=[35,450,2,7,30,16,];但JSON不允許使用逗號結(jié)尾。例如：person={"name":"吉琳","sex":"女","age":20}9．undefined不是nullJavaScript的對象、變量、屬性和方法可以是undefined。另外，空的JavaScript對象的值可以為null，這可能會使判斷對象是否為空變得有些困難?？梢酝ㄟ^判斷類型是否為undefined來判斷對象是否存在。2.

編寫JavaScript程序時可能存在的誤區(qū)例如：if(typeofmyObj==="undefined")但是無法直接判斷對象是否為null，因為如果對象類型為undefined，則將拋出錯誤。以下代碼不正確：if(myObj===null)要解決此問題，必須判斷對象是否為null，且對象類型不是undefined。但這仍然可能會引發(fā)錯誤，例如：if(myObj!==null&&typeofmyObj!=="undefined")因此，在判斷對象不是null之前，必須先判斷對象類型是否為undefined，例如：if(typeofmyObj!=="undefined"&&myObj!==null)10．期望塊級范圍很多編程語言不會為每個代碼塊創(chuàng)建新的作用域，但是JavaScript并非如此。認(rèn)為以下代碼會返回undefined，是剛?cè)腴T的JavaScript開發(fā)者經(jīng)常犯的錯誤。for(vari=0;i<10;i++){//代碼塊}returni;3.

優(yōu)化JavaScript代碼與提升程序性能1．減少循環(huán)中的活動編寫JavaScript程序時，經(jīng)常會用到循環(huán)，循環(huán)每迭代一次，循環(huán)中的每條語句，包括for語句，都會被執(zhí)行一次。將可以在循環(huán)語句代碼之前執(zhí)行的賦值操作或其他語句移至循環(huán)語句代碼之前，會使循環(huán)語句運行得更快。執(zhí)行效率較低的代碼示例如下。vari;for(i=0;i<arr.length;i++){}執(zhí)行以上代碼，循環(huán)語句每次迭代時，都要訪問數(shù)組的length屬性。執(zhí)行效率更高的代碼示例如下。vari;varn=arr.length;for(i=0;i<n;i++){}執(zhí)行以上代碼后，會在執(zhí)行循環(huán)語句代碼之前訪問length屬性，使循環(huán)語句運行得更快。3.

優(yōu)化JavaScript代碼與提升程序性能2．避免定義不必要的變量不要創(chuàng)建不打算存儲值的新變量。在以下代碼中，fullName變量可以不定義。varfullName=firstName+""+lastName;document.getElementById("demo").innerHTML=fullName;直接使用以下代碼即可。document.getElementById("demo").innerHTML=firstName+""+lastName3．避免使用with關(guān)鍵字避免使用with關(guān)鍵字，它對代碼的執(zhí)行速度有負(fù)面影響，可能會混淆JavaScript作用域。嚴(yán)格模式中不允許使用with關(guān)鍵字。4．減少DOM訪問次數(shù)與其他JavaScript訪問相比，DOM訪問較緩慢。假如期望使用某個DOM元素若干次，那么只需訪問一次，并把它作為本地變量來使用。例如：varobj;obj=document.getElementById("demo");obj.innerHTML="Hello";3.

優(yōu)化JavaScript代碼與提升程序性能5．盡量縮減DOM規(guī)模盡量保持DOM中的元素數(shù)量較小，這么做可以提高頁面加載速度，并加快渲染（頁面顯示），尤其是在較小型的設(shè)備上效果更明顯。6．延遲JavaScript加載通常HTTP規(guī)范要求瀏覽器不應(yīng)該并行下載超過兩種要素。通常把JavaScript放在頁面底部，使瀏覽器先加載頁面，并在下載腳本時，瀏覽器不會啟動任何其他內(nèi)容的下載。可以選擇在<script>標(biāo)簽中使用defer="true"。defer屬性用于規(guī)定腳本應(yīng)該在頁面完成解析后執(zhí)行，但它只適用于加載外部腳本文件。如果可能，可以在頁面完成加載后，通過代碼向頁面添加腳本，例如：<script>window.onload=downScripts;functiondownScripts(){varelement=document.createElement("script");element.src="myScript.js";document.body.appendChild(element);}</script>4.

JavaScript的異常處理在JavaScript中，異常（Exception）是指程序在執(zhí)行過程中遇到的錯誤或異常情況，當(dāng)JavaScript引擎執(zhí)行JavaScript代碼時，可能會出現(xiàn)以下異常。（1）因開發(fā)者的編碼錯誤或錯別字導(dǎo)致的語法異常。（2）瀏覽器不支持某些JavaScript功能導(dǎo)致的異常（可能由于瀏覽器差異引起）。（3）由于來自服務(wù)器的信息或用戶的錯誤輸入而導(dǎo)致的異常。（4）由于許多其他不可預(yù)知的原因?qū)е碌漠惓?。JavaScript提供了以下異常處理語句。1．try…catch…語句當(dāng)錯誤發(fā)生或事件出現(xiàn)問題時，JavaScript將拋出異常。JavaScript使用try…catch…語句處理這些異常，try語句和catch語句總是成對出現(xiàn)的。其語法格式如下。try{//供測試的代碼塊}catch(err){//這里為處理錯誤的代碼塊}4.

JavaScript的異常處理try語句用于測試代碼塊的錯誤，允許用戶定義在執(zhí)行時進(jìn)行錯誤測試的代碼塊。catch語句用于處理錯誤，允許定義當(dāng)執(zhí)行try代碼塊中的代碼并發(fā)生錯誤時所執(zhí)行的代碼塊。在下面的示例代碼中，故意在try代碼塊的代碼中將“alert”寫為“Alert”，即首字母寫成大寫形式的“A”。catch代碼塊會捕捉try代碼塊中的錯誤，并執(zhí)行代碼來處理它?！臼纠?-4】demo0804.html代碼如下：vartxt="";try{Alert("歡迎您!");}catch(err){txt="本頁有一個錯誤。\n";txt+="錯誤描述："+err.message;alert(txt);}瀏覽網(wǎng)頁demo0804.html時，會彈出如圖8-1所示的錯誤提示信息警告框。4.

JavaScript的異常處理2．throw語句throw語句允許用戶自行定義錯誤或拋出異常消息。如果throw與try…catch…一起使用，則能夠控制程序流，并生成自定義的異常消息。其語法格式如下。throwexception異?？梢允荍avaScript字符串、數(shù)字、布爾值或?qū)ο??！臼纠?-5】demo0805.html代碼如下：functionmyFunction(){try{varx=document.getElementById("demo").value;if(x=="")throw"值為空";if(isNaN(x))throw"不是數(shù)字";}catch(err){vary=document.getElementById("mess");y.innerHTML="錯誤："+err+"。";}}</script><inputid="demo"type="text"><inputtype="button"onclick="myFunction()"value="測試輸入值"><pid="mess"></p>4.

JavaScript的異常處理以上示例代碼用于測試輸入的值。如果值是錯誤的，則會拋出一個異常。catch會捕捉到這個異常，并顯示一段自定義的異常消息。執(zhí)行以上示例代碼，如果調(diào)用getElementById()函數(shù)出錯，則也會拋出一個異常。網(wǎng)頁demo0805.html的初始狀態(tài)如圖8-2所示。如果文本框中沒有輸入字符或數(shù)值，直接單擊“測試輸入值”按鈕，則會顯示“錯誤：值為空。”的提示信息；如果在文本框中輸入字母“a”，單擊“測試輸入值”按鈕，則會顯示“錯誤：不是數(shù)字?！钡奶崾拘畔?；如果在文本框中輸入數(shù)字“23”，單擊“測試輸入值”按鈕，則不會顯示提示信息。4.

JavaScript的異常處理提示信息；如果在文本框中輸入數(shù)字“23”，單擊“測試輸入值”按鈕，則不會顯示提示信息。3．finally語句finally語句用于存放try…catch…之后執(zhí)行的代碼，且這些代碼無論如何都會執(zhí)行。其語法格式如下。try{//供測試的代碼塊}catch(err){//處理錯誤的代碼塊}finally{//無論如何都會執(zhí)行的代碼塊}4．error對象JavaScript擁有當(dāng)錯誤發(fā)生時提供錯誤信息的內(nèi)置error對象。error對象可提供兩個有用的屬性：name和message。其中，name屬性用于設(shè)置或返回錯誤名，message屬性用于以字符串形式設(shè)置或返回錯誤消息。5.

JavaScript代碼的調(diào)試在沒有調(diào)試器的情況下編寫JavaScript代碼是有一定難度的，因為JavaScript代碼中可能會包含語法錯誤或者邏輯錯誤，如果沒有調(diào)試器，則這些錯誤都難以診斷。通常，如果JavaScript代碼包含錯誤，則執(zhí)行代碼時不會顯示錯誤消息，也不會有任何可供查找錯誤的指示信息。1．使用JavaScript調(diào)試器查找JavaScript代碼中的錯誤被稱為代碼調(diào)試，調(diào)試并不簡單。但幸運的是，所有現(xiàn)代瀏覽器都有內(nèi)置的調(diào)試器。內(nèi)置的調(diào)試器可打開或關(guān)閉、強制將錯誤報告給用戶。通過調(diào)試器，開發(fā)者可以在代碼中設(shè)置斷點（代碼執(zhí)行被中斷的位置），并在代碼執(zhí)行時檢查變量。通常通過按【F12】鍵啟動瀏覽器中的調(diào)試器，然后在調(diào)試器的菜單欄中選擇“控制臺”選項即可調(diào)試代碼。2．使用console.log()方法如果瀏覽器支持JavaScript代碼調(diào)試，那么可以使用console.log()方法在調(diào)試器中顯示JavaScript變量的值、表達(dá)式的值、函數(shù)返回值、程序運行結(jié)果等。3．在程序中設(shè)置斷點在調(diào)試器中，可以在JavaScript代碼中設(shè)置斷點，在每個斷點位置，JavaScript代碼將停止執(zhí)行，以供開發(fā)者檢查JavaScript代碼中的值是否正確，在檢查并確認(rèn)值無誤后再恢復(fù)代碼執(zhí)行。5.

JavaScript代碼的調(diào)試4．使用debugger關(guān)鍵字debugger關(guān)鍵字也會停止JavaScript代碼的執(zhí)行，并會調(diào)用調(diào)試函數(shù)（如果有）。這與在調(diào)試器中設(shè)置斷點的功能是一樣的。如果調(diào)試器不可用，則debugger語句沒有效果。例如：varx=5*3;debugger;console.log(x);如果調(diào)試器已打開，則此代碼會在執(zhí)行到第3行之前停止執(zhí)行。6.變量的解構(gòu)賦值1．?dāng)?shù)組解構(gòu)賦值數(shù)組解構(gòu)賦值就是把數(shù)組元素的值按照順序依次賦值給變量。通常情況下，在為一組變量賦值時，一般是這樣寫的：letx=10;lety=20;letz=30;現(xiàn)在可以進(jìn)行數(shù)組解構(gòu)賦值，代碼如下：let[x,y,z]=[10,20,30];二者的效果是一樣的。數(shù)組解構(gòu)賦值成功后，x的值為10，y的值為20，z的值為30。2．對象解構(gòu)賦值例如：let{x,y}={x:10,y:20};對象解構(gòu)賦值成功后，x的值為10，y的值為20。通過上述代碼可以看出，對象解構(gòu)賦值與數(shù)組解構(gòu)賦值有一個重要的區(qū)別：數(shù)組的元素是按順序排列的，變量的取值由它的位置決定；而對象的屬性沒有順序，變量是根據(jù)鍵來取值的。6.變量的解構(gòu)賦值3．字符串解構(gòu)賦值字符串也可以解構(gòu)賦值，因為字符串可以轉(zhuǎn)換為類似數(shù)組的對象。例如：const[a,b,c,d]='good';4．解構(gòu)賦值的要求解構(gòu)賦值的要求如下。（1）等號左右兩邊數(shù)據(jù)的結(jié)構(gòu)必須一致。例如：let[a,b,c]=[1,2,3];let{a,b,c}={a:1,b:2,c:3};let[{a,b},c]=[{a:1,b:2},3];以上任何一種解構(gòu)賦值方式都可以成功賦值，執(zhí)行語句console.log(a,b,c);的結(jié)果為123。（2）等號右邊數(shù)據(jù)的數(shù)據(jù)類型必須是有效的。執(zhí)行以下解構(gòu)賦值會報錯，因為右邊的{1,2}的數(shù)據(jù)類型不是JavaScript數(shù)據(jù)類型中的任何一種。let{a,b}={1,2};6.變量的解構(gòu)賦值（3）聲明和賦值不能分開。以下解構(gòu)賦值方式會報錯。let[a,b];[a,b]=[1,2];5．解構(gòu)賦值的默認(rèn)值在解構(gòu)賦值時，是允許使用默認(rèn)值的。例如：{//當(dāng)只有一個變量時let[x=true]=[];console.log(x);//輸出結(jié)果為true}{//當(dāng)有兩個變量時let[x,y]=['Hello']//將x賦值為"Hello"，y沒有賦值console.log(x+','+y);//輸出結(jié)果為"Hello,undefined"}6.變量的解構(gòu)賦值{//當(dāng)有兩個變量時let[x,y='vue']=['Hello']//將x賦值為"Hello"，y采用默認(rèn)值"vue"console.log(x+','+y);//輸出結(jié)果為"Hello,vue"}6．將變量解構(gòu)賦值為undefined和null的區(qū)別如果在對變量解構(gòu)賦值時，將其分別賦值為undefined和null，則會有什么區(qū)別呢？例如：{//y雖然被賦值為undefined，但是y會采用默認(rèn)值let[x,y='vue']=['Hello',undefined];console.log(x+','+y);//輸出結(jié)果為"Hello,vue"}{let[x,y='vue']=['Hello',null];//y被賦值為nullconsole.log(x+','+y);//輸出結(jié)果為"Hello,null"}上述代碼分析如下。undefined：相當(dāng)于什么都沒有，此時y采用默認(rèn)值。null：相當(dāng)于有值，但值為null。7.

JSON及其使用方法1．什么是JSON？JSON（JavaScriptObjectNotation，JavaScript對象表示法）是用于存儲和傳輸文本信息的數(shù)據(jù)格式，類似于XML。JSON文件比XML文件更小，傳輸速度更快，更易于解析。道格拉斯·克羅克福德（DouglasCrockford）發(fā)明了JSON數(shù)據(jù)格式來存儲數(shù)據(jù)，可以使用原生的JavaScript方法來存儲復(fù)雜的數(shù)據(jù)而不需要進(jìn)行任何額外的轉(zhuǎn)換。JSON是輕量級的數(shù)據(jù)交換格式，獨立于語言，其數(shù)據(jù)是“自描述的”，且易于理解。通過使用JSON，可以減少中間變量，使代碼的結(jié)構(gòu)更加清晰，也更加直觀。JSON格式的數(shù)據(jù)是純文本，可以使用任何編程語言編寫讀取和生成JSON數(shù)據(jù)的代碼。從本質(zhì)上講，JSON是用于描述復(fù)雜數(shù)據(jù)的最輕量級的方式之一，通常用于從服務(wù)器向網(wǎng)頁傳遞數(shù)據(jù)。7.

JSON及其使用方法2．JSON語法規(guī)則JSON的語法與創(chuàng)建JavaScript對象的語法相似。由于這種相似性，JavaScript程序可以很容易地將JSON數(shù)據(jù)轉(zhuǎn)換為本地的JavaScript對象。（1）使用“{”和“}”表示一個對象。（2）使用鍵值對的格式來表示數(shù)據(jù)。（3）使用方括號“[]”表示數(shù)組。（4）多個屬性用半角逗號“,”分隔，最后一個屬性后面不加逗號。3．JSON數(shù)據(jù)JSON數(shù)據(jù)的格式為鍵值對，類似于JavaScript對象屬性，一個名稱對應(yīng)一個值。鍵值對的表示方式如下。"鍵名":"值"鍵名和值之間使用半角冒號“:”分隔。鍵名必須是字符串，并且由雙引號標(biāo)識，而值可以是以下數(shù)據(jù)之一。①字符串：在JSON中，字符串必須由雙引號標(biāo)識，如{"siteName":"京東商城"}。②數(shù)字：JSON中的數(shù)字必須是整數(shù)或浮點數(shù)，如{"price":58.8}。③JSON對象：JSON對象是符合JSON規(guī)范的對象，由鍵值對組成。JSON中的值可以是對象，JSON中作為值的對象必須符合JSON對象規(guī)范。例如：{"site":{"siteName":"京東商城","url":"/"}}7.

JSON及其使用方法④數(shù)組：JSON中的值可以是數(shù)組。例如：{"sites":["京東商城","蘇寧易購","國美電器"]}⑤布爾值：JSON中的值可以是true或false，如{"sale":true}。⑥null：JSON中的值可以是null。JSON中的值不可以是以下數(shù)據(jù)之一：函數(shù)、日期、undefined。4．JSON數(shù)組JSON數(shù)組保存在方括號“[]”內(nèi)，數(shù)組可以包含對象，最后一個對象后面不需要加逗號。在以下JSON數(shù)組的定義代碼中，對象sites是一個數(shù)組，其中包含3個對象，每個對象都為網(wǎng)站的信息，由網(wǎng)站名和網(wǎng)站地址兩部分組成。{"sites":[{"siteName":"京東商城","url":"/"},{"siteName":"蘇寧易購","url":"/"},{"siteName":"國美電器","url":"/"}]}5．JSON字符串和JavaScript對象格式相互轉(zhuǎn)換用于實現(xiàn)JSON字符串和JavaScript對象格式相互轉(zhuǎn)換的函數(shù)如下。7.

JSON及其使用方法（1）JSON.parse()。該函數(shù)用于將一個JSON字符串轉(zhuǎn)換為JavaScript對象，它需要一個JSON字符串作為參數(shù)，會將該字符串轉(zhuǎn)換為JavaScript對象并返回。

【示例8-6】demo0806.html以下示例代碼用于從服務(wù)器中讀取JSON數(shù)據(jù)，并在網(wǎng)頁中顯示第2條數(shù)據(jù)，也就是sites[1]的數(shù)據(jù)。<pid="demo"></p><script>/**創(chuàng)建JavaScript字符串，字符串內(nèi)容為JSON格式的數(shù)據(jù)**/varsiteInfo='{"sites":['+'{"siteName":"京東商城","url":"/"},'+'{"siteName":"蘇寧易購","url":"/"},'+'{"siteName":"國美電器","url":"/"}]}';/**使用JavaScript內(nèi)置函數(shù)JSON.parse()將字符串轉(zhuǎn)換為JavaScript對象**/obj=JSON.parse(siteInfo);/**頁面中使用JavaScript對象從服務(wù)器中讀取JSON數(shù)據(jù)，并顯示數(shù)據(jù)**/document.getElementById("demo").innerHTML=obj.sites[1].siteName+""+obj.sites[1].url;</script>瀏覽網(wǎng)頁的結(jié)果如下：蘇寧易購/7.

JSON及其使用方法（2）JSON.stringify()。該函數(shù)用于將JavaScript對象轉(zhuǎn)換為JSON字符串，它需要一個JavaScript對象作為參數(shù)，會返回一個JSON字符串。例如：varobj={siteName:"京東商城",url:"/"};varstrJson=JSON.stringify(obj);console.log(strJson);執(zhí)行以上代碼，控制臺中的輸出結(jié)果如下。{"siteName":"京東商城","url":"/"}6．JSON與JavaScript對象的關(guān)系可以這樣簡單理解：JSON是JavaScript對象的字符串表示法，它使用文本表示一個JavaScript對象的信息，JSON數(shù)據(jù)本質(zhì)是字符串。//這是一個JavaScript對象，注意JavaScript對象的鍵名的引號可加可不加，但最好加上varobj={'a':'Hello','b':'World'};//這是一個JSON數(shù)據(jù)，本質(zhì)是一個字符串varjson='{"a":"Hello","b":"World"}';JSON.parse()用于將字符串轉(zhuǎn)換為JavaScript對象，JSON.stringify()用于將JavaScript對象轉(zhuǎn)換為字符串，前提是JavaScript對象符合JSON格式。7.

JSON及其使用方法例如：varobj=JSON.parse('{"a":"Hello","b":"World"}');//結(jié)果是{a:'Hello',b:'World'}，是一個JavaScript對象varjson=JSON.stringify({a:'Hello',b:'World'});//結(jié)果是'{"a":"Hello","b":"World"}'，是一個JSON格式的字符串8.

正確使用cookie1．cookie是什么cookie是存儲在用戶計算機的小文本文件中的數(shù)據(jù)。當(dāng)Web服務(wù)器向瀏覽器發(fā)送網(wǎng)頁后，連接被關(guān)閉，服務(wù)器便會“忘記用戶的一切”。cookie是為了解決“如何記住用戶信息”而發(fā)明的。當(dāng)用戶訪問網(wǎng)頁時，用戶名可以存儲在cookie中，下次用戶訪問該頁面時，瀏覽器即可通過cookie“回憶起”曾經(jīng)訪問過的用戶名。cookie保存在“名稱=值”中，如username=LiYi。瀏覽器向服務(wù)器請求一個網(wǎng)頁時，會將屬于該頁的cookie添加到該請求中。這樣服務(wù)器就能獲得必要的數(shù)據(jù)來“回憶起”用戶的信息。cookie存儲于用戶計算機中，用來識別用戶。當(dāng)訪問者瀏覽頁面時，其用戶名、密碼或當(dāng)前的日期會存儲在cookie中，當(dāng)再次訪問該頁面時，用戶名、密碼或日期可以從cookie中取回，從而可以在頁面中顯示歡迎信息或?qū)崿F(xiàn)自動登錄功能?？梢允褂肑avaScript來創(chuàng)建cookie和取回cookie的值。默認(rèn)情況下，瀏覽器在關(guān)閉時會刪除cookie。在JavaScript中可以使用document.cookie屬性創(chuàng)建、讀取、改變和刪除cookie。8.

正確使用cookie2．通過JavaScript創(chuàng)建cookie通過JavaScript創(chuàng)建cookie的語法格式如下。document.cookie="username=LiYi";還可以添加有效日期（UTC），例如：document.cookie="username=LiYi;expires=Sun16Oct202209:18:00UTC";通過path，可以告訴瀏覽器cookie屬于什么頁面。默認(rèn)情況下，cookie屬于當(dāng)前頁面。例如：document.cookie="username=LiYi;expires=Sun16Oct202209:18:00UTC;path=/";3．通過JavaScript讀取cookie通過JavaScript讀取cookie的語法格式如下。varx=document.cookie;document.cookie會在一個字符串中返回所有cookie，例如：cookie1=value;cookie2=value;cookie3=value;4．通過JavaScript改變cookie通過JavaScript，可以像創(chuàng)建cookie一樣改變它，例如：document.cookie="username=ChenYi;expires=Sun16Oct202209:18:00UTC;path=/";執(zhí)行該語句后，舊的cookie會被覆蓋。8.

正確使用cookie5．通過JavaScript刪除cookie刪除cookie非常簡單，刪除cookie時不必指定cookie值，直接把expires的值設(shè)置為過去的日期即可，例如：document.cookie="username=;expires=Thu,01Jan197000:00:00UTC;path=/;";此時，應(yīng)該指定cookie路徑以確保刪除正確的cookie，如果不指定路徑，則有些瀏覽器會不允許刪除cookie。6．cookie字符串document.cookie屬性看起來像一個正常的文本字符串，但其實它不是文本字符串。即使為document.cookie賦一個完整的cookie字符串，讀取時，也只能看到它的“名稱=值”。如果為document.cookie設(shè)置新的cookie，則舊的cookie不會被覆蓋，新的cookie會被添加到document.cookie中，所以如果讀取document.cookie，則得到的會是類似以下形式的“名稱=值”。cookie1=value;cookie2=value;如果想找到一個指定cookie的值，則必須編寫JavaScript代碼來搜索cookie字符串中的cookie值。7．cookie的應(yīng)用示例創(chuàng)建一個存儲用戶名的cookie，當(dāng)用戶首次訪問頁面時，其會被要求在文本框中輸入用戶名，然后該用戶名會存儲于cookie中。當(dāng)用戶再次訪問同一頁面時，頁面會根據(jù)cookie中的信息顯示歡迎信息。8.

正確使用cookie5．通過JavaScript刪除cookie刪除cookie非常簡單，刪除cookie時不必指定cookie值，直接把expires的值設(shè)置為過去的日期即可，例如：document.cookie="username=;expires=Thu,01Jan197000:00:00UTC;path=/;";此時，應(yīng)該指定cookie路徑以確保刪除正確的cookie，如果不指定路徑，則有些瀏覽器會不允許刪除cookie。6．cookie字符串document.cookie屬性看起來像一個正常的文本字符串，但其實它不是文本字符串。即使為document.cookie賦一個完整的cookie字符串，讀取時，也只能看到它的“名稱=值”。如果為document.cookie設(shè)置新的cookie，則舊的cookie不會被覆蓋，新的cookie會被添加到document.cookie中，所以如果讀取document.cookie，則得到的會是類似以下形式的“名稱=值”。cookie1=value;cookie2=value;如果想找到一個指定cookie的值，則必須編寫JavaScript代碼來搜索cookie字符串中的cookie值。7．cookie的應(yīng)用示例創(chuàng)建一個存儲用戶名的cookie，當(dāng)用戶首次訪問頁面時，其會被要求在文本框中輸入用戶名，然后該用戶名會存儲于cookie中。當(dāng)用戶再次訪問同一頁面時，頁面會根據(jù)cookie中的信息顯示歡迎信息。8.

正確使用cookie【示例8-7】demo0807.html在網(wǎng)頁demo0807.html中創(chuàng)建以下3個函數(shù)。①用于設(shè)置cookie值的函數(shù)setCookie()。②用于獲取指定cookie的值的函數(shù)getCookie()。③用于檢查cookie是否設(shè)置了函數(shù)checkCookie()。（1）創(chuàng)建函數(shù)setCookie()，將訪問網(wǎng)站的用戶的用戶名存儲在document.cookie中。函數(shù)setCookie()的代碼如下。functionsetCookie(cname,cvalue,exdays){vard=newDate();d.setTime(d.getTime()+(exdays*24*60*60*1000));varexpires="expires="+d.toUTCString();document.cookie=cname+"="+cvalue+";"+expires+";path=/";}函數(shù)setCookie()的參數(shù)是cookie名（cname）、cookie值（cvalue），以及cookie將要過期的天數(shù)（exdays）。通過把cookie名、cookie值和cookie將要過期的天數(shù)以字符串形式拼接起來，該函數(shù)就設(shè)置了cookie。8.

正確使用cookie（2）需要創(chuàng)建函數(shù)getCookie()，該函數(shù)用來返回指定cookie的值。函數(shù)g