JavaScript+jQuery交互式Web前端開發(fā)（第2版） 課件 第4、5章 函數(shù)、對象

第4章函數(shù)《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學(xué)習目標/Target

了解函數(shù)的概念，能夠闡述函數(shù)的作用

掌握函數(shù)的定義與調(diào)用，能夠根據(jù)實際需求在程序中定義并調(diào)用函數(shù)

掌握函數(shù)參數(shù)的設(shè)置，能夠根據(jù)實際需求在程序中設(shè)置相關(guān)參數(shù)

掌握函數(shù)的返回值，能夠通過函數(shù)的返回值將函數(shù)的處理結(jié)果返回學(xué)習目標/Target掌握函數(shù)表達式，能夠?qū)崿F(xiàn)函數(shù)表達式的定義與調(diào)用

掌握匿名函數(shù)，能夠?qū)崿F(xiàn)匿名函數(shù)的定義與調(diào)用

掌握回調(diào)函數(shù)，能夠?qū)崿F(xiàn)回調(diào)函數(shù)的定義與調(diào)用

掌握遞歸函數(shù)，能夠?qū)崿F(xiàn)遞歸函數(shù)的定義與調(diào)用學(xué)習目標/Target

熟悉作用域，能夠區(qū)別全局變量、局部變量和塊級變量，并且能夠歸納什么是

作用域鏈

掌握閉包函數(shù)，能夠?qū)崿F(xiàn)閉包函數(shù)的定義與調(diào)用熟悉預(yù)解析，能夠說明JavaScript代碼如何進行預(yù)解析章節(jié)概述/SummaryJavaScript中的函數(shù)用于封裝一些復(fù)雜的代碼或可以重復(fù)使用的代碼段等。例如，編寫程序計算班級學(xué)生成績的平均分時，如果每計算一個學(xué)生的平均分，都編寫一段功能相同的代碼，非常麻煩。此時，可以使用函數(shù)將計算平均分的代碼進行封裝，在使用時直接調(diào)用。本章將詳細講解JavaScript中的函數(shù)。目錄/Contents4.14.24.3初識函數(shù)函數(shù)進階作用域4.4閉包函數(shù)4.5預(yù)解析初識函數(shù)4.1了解函數(shù)的概念，能夠闡述函數(shù)的作用

先定一個小目標！4.1.1 什么是函數(shù)函數(shù)是指實現(xiàn)某個特定功能的一段代碼，相當于將包含一條或多條語句的代碼塊包裹起來，用戶在使用時只需關(guān)心參數(shù)和返回值，就能實現(xiàn)特定的功能。對開發(fā)人員來說，使用函數(shù)實現(xiàn)某個功能時，可以把精力放在要實現(xiàn)的具體功能上，而不用研究函數(shù)內(nèi)的代碼是如何編寫的。函數(shù)的優(yōu)勢在于可以提高代碼的復(fù)用性，降低程序的維護難度。4.1.1 什么是函數(shù)在JavaScript中，函數(shù)分為內(nèi)置函數(shù)和自定義函數(shù)。內(nèi)置函數(shù)是指可以直接使用的函數(shù)，例如，使用parseInt()函數(shù)能夠?qū)崿F(xiàn)返回解析字符串后的整數(shù)值。自定義函數(shù)是指實現(xiàn)某個特定功能的函數(shù)。自定義函數(shù)在使用之前首先要定義，定義后才能調(diào)用，在實現(xiàn)功能時可以調(diào)用相對應(yīng)的函數(shù)。4.1.1 什么是函數(shù)掌握函數(shù)的定義與調(diào)用，能夠根據(jù)實際需求在程序中定義并調(diào)用函數(shù)

先定一個小目標！4.1.2 函數(shù)的定義與調(diào)用在開發(fā)一個功能復(fù)雜的模塊時，可能需要多次用到相同的代碼，這時可以使用自定義函數(shù)將相同的代碼封裝，在需要使用時直接調(diào)用函數(shù)。4.1.2 函數(shù)的定義與調(diào)用在JavaScript中可以根據(jù)實際需求定義函數(shù)，定義函數(shù)的語法格式如下。function函數(shù)名([參數(shù)1,參數(shù)2,…]){

函數(shù)體}由上述語法格式可知，函數(shù)的定義是由function關(guān)鍵字、函數(shù)名、參數(shù)和函數(shù)體組成的。4.1.2 函數(shù)的定義與調(diào)用關(guān)于定義函數(shù)的語法格式的具體介紹如下。4.1.2 函數(shù)的定義與調(diào)用function：定義函數(shù)的關(guān)鍵字。函數(shù)名：一般由字母、數(shù)字、下畫線和$組成。需要注意的是，函數(shù)名不能以數(shù)字開頭，且不能是JavaScript中的關(guān)鍵字。參數(shù)：是外界傳遞給函數(shù)的值，此時的參數(shù)稱為形參，它是可選的，多個參數(shù)之間使用逗號“,”分隔，“[]”用于在語法格式中標識可選參數(shù)，實際編寫代碼時不用寫“[]”。函數(shù)體：由函數(shù)內(nèi)所有代碼組成的整體，專門用于實現(xiàn)特定功能。定義完函數(shù)后，如果想要在程序中調(diào)用函數(shù)，只需要通過“函數(shù)名()”的方式調(diào)用即可，小括號中可以傳入?yún)?shù)，函數(shù)調(diào)用的語法格式如下。函數(shù)名([參數(shù)1,參數(shù)2,…])上述語法格式中，參數(shù)表示傳遞給函數(shù)的值，也稱為實參，“([參數(shù)1,參數(shù)2,…])”表示實參列表，實參個數(shù)可以是0個、1個或多個。通常，函數(shù)的實參列表與形參列表順序一致。當函數(shù)體內(nèi)不需要參數(shù)時，調(diào)用函數(shù)時可以不傳參。4.1.2 函數(shù)的定義與調(diào)用需要說明的是，在程序中定義函數(shù)和調(diào)用函數(shù)的編寫順序不分前后。4.1.2 函數(shù)的定義與調(diào)用下面通過代碼演示函數(shù)的定義與調(diào)用。//定義函數(shù)functionsayHello(){console.log('hello');}//調(diào)用函數(shù)sayHello(); //輸出結(jié)果為：hello4.1.2 函數(shù)的定義與調(diào)用下面演示一個自定義函數(shù)的使用場景。假設(shè)程序中有兩處代碼，分別用于求1~100和50~100的累加和。其中，求1~100的累加和的示例代碼如下。varsum=0;for(vari=1;i<=100;i++){sum+=i;}console.log(sum); //輸出結(jié)果為：50504.1.2 函數(shù)的定義與調(diào)用求50~100的累加和的示例代碼如下。varsum=0;for(vari=50;i<=100;i++){sum+=i;}console.log(sum); //輸出結(jié)果為：38254.1.2 函數(shù)的定義與調(diào)用通過對比求1~100和50~100的累加和的示例代碼可以發(fā)現(xiàn)，累加的數(shù)字范圍可能會根據(jù)需求而改變，而累加的功能代碼本質(zhì)是相同的。此時使用自定義函數(shù)，可以將相同的代碼進行封裝，提高代碼的復(fù)用性，示例代碼如下。//定義一個getSum()函數(shù)，將代碼寫在大括號“{}”中functiongetSum(num1,num2){

varsum=0;

for(vari=num1;i<=num2;i++){

sum+=i;

}

console.log(sum);

//函數(shù)運行結(jié)束后，將結(jié)果輸出到控制臺}//調(diào)用getSum()函數(shù)，在調(diào)用時需要寫上小括號，并在小括號里傳入?yún)?shù)getSum(1,100);

//輸出結(jié)果為：5050getSum(50,100);

//輸出結(jié)果為：38254.1.2 函數(shù)的定義與調(diào)用掌握函數(shù)參數(shù)的設(shè)置，能夠根據(jù)實際需求在程序中設(shè)置相關(guān)參數(shù)

先定一個小目標！4.1.3 函數(shù)的參數(shù)在函數(shù)體中，當某些值不能確定時，可以通過函數(shù)的參數(shù)從外部接收相應(yīng)的值，函數(shù)可以通過傳入的不同參數(shù)實現(xiàn)不同的操作。4.1.3 函數(shù)的參數(shù)函數(shù)的參數(shù)分為形參和實參，在定義函數(shù)時，可以在函數(shù)名后面的小括號中添加參數(shù)，這些參數(shù)被稱為形參。在調(diào)用函數(shù)時，也需要傳遞相應(yīng)的參數(shù)，這些參數(shù)被稱為實參。4.1.3 函數(shù)的參數(shù)函數(shù)的形參是形式上的參數(shù)，由于在定義函數(shù)時，函數(shù)還沒有被調(diào)用，所以無法確定具體會傳遞什么樣的值。而函數(shù)的實參是實際上的參數(shù)，當函數(shù)被調(diào)用時，實參的值就是確定的。4.1.3 函數(shù)的參數(shù)函數(shù)的形參和實參的語法格式如下。function函數(shù)名(parameter1,parameter2,…){

函數(shù)體}函數(shù)名(argument1,argument2,…)4.1.3 函數(shù)的參數(shù)上述語法格式中，parameter1和parameter2是函數(shù)的形參，argument1和argument2是函數(shù)的實參。形參和實參可以有多個，各參數(shù)之間使用逗號分隔。需要說明的是，在定義函數(shù)時可以不傳遞參數(shù)。下面通過代碼演示函數(shù)的參數(shù)的使用。functionfruit(arg){console.log(arg);}fruit('apple'); //輸出結(jié)果為：apple4.1.3 函數(shù)的參數(shù)在上述示例代碼中，定義了一個fruit()函數(shù)，arg是該函數(shù)的形參，類似于一個變量，當fruit()函數(shù)被調(diào)用時，arg形參的值就是調(diào)用函數(shù)時傳入的值，即apple。下面通過代碼演示如何使用函數(shù)求任意兩個數(shù)的乘積。functiongetProduct(num01,num02){console.log(num01*num02);}getProduct(3,4); //輸出結(jié)果為：12getProduct(6,7); //輸出結(jié)果為：424.1.3 函數(shù)的參數(shù)函數(shù)的形參和實參的數(shù)量可以不相同。當實參的數(shù)量多于形參的數(shù)量時，函數(shù)可以正常運行，多余的實參沒有形參接收，會被忽略；當實參的數(shù)量少于形參的數(shù)量時，多余的形參類似于一個已聲明未賦值的變量，其值為undefined。4.1.3 函數(shù)的參數(shù)下面通過代碼演示函數(shù)參數(shù)的數(shù)量問題。functiongetProduct(num01,num02){

console.log(num01,num02);}getProduct(7,8,9);

//輸出結(jié)果為：78getProduct(5); //輸出結(jié)果為：5undefined4.1.3 函數(shù)的參數(shù)從上述示例代碼可以看出，當實參數(shù)量多于形參數(shù)量時，函數(shù)能夠正常運行；當實參數(shù)量少于形參數(shù)量時，多余的形參的值為undefined。當不確定函數(shù)中接收到多少個實參時，可以使用arguments對象獲取所有實參，示例代碼如下。

functionfn(){

console.log(arguments); //輸出結(jié)果為：Arguments(3)[1,2,3,…]

console.log(arguments.length); //輸出結(jié)果為：3

console.log(arguments[1]);

//輸出結(jié)果為：2}fn(1,2,3);4.1.3 函數(shù)的參數(shù)下面編寫一個getMax()函數(shù)，該函數(shù)可以接收任意數(shù)量的參數(shù)，使用該函數(shù)求所有參數(shù)中的最大值，并將最大值輸出，示例代碼如下。functiongetMax(){

varmax=arguments[0];

for(vari=1;i<arguments.length;i++){

if(arguments[i]>max){

max=arguments[i];

}

}

console.log(max);}getMax(11,22,33);

//輸出結(jié)果為：33getMax(10,20,30,40,50);

//輸出結(jié)果為：50getMax(43,19,67,89,30,29);

//輸出結(jié)果為：894.1.3 函數(shù)的參數(shù)掌握函數(shù)的返回值，能夠通過函數(shù)的返回值將函數(shù)的處理結(jié)果返回

先定一個小目標！4.1.4 函數(shù)的返回值function函數(shù)名(){return需要返回的值;}4.1.4 函數(shù)的返回值若調(diào)用函數(shù)后需要返回函數(shù)的結(jié)果，在函數(shù)體中可以使用return關(guān)鍵字，返回結(jié)果稱為返回值。函數(shù)返回值的語法格式如下。4.1.4 函數(shù)的返回值下面通過代碼演示函數(shù)的返回值的使用。functiongetResult(){

return123456;}//通過變量接收返回值varresult=getResult();console.log(result);

//輸出結(jié)果為：123456//直接將函數(shù)的返回值輸出console.log(getResult()); //輸出結(jié)果為：1234564.1.4 函數(shù)的返回值如果getResult()函數(shù)沒有使用return返回一個值，則調(diào)用函數(shù)后獲取到的返回值為undefined，示例代碼如下。functiongetResult(){}//直接將函數(shù)的返回值輸出console.log(getResult()); //輸出結(jié)果為：undefined掌握函數(shù)的綜合應(yīng)用的案例，能夠編寫代碼實現(xiàn)案例

先定一個小目標！4.1.5 【案例】函數(shù)的綜合應(yīng)用1.使用函數(shù)求任意兩個數(shù)的最大值編寫一個getMax()函數(shù)，該函數(shù)接收兩個參數(shù)，分別是num01和num02，表示兩個數(shù)字。收到參數(shù)后，函數(shù)會比較這兩個數(shù)的大小，并返回較大的值。4.1.5 【案例】函數(shù)的綜合應(yīng)用4.1.5 【案例】函數(shù)的綜合應(yīng)用functiongetMax(num01,num02){

returnnum01>num02?num01:num02;}用三元表達式進行簡化使用函數(shù)求任意兩個數(shù)的最大值中的代碼，具體代碼如下。1.使用函數(shù)求任意兩個數(shù)的最大值2.使用函數(shù)求任意一個數(shù)組中的最大值編寫一個getArrMax()函數(shù)，利用該函數(shù)求數(shù)組[13,68,79,92,83]中的最大值。4.1.5 【案例】函數(shù)的綜合應(yīng)用3.使用return提前終止函數(shù)在函數(shù)中，return語句后的代碼不會被運行。例如，在前面定義的getMax()函數(shù)中判斷兩個參數(shù)是否都是數(shù)字型，只要其中一個參數(shù)不是數(shù)字型，就提前返回NaN。4.使用return返回數(shù)組在實際開發(fā)中，當函數(shù)需要返回多個值時，可以通過數(shù)組實現(xiàn)，即將需要返回的多個值寫到數(shù)組中，作為一個整體返回。4.1.5 【案例】函數(shù)的綜合應(yīng)用5.使用函數(shù)反轉(zhuǎn)數(shù)組元素順序編寫一個reverse()函數(shù)，該函數(shù)的參數(shù)是一個數(shù)組，在函數(shù)中會對數(shù)組中的元素順序進行反轉(zhuǎn)，并返回反轉(zhuǎn)后的數(shù)組。6.使用函數(shù)判斷閏年

編寫一個isLeapYear()函數(shù)，該函數(shù)的參數(shù)是一個年份數(shù)字，利用isLeapYear()函數(shù)判斷年份是否為閏年，如果年份是閏年，則返回值為true，否則返回值為false。4.1.5 【案例】函數(shù)的綜合應(yīng)用7.使用函數(shù)獲取指定年份的2月份天數(shù)編寫一個fn()函數(shù)，該函數(shù)調(diào)用后會彈出一個輸入框，要求用戶輸入一個年份數(shù)字，當用戶輸入年份數(shù)字后，程序會提示用戶該年份的2月份天數(shù)。函數(shù)進階4.2掌握函數(shù)表達式，能夠?qū)崿F(xiàn)函數(shù)表達式的定義與調(diào)用4.2.1 函數(shù)表達式

先定一個小目標！函數(shù)表達式是指以表達式的形式將定義的函數(shù)賦值給一個變量，賦值后，通過“變量名()”的方式完成函數(shù)的調(diào)用，在小括號“()”中可以傳遞參數(shù)。函數(shù)表達式也是JavaScript中另一種實現(xiàn)自定義函數(shù)的方式。4.2.1 函數(shù)表達式下面通過代碼演示函數(shù)表達式。//定義求兩個數(shù)乘積的函數(shù)表達式varfn=functionproduct(num01,num02){returnnum01*num02;};//調(diào)用函數(shù)并將結(jié)果輸出到控制臺console.log(fn(3,5)); //輸出結(jié)果為：154.2.1 函數(shù)表達式掌握匿名函數(shù)，能夠?qū)崿F(xiàn)匿名函數(shù)的定義與調(diào)用

先定一個小目標！4.2.2 匿名函數(shù)在JavaScript中，使用匿名函數(shù)可以有效避免函數(shù)名沖突的問題。匿名函數(shù)是指沒有名字的函數(shù)，即在定義函數(shù)時省略函數(shù)名。4.2.2 匿名函數(shù)在函數(shù)表達式中，如果不需要函數(shù)名，則可以省略，調(diào)用時使用“變量名()”的方式即可，示例代碼如下。4.2.2 匿名函數(shù)1.在函數(shù)表達式中省略函數(shù)名varfn=function(num01,num02){returnnum01-num02;};fn(6,3);匿名函數(shù)自調(diào)用是指將匿名函數(shù)寫在小括號“()”內(nèi)，然后對其進行調(diào)用。在實際開發(fā)中，如果希望某個功能只能實現(xiàn)一次，則可以使用匿名函數(shù)自調(diào)用。4.2.2 匿名函數(shù)2.函數(shù)匿名自調(diào)用(function(num01,num02){console.log(num01*num02);})(7,8);在實際開發(fā)中，經(jīng)常會使用匿名函數(shù)處理事件。例如，使用匿名函數(shù)處理單擊事件，示例代碼如下。4.2.2 匿名函數(shù)document.body.onclick=function(){alert('會當凌絕頂，一覽眾山小');};掌握回調(diào)函數(shù)，能夠?qū)崿F(xiàn)回調(diào)函數(shù)的定義與調(diào)用

先定一個小目標！4.2.3 回調(diào)函數(shù)假設(shè)有函數(shù)A和函數(shù)B，當把函數(shù)A作為參數(shù)傳給函數(shù)B，然后在函數(shù)B中調(diào)用函數(shù)A時，函數(shù)A就被稱為回調(diào)函數(shù)。在開發(fā)中，如果想要函數(shù)體中某部分功能由調(diào)用者決定，則可以使用回調(diào)函數(shù)。4.2.3 回調(diào)函數(shù)假設(shè)有一個飯店，為了滿足顧客的需求，該飯店允許顧客自行選擇調(diào)味料，然后將調(diào)味料交給廚師進行加工。當顧客“調(diào)用”廚師做菜后，廚師又“調(diào)用”顧客選擇調(diào)味料，廚師“調(diào)用”顧客的過程可以稱為“回調(diào)”。4.2.3 回調(diào)函數(shù)4.2.3 回調(diào)函數(shù)下面通過代碼演示如何使用回調(diào)函數(shù)。首先定義一個cooking()函數(shù)，用于實現(xiàn)廚師做菜，然后將菜作為參數(shù)傳遞給flavour()函數(shù)，flavour()函數(shù)用于為菜添加調(diào)味料，示例代碼如下。functioncooking(flavour){

varfood='香辣土豆絲';

food=flavour(food);

returnfood;}varfood=cooking(function(food){

returnfood+='微辣';});console.log(food);掌握遞歸函數(shù)，能夠?qū)崿F(xiàn)遞歸函數(shù)的定義與調(diào)用

先定一個小目標！4.2.4 遞歸函數(shù)JavaScript中有一種特殊的調(diào)用函數(shù)的方式，即一個函數(shù)在其函數(shù)體內(nèi)調(diào)用自身，這種調(diào)用方式稱為遞歸調(diào)用，被遞歸調(diào)用的函數(shù)稱為遞歸函數(shù)。遞歸函數(shù)只能在特定的情況下使用，例如計算階乘、遍歷維數(shù)不固定的多維數(shù)組。4.2.4 遞歸函數(shù)下面通過代碼演示遞歸函數(shù)的使用，要求根據(jù)用戶輸入的指定數(shù)據(jù)計算階乘。functionfactorial(n){ //定義遞歸函數(shù)

if(n==1){

return1; //遞歸出口

}

returnn*factorial(n-1);}varn=prompt('請輸入大于等于1的正整數(shù)');//處理用戶傳遞的數(shù)據(jù)，符合要求則調(diào)用factorial()函數(shù)，否則在控制臺給出提示信息n=parseInt(n);if(isNaN(n)){

console.log('輸入的n值不合法');}else{

console.log(`${n}的階乘為：`+factorial(n));}4.2.4 遞歸函數(shù)假設(shè)用戶輸入的數(shù)字是4，遞歸調(diào)用的運行過程如下圖所示。4.2.4 遞歸函數(shù)注意遞歸調(diào)用占用的內(nèi)存和資源較多，一旦使用不當可能會造成程序死循環(huán)，因此在實際開發(fā)中要慎重使用函數(shù)的遞歸調(diào)用。箭頭函數(shù)多學(xué)一招箭頭函數(shù)是ECMAScript6.0中新增的函數(shù)，該函數(shù)是一個匿名函數(shù)，用于簡化自定義函數(shù)的語法。箭頭函數(shù)以小括號開頭，在小括號中可以放置參數(shù)，小括號后面跟著箭頭“=>”，箭頭后面跟著函數(shù)體。箭頭函數(shù)的語法格式如下。()=>{};4.2.4 遞歸函數(shù)多學(xué)一招將箭頭函數(shù)賦值給一個變量后，可以通過變量名實現(xiàn)箭頭函數(shù)的調(diào)用。箭頭函數(shù)的示例代碼如下。varfn=(num01,num02)=>{returnnum01*num02;};4.2.4 遞歸函數(shù)在上述示例代碼中，定義了箭頭函數(shù)并將箭頭函數(shù)值賦給變量fn，其中小括號“()”中的num01和num02是箭頭函數(shù)的參數(shù)，大括號“{}”中的“returnnum01*num02;”是函數(shù)體，使用fn()可以實現(xiàn)箭頭函數(shù)的調(diào)用。多學(xué)一招箭頭函數(shù)有兩種特殊寫法，第1種特殊寫法是省略大括號和return關(guān)鍵字，第2種特殊寫法是省略參數(shù)外部的小括號。4.2.4 遞歸函數(shù)多學(xué)一招在箭頭函數(shù)中，當函數(shù)體中只有一條語句，且該語句的運行結(jié)果就是函數(shù)的返回值時，可以省略函數(shù)體的大括號和return關(guān)鍵字，示例代碼如下。4.2.4 遞歸函數(shù)1.省略大括號和return關(guān)鍵字varfn=(num01,num02)=>num01*num02;上述示例代碼中，定義了一個箭頭函數(shù)，用于接收兩個參數(shù)，計算兩個參數(shù)值相乘的結(jié)果并返回。多學(xué)一招在箭頭函數(shù)中，當只有一個參數(shù)時，可以省略參數(shù)外部的小括號，示例代碼如下。4.2.4 遞歸函數(shù)2.省略參數(shù)外部的小括號varfn=age=>{console.log(age);};上述示例代碼中，定義了一個箭頭函數(shù)并且只接收一個參數(shù)，因此省略了參數(shù)外部的小括號。作用域4.3熟悉作用域的分類，能夠區(qū)別全局變量、局部變量和塊級變量

先定一個小目標！4.3.1 作用域的分類functioninfo(){varstudent='小智';}info();console.log(student);

//報錯，提示studentisnotdefined（student變量未定義）4.3.1 作用域的分類通過前面的學(xué)習可知，變量需要聲明后才能使用，但并不意味著聲明變量后就可以在任意位置使用該變量。例如，定義一個info()函數(shù)，并在該函數(shù)中聲明一個student變量，在info()函數(shù)外訪問student變量就會出現(xiàn)student未定義的錯誤，示例代碼如下。4.3.1 作用域的分類在JavaScript中，根據(jù)作用域的不同，可以將變量劃分為全局變量、局部變量，具體說明如下。全局變量：不在任何函數(shù)內(nèi)聲明的變量（顯式定義）或在函數(shù)內(nèi)省略var關(guān)鍵字聲明的變量（隱式定義）都稱為全局變量，它的作用域稱為全局作用域，在同一個頁面文件中的所有腳本內(nèi)都可以使用。局部變量：在函數(shù)體內(nèi)使用var關(guān)鍵字聲明的變量稱為局部變量，它的作用域稱為函數(shù)作用域，僅在該函數(shù)體內(nèi)有效。varstudent='小強';

//全局變量functiontest(){

varstudent='小明';

//局部變量

console.log(student);}test();console.log(student);4.3.1 作用域的分類定義兩個變量名都為student的變量，其中一個student變量定義為全局變量并賦值為小強，另一個student變量定義為局部變量并賦值為小明，在控制臺中輸出這兩個變量，示例代碼如下。熟悉作用域鏈，能夠歸納什么是作用域鏈

先定一個小目標！4.3.2 作用域鏈在實際開發(fā)中，通常需要定義多個函數(shù)來完成復(fù)雜的功能，對于其中一個函數(shù)而言，它可能依賴另外一些函數(shù)才能運行。如果希望這些依賴的函數(shù)只能在本函數(shù)內(nèi)部訪問，其他函數(shù)不能訪問，這時候可以把這些依賴的函數(shù)定義在本函數(shù)內(nèi)部，這樣在一個函數(shù)內(nèi)部定義其他函數(shù)就形成了嵌套函數(shù)。4.3.2 作用域鏈對于嵌套函數(shù)而言，內(nèi)層函數(shù)只能在外層函數(shù)的作用域內(nèi)運行，在內(nèi)層函數(shù)運行的過程中，若需要引入某個變量，首先會在當前作用域中尋找，若未找到，則繼續(xù)向上一級的作用域?qū)ふ?，直到找到全局作用域。這種鏈式的查詢關(guān)系稱為作用域鏈。4.3.2 作用域鏈varnum=13;functionfn01(){

//定義第1個函數(shù)fn01()

varnum=26;

functionfn02(){

//定義第2個函數(shù)fn02()

functionfn03(){

//定義第3個函數(shù)fn03()

console.log(num);

}

fn03();

}

fn02();}fn01();定義fn01()、fn02()、fn03()函數(shù)，在fn03()函數(shù)中輸出變量num的值。4.3.2 作用域鏈閉包函數(shù)4.4掌握閉包函數(shù)，能夠?qū)崿F(xiàn)閉包函數(shù)的定義與調(diào)用

先定一個小目標！4.4閉包函數(shù)在JavaScript中，閉包（Closure）是函數(shù)和其周圍語法環(huán)境（LexicalEnvironment）的組合，通過閉包可以讓開發(fā)者由內(nèi)層函數(shù)訪問外層函數(shù)作用域中的變量和函數(shù)，其中，內(nèi)層函數(shù)被稱為閉包函數(shù)。4.4閉包函數(shù)functiongreeting(){

varname=‘小智';

functionsayHello(){

console.log('你好'+name);

}}實現(xiàn)閉包函數(shù)的示例代碼如下。4.4閉包函數(shù)functiongreeting(){varname=‘小智';

return[function(){returnname;

},function(newName){

name=newName;}];}var[getName,setName]=greeting();console.log('你好'+getName());setName('小明');console.log('你好'+getName());利用閉包函數(shù)可以實現(xiàn)在函數(shù)外讀取或修改函數(shù)內(nèi)的局部變量，示例代碼如下。4.4閉包函數(shù)當把閉包函數(shù)作為返回值返回后，只要閉包函數(shù)一直被引用，閉包函數(shù)所訪問的變量和函數(shù)就始終在內(nèi)存中?；诖爽F(xiàn)象，可以統(tǒng)計閉包函數(shù)被調(diào)用的次數(shù)。4.4閉包函數(shù)functionfn01(){

varnum=0;

functionfn02(){

++num;

console.log('第${num}次被調(diào)用');

}returnfn02;}varfn02=fn01;fn02();fn02();fn02();首先定義fn01()函數(shù)和fn02()函數(shù)，然后使用閉包函數(shù)實現(xiàn)在fn02()函數(shù)中訪問fn01()函數(shù)內(nèi)定義的局部變量num，并統(tǒng)計fn02()函數(shù)被調(diào)用的次數(shù)，示例代碼如下。4.4閉包函數(shù)預(yù)解析4.5熟悉預(yù)解析，能夠說明JavaScript代碼如何進行預(yù)解析

先定一個小目標！4.5預(yù)解析JavaScript代碼是由瀏覽器中的JavaScript引擎運行的，JavaScript引擎在運行JavaScript代碼時會進行預(yù)解析，即提前對代碼中var關(guān)鍵字聲明的變量和function關(guān)鍵字定義的函數(shù)進行解析，再運行其他代碼。4.5預(yù)解析//以下代碼中的varname01變量聲明會被預(yù)解析console.log(name01); //輸出結(jié)果為：undefinedvarname01='小智';//以下代碼由于沒有聲明name02，所以會報錯console.log(name02); //報錯，提示name02isnotdefined（name02未定義）下面通過代碼演示var關(guān)鍵字的預(yù)解析效果。4.5預(yù)解析varname01; //變量name01的聲明由于預(yù)解析而被提到前面console.log(name01);

//輸出結(jié)果為：undefinedname01='小智'在前面的示例代碼中，第2行代碼在變量name01聲明前就進行了訪問，但是沒有出現(xiàn)類似第5行代碼的報錯，這是因為第3行代碼中的varname01會被預(yù)解析，相當于如下代碼。4.5預(yù)解析由此可見，由于變量name01被預(yù)解析，所以程序運行“console.log(name01)”時不會報錯。在為變量name01賦值“小智”時不會被預(yù)解析，因此name01的值為undefined。fn();functionfn(){console.log('fn');}在JavaScript中，函數(shù)的定義也具有預(yù)解析效果，示例代碼如下。4.5預(yù)解析在上述示例代碼中，雖然調(diào)用fn()函數(shù)的代碼寫在了定義函數(shù)之前，但是fn()函數(shù)仍然可以正確調(diào)用，這是因為使用function關(guān)鍵字定義函數(shù)時被預(yù)解析。fruit();

//報錯，提示funisnotafunction（fun不是一個函數(shù)）varfruit=function(){console.log('fruit');};需要注意的是，函數(shù)表達式不會被預(yù)解析，示例代碼如下。4.5預(yù)解析在上述示例代碼中，fruit不是一個函數(shù)，這是因為varfruit變量聲明會被預(yù)解析，預(yù)解析后，fruit的值為undefined，此時的fruit還不是一個函數(shù)，因此無法調(diào)用。只有第2~4行代碼運行后，才可以通過fun()調(diào)用函數(shù)。本章小結(jié)本章主要講解了函數(shù)的相關(guān)知識，首先講解了什么是函數(shù)、函數(shù)的定義與調(diào)用、函數(shù)的參數(shù)、函數(shù)的返回值，并通過案例幫助讀者更好地掌握函數(shù)的使用；然后講解了函數(shù)表達式、匿名函數(shù)、回調(diào)函數(shù)、遞歸函數(shù)；最后講解了作用域、閉包函數(shù)和預(yù)解析。通過本章的學(xué)習，讀者能夠熟練掌握函數(shù)的使用。本章小結(jié)第5章對象《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學(xué)習目標/Target

了解什么是對象，能夠闡述JavaScript中對象的概念

掌握對象的創(chuàng)建方式，能夠靈活應(yīng)用3種方式創(chuàng)建對象

掌握對象的遍歷，能夠遍歷對象的屬性和方法

掌握Math對象的使用，能夠使用Math對象的常用方法和屬性實現(xiàn)有關(guān)數(shù)學(xué)的

運算學(xué)習目標/Target掌握日期對象的使用，能夠使用日期對象的常用方法處理日期和時間

掌握數(shù)組對象的使用，能夠使用數(shù)組對象的常用方法對數(shù)組進行操作

掌握字符串對象的使用，能夠使用字符串對象的常用方法處理字符串

掌握MDNWeb文檔的查閱方式，能夠在MDNWeb文檔中查詢對象章節(jié)概述/Summary在日常生活中，對象通常是指具體的事物，如桌子、水杯、計算機等看得見、摸得著的實物。在JavaScript中，也有對象的概念。JavaScript中的對象屬于復(fù)雜數(shù)據(jù)類型，使用對象可以方便地管理多個數(shù)據(jù)，例如，保存網(wǎng)站用戶的姓名、年齡、電話號碼等信息。相對于將數(shù)據(jù)保存為基本數(shù)據(jù)類型，將數(shù)據(jù)保存為對象不僅更加靈活，而且更易于區(qū)分各種數(shù)據(jù)。本章將對JavaScript中的對象進行詳細講解。目錄/Contents5.15.25.3初識對象對象的創(chuàng)建對象的遍歷5.4Math對象目錄/Contents5.55.65.7日期對象數(shù)組對象字符串對象5.8查閱MDNWeb文檔初識對象5.1了解什么是對象，能夠闡述JavaScript中對象的概念

先定一個小目標！5.1初識對象在現(xiàn)實生活中，通過描述對象的特征可以區(qū)分不同的對象，例如，通過描述員工的姓名、年齡、身高等特征來區(qū)分不同的員工對象。在學(xué)習對象前，如果需要在程序中描述員工的特征，可能需要聲明多個變量，例如，聲明變量name描述員工的姓名、聲明變量age描述員工的年齡、聲明變量height描述員工的身高等。5.1初識對象當需要描述多個員工的特征時，如果每個員工的姓名、年齡、身高等特征都通過聲明變量來描述，會使程序出現(xiàn)大量的變量，導(dǎo)致程序代碼冗余，難以維護。因此，可以使用對象來描述員工的特征，將員工的多個特征保存在對象中，能夠更加方便地管理和操作員工的特征。5.1初識對象對象是一種復(fù)雜數(shù)據(jù)類型，由屬性和方法組成。屬性是指對象的特征，如學(xué)生的姓名、性別、年齡等；方法是指對象的行為，如學(xué)生唱歌、跳舞、寫作業(yè)等。對象的屬性和方法統(tǒng)稱為對象的成員。通過對象可以更直觀地描述一個實體的特征和行為，并提供訪問和操作方法。5.1初識對象在JavaScript中，屬性可以看成保存在對象中的變量，使用“對象.屬性名”進行訪問；方法可以看成保存在對象中的函數(shù)，使用“對象.方法名()”進行訪問。對象的創(chuàng)建5.2掌握對象的創(chuàng)建方式，能夠靈活應(yīng)用字面量的方式創(chuàng)建對象

先定一個小目標！5.2.1 利用字面量創(chuàng)建對象利用字面量創(chuàng)建對象就是指用大括號“{}”來標注對象成員，每個對象成員通過鍵值對的形式保存，即“key:value”的形式。對象字面量的語法格式如下。{key1:value1,key2:value2,…}上述語法格式中，key1和key2表示對象成員的名稱，即屬性名或方法名；value1和value2表示對象成員的值，即屬性名對應(yīng)的值或方法名對應(yīng)的值。多個對象成員之間使用逗號“,”隔開。5.2.1 利用字面量創(chuàng)建對象需要說明的是，當對象中沒有成員時，鍵值對可以省略，此時“{}”表示空對象。5.2.1 利用字面量創(chuàng)建對象下面通過代碼演示如何利用字面量創(chuàng)建對象。<script>//創(chuàng)建一個空對象varobj={};//創(chuàng)建一個學(xué)生對象varstudent={name:'小智', //name屬性sex:'男', //sex屬性

age:'20', //age屬性

sayHello:function(){ //sayHello()方法

console.log('Hello');

}};</script>5.2.1 利用字面量創(chuàng)建對象當創(chuàng)建對象后，如果想要訪問對象的成員，可以使用兩種方式，第1種方式是使用“.”，第2種方式是使用“[]”，示例代碼如下。//第1種方式：使用“.”訪問對象的成員console.log();//輸出對象的屬性，輸出結(jié)果為：小智student.sayHello(); //調(diào)用對象的方法，輸出結(jié)果為：Hello//第2種方式：使用“[]”訪問對象的成員console.log(student['sex']);

//輸出對象的屬性，輸出結(jié)果為：男student['sayHello'](); //調(diào)用對象的方法，輸出結(jié)果為：Hello5.2.1 利用字面量創(chuàng)建對象如果對象的成員名中包含特殊字符，則可以用字符串來表示成員名，通過“[]”進行訪問，示例代碼如下。varstudent02={'name-sex':'小強-男',};console.log(student02['name-sex']); //輸出結(jié)果為：小強-男5.2.1 利用字面量創(chuàng)建對象如果一個對象中沒有任何成員，則可以通過為屬性或方法賦值的方式來添加對象成員，示例代碼如下。5.2.1 利用字面量創(chuàng)建對象<script>varobj={}; //創(chuàng)建一個空對象='小娜'; //為對象添加name屬性（使用“.”語法）obj['sex']='女'; //為對象添加sex屬性（使用“[]”語法）obj.sayHello=function(){ //為對象添加sayHello()方法（使用“.”語法）console.log('Hello');};obj['dance']=function(){ //為對象添加dance()方法（使用“[]”語法）console.log('小娜在跳民族舞');};console.log(); //訪問name屬性，輸出結(jié)果為：小娜console.log(obj.sex); //訪問sex屬性，輸出結(jié)果為：女obj.sayHello(); //調(diào)用對象的方法，輸出結(jié)果為：Helloobj.dance(); //調(diào)用對象的方法，輸出結(jié)果為：小娜在跳民族舞</script>如果訪問對象中不存在的成員，則返回undefined，示例代碼如下。5.2.1 利用字面量創(chuàng)建對象varobj={};console.log(); //輸出結(jié)果為：undefined掌握對象的創(chuàng)建方式，能夠靈活應(yīng)用構(gòu)造函數(shù)的方式創(chuàng)建對象

先定一個小目標！5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象當需要創(chuàng)建一個班級中所有的學(xué)生對象時，如果利用字面量的方式逐一創(chuàng)建學(xué)生對象，需要編寫很多重復(fù)的代碼，開發(fā)效率比較低。為此，可以利用構(gòu)造函數(shù)的方式來創(chuàng)建對象。首先將學(xué)生看成一類對象，并將學(xué)生擁有的共同特征和行為寫在構(gòu)造函數(shù)中，然后通過構(gòu)造函數(shù)一次性創(chuàng)建整個班級中的所有學(xué)生對象。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象構(gòu)造函數(shù)是一種特殊的函數(shù)，它提供了生成對象的模板，并描述了對象基本結(jié)構(gòu)，主要用于在創(chuàng)建對象時進行初始化，即為對象的成員賦初始值。通過一個構(gòu)造函數(shù)可以創(chuàng)建多個具有相同結(jié)構(gòu)的對象，這個過程稱為實例化，通過構(gòu)造函數(shù)創(chuàng)建出來的對象被稱為構(gòu)造函數(shù)的實例對象。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象定義構(gòu)造函數(shù)的語法格式和定義普通函數(shù)的語法格式類似，二者的區(qū)別是，構(gòu)造函數(shù)的名稱推薦首字母大寫。定義構(gòu)造函數(shù)的語法格式如下。function構(gòu)造函數(shù)名([參數(shù)1,參數(shù)2,...]){

函數(shù)體}5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象上述語法格式中，構(gòu)造函數(shù)名要以大寫字母開頭，以便與普通函數(shù)區(qū)分；構(gòu)造函數(shù)的參數(shù)可以有一個或多個，也可以省略。在構(gòu)造函數(shù)的函數(shù)體中，可以為新創(chuàng)建的對象添加成員，其語法格式如下。this.屬性=值;this.方法=function([參數(shù)1,參數(shù)2,...]){

方法體};5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象上述語法格式中，this表示新創(chuàng)建的對象。定義構(gòu)造函數(shù)后，使用構(gòu)造函數(shù)創(chuàng)建對象的語法格式如下。var變量名=new構(gòu)造函數(shù)([參數(shù)1,參數(shù)2,...]);5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象上述語法格式中，參數(shù)可以有一個或多個，當不需要傳入?yún)?shù)時，參數(shù)可以省略，且小括號也可以省略。定義一個Student()構(gòu)造函數(shù)，利用Student()構(gòu)造函數(shù)創(chuàng)建學(xué)生對象，實現(xiàn)學(xué)生的自我介紹，示例代碼如下。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象<script>

//定義一個Student()構(gòu)造函數(shù)

functionStudent(name,age){

=name;

this.age=age;

roduce=function(){

console.log(`大家好，我叫${}，今年${this.age}歲`);

};

}5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象

//使用Student()構(gòu)造函數(shù)創(chuàng)建對象

varstu1=newStudent('小智',20);

roduce();

varstu2=newStudent('小麗',19);

roduce();

varstu3=newStudent('小娜',18);

roduce();</script>>>續(xù)上一頁代碼5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象靜態(tài)成員和實例成員多學(xué)一招在JavaScript中，構(gòu)造函數(shù)也屬于對象，因此，構(gòu)造函數(shù)也有成員。為了區(qū)分構(gòu)造函數(shù)的成員和實例對象的成員，我們將構(gòu)造函數(shù)的成員稱為靜態(tài)成員，將實例對象的成員稱為實例成員。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象多學(xué)一招下面通過代碼演示靜態(tài)成員和實例成員在創(chuàng)建與使用過程中的區(qū)別。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象

<script>

functionCat(name){

//添加實例成員

=name;

this.say=function(){

console.log('喵喵喵');

};

}

//添加靜態(tài)成員

Cat.type='小貓';

Cat.run=function(){

console.log('抓老鼠');

};多學(xué)一招5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對象//使用靜態(tài)成員

console.log(Cat.type);

//輸出結(jié)果為：小貓

Cat.run();

//輸出結(jié)果為：抓老鼠

//使用實例成員

varcat1=newCat('小花');

console.log();

//輸出結(jié)果為：小花

cat1.say();

//輸出結(jié)果為：喵喵喵</script>>>續(xù)上一頁代碼掌握對象的創(chuàng)建方式，能夠靈活應(yīng)用Object()的方式創(chuàng)建對象

先定一個小目標！5.2.3 利用Object()創(chuàng)建對象在JavaScript中，除了可以利用字面量或構(gòu)造函數(shù)創(chuàng)建對象，還可以利用Object()創(chuàng)建對象。對象也有構(gòu)造函數(shù)，它的構(gòu)造函數(shù)是Object()。5.2.3 利用Object()創(chuàng)建對象5.2.3 利用Object()創(chuàng)建對象使用Object()創(chuàng)建對象的示例代碼如下。varobj=newObject();上述示例代碼使用new關(guān)鍵字和Object()構(gòu)造函數(shù)創(chuàng)建了一個空對象，并將其賦值給obj變量。5.2.3 利用Object()創(chuàng)建對象使用Object()創(chuàng)建對象后，可以為對象添加成員，示例代碼如下。<script>

varobj=newObject();

='小智';

obj.sex='男';

obj.sayHello=function(){

console.log('Hello');

};</script>this的指向多學(xué)一招在定義函數(shù)時并不能確定this的指向，只有在運行函數(shù)的過程中才能確定this的指向。通常，this指向的是調(diào)用的對象。下面通過3個具體場景進行講解。5.2.3 利用Object()創(chuàng)建對象多學(xué)一招5.2.3 利用Object()創(chuàng)建對象在全局作用域或者普通函數(shù)中，this指向全局對象window，示例代碼如下。console.log(this);

//this指向全局對象windowfunctionfn(){ console.log(this);}fn();多學(xué)一招5.2.3 利用Object()創(chuàng)建對象在方法中，this指向調(diào)用它所在方法的對象，示例代碼如下。varuser={sayHi:function(){console.log(this);}};user.sayHi(); //sayHi()方法中的this指向user對象多學(xué)一招5.2.3 利用Object()創(chuàng)建對象在構(gòu)造函數(shù)中，this指向新創(chuàng)建的實例，示例代碼如下。functionFun(){console.log(this);}varfun=newFun();//Fun中的this指向新創(chuàng)建的實例fun對象的遍歷5.3掌握對象的遍歷，能夠遍歷對象的屬性和方法

先定一個小目標！5.3對象的遍歷for(var變量in對象){

具體操作}在實際開發(fā)中，如果需要查詢對象的屬性和方法，就需要進行對象的遍歷。對象的遍歷是指訪問對象中的所有成員。在JavaScript中，使用for…in語法可以實現(xiàn)對象的遍歷，其語法格式如下。5.3對象的遍歷在上述語法格式中，變量表示對象中的成員名；對象表示需要進行遍歷的對象；在具體操作中，可以通過“console.log(對象[變量])”訪問對象的屬性，通過“對象[變量]()”調(diào)用對象的方法。//準備一個待遍歷的學(xué)生對象studentvarstudent={

name:'小智',

sex:'男',

age:20};//遍歷學(xué)生對象studentfor(varainstudent){

console.log(a);

console.log(student[a]);}下面通過代碼演示如何進行對象的遍歷，示例代碼如下。5.3對象的遍歷判斷對象成員是否存在多學(xué)一招當需要判斷對象中的某個成員是否存在時，可以使用in運算符，如果判斷的結(jié)果為true，則表示該成員存在，如果判斷的結(jié)果為false，則表示該成員不存在，示例代碼如下。5.3對象的遍歷varobj={name:'小娜',sex:'女'};console.log('name'inobj); //輸出結(jié)果為：trueconsole.log('age'inobj); //輸出結(jié)果為：falseMath對象5.4掌握Math對象的使用，能夠使用Math對象的常用方法和屬性實現(xiàn)有關(guān)數(shù)學(xué)的運算

先定一個小目標！5.4.1 Math對象的使用Math對象表示數(shù)學(xué)對象，用于進行與數(shù)學(xué)相關(guān)的運算，該對象不是構(gòu)造函數(shù)，不需要實例化，可以直接使用其屬性和方法。5.4.1 Math對象的使用5.4.1 Math對象的使用Math對象的常用屬性和方法如下表所示。屬性和方法作用PI獲取圓周率，結(jié)果為3.141592653589793abs(x)獲取x的絕對值max([value1[,value2,…]])獲取所有參數(shù)中的最大值min([value1[,value2,…]])獲取所有參數(shù)中的最小值pow(base,exponent)獲取基數(shù)（base）的指數(shù)（exponent）次冪，即baseexponentsqrt(x)獲取x的平方根，若x為負數(shù)，則返回NaNceil(x)獲取大于或等于x的最小整數(shù)，即向上取整floor(x)獲取小于或等于x的最大整數(shù)，即向下取整round(x)獲取x的四舍五入后的整數(shù)值random()獲取大于或等于0且小于1的隨機值使用PI屬性獲取圓周率，并計算半徑為6的圓的面積，示例代碼如下。console.log(Math.PI*6*6);

//輸出結(jié)果為：113.097335529232555.4.1 Math對象的使用使用abs()方法計算數(shù)字-13的絕對值，示例代碼如下。console.log(Math.abs(-13));

//輸出結(jié)果為：135.4.1 Math對象的使用console.log(Math.max(12,9,21,36,15)); //輸出結(jié)果為：36console.log(Math.min(12,9,21,36,15)); //輸出結(jié)果為：9使用max()方法和min()方法計算一組數(shù)“12，9，21，36，15”的最大值和最小值，示例代碼如下。使用pow()方法計算3的4次冪，然后使用sqrt()方法對計算結(jié)果求平方根，示例代碼如下。a=Math.pow(3,4);console.log(a); //輸出結(jié)果為：81console.log(Math.sqrt(a)); //輸出結(jié)果為：95.4.1 Math對象的使用console.log(Math.ceil(3.1));

//輸出結(jié)果為：4console.log(Math.ceil(3.9));

//輸出結(jié)果為：4console.log(Math.floor(3.1));

//輸出結(jié)果為：3console.log(Math.floor(3.9));

//輸出結(jié)果為：3使用ceil()方法計算大于或等于3.1和3.9的最小整數(shù)，使用floor()方法計算小于或等于3.1和3.9的最大整數(shù)，示例代碼如下。5.4.1 Math對象的使用console.log(Math.round(2.1));

//輸出結(jié)果為：2console.log(Math.round(2.5));

//輸出結(jié)果為：3console.log(Math.round(2.9));

//輸出結(jié)果為：3console.log(Math.round(-2.5));

//輸出結(jié)果為：-2console.log(Math.round(-2.6));

//輸出結(jié)果為：-3使用round()方法實現(xiàn)計算數(shù)字2.1、2.5、2.9、-2.5和-2.6四舍五入后的整數(shù)值，

示例代碼如下。使用random()方法生成一個大于等于0且小于等于1的隨機數(shù)，示例代碼如下。console.log(Math.random());//輸出結(jié)果0.44156518524455257掌握random()方法的使用，能夠使用random()方法生成指定范圍的隨機數(shù)

先定一個小目標！5.4.2 生成指定范圍的隨機數(shù)5.4.2 生成指定范圍的隨機數(shù)在使用random()方法生成隨機數(shù)時，每次調(diào)用輸出的結(jié)果都不相同，并且返回結(jié)果是一個很長的浮點數(shù)，如0.44156518524455257，其范圍是0~1（不包括1）。若希望生成指定范圍內(nèi)的隨機數(shù)，可使用下列方式。//生成大于或等于m且小于n的隨機數(shù)Math.random()*(n-m)+m;//生成大于或等于m且小于或等于n的隨機整數(shù)Math.floor(Math.random()*(n-m+1)+m);//生成大于或等于0且小于或等于n的隨機整數(shù)Math.floor(Math.random()*(n+1));//生成大于或等于1且小于或等于n的隨機整數(shù)Math.floor(Math.random()*n+1);5.4.2 生成指定范圍的隨機數(shù)下面通過代碼演示如何獲取1~5的隨機整數(shù)。functiongetRandom(min,max){

returnMath.floor(Math.random()*(max-min+1)+min);}console.log(getRandom(1,5));使用隨機數(shù)可以實現(xiàn)在數(shù)組中隨機獲取一個元素，示例代碼如下。vararr=['老虎','獅子','熊貓','袋鼠','斑馬','大象'];//調(diào)用前面定義的getRandom()函數(shù)獲取隨機數(shù)console.log(arr[getRandom(0,arr.length-1)]);掌握猜數(shù)字游戲的案例，能夠編寫代碼實現(xiàn)案例

先定一個小目標！5.4.3 【案例】猜數(shù)字游戲某班級開展活動日，老師提出了猜數(shù)字游戲，游戲的規(guī)則是：老師隨機抽取1~10的數(shù)字，然后邀請一位同學(xué)來猜這個數(shù)字，如果該同學(xué)猜的數(shù)字比老師抽取的數(shù)字大，則提示“猜大了”；如果該同學(xué)猜的數(shù)字比老師抽取的數(shù)字小，則提示“猜小了”；如果該同學(xué)猜的數(shù)字等于老師抽取的數(shù)字，則提示“恭喜，猜對了”。5.4.3 【案例】猜數(shù)字游戲首先定義getRandom()函數(shù)，實現(xiàn)隨機生成1~10的數(shù)字，然后使用循環(huán)結(jié)構(gòu)實現(xiàn)讓程序一直運行，在程序中接收用戶輸入的數(shù)字，并判斷輸入的數(shù)字和隨機數(shù)的大小關(guān)系。如果輸入的數(shù)字大于隨機數(shù)，則程序提示“猜大了”；如果輸入的數(shù)字小于隨機數(shù)，則程序提示“猜小了”；如果輸入的數(shù)字等于隨機數(shù)，則程序提示“恭喜，猜對了”，結(jié)束程序。5.4.3 【案例】猜數(shù)字游戲5.4.3 【案例】猜數(shù)字游戲5.4.3 【案例】猜數(shù)字游戲日期對象5.5掌握日期對象的使用，能夠使用日期對象的常用方法處理日期和時間

先定一個小目標！5.5.1 日期對象的使用在JavaScript中，日期對象用于處理日期和時間，需要使用Date()構(gòu)造函數(shù)創(chuàng)建后才能使用。在創(chuàng)建日期對象時，可以向Date()構(gòu)造函數(shù)中傳入表示具體日期的參數(shù)。5.5.1 日期對象的使用Date()構(gòu)造函數(shù)有3種使用方式，第1種方式是省略參數(shù)；第2種方式是傳入數(shù)字型參數(shù)；第3種方式是傳入字符串型參數(shù)。5.5.1 日期對象的使用在使用Date()構(gòu)造函數(shù)創(chuàng)建日期對象時，省略參數(shù)表示使用系統(tǒng)當前時間，示例代碼如下。5.5.1 日期對象的使用1.省略參數(shù)vardate01=newDate();console.log(date01);//輸出結(jié)果為：FriMar10202309:36:37GMT+0800(中國標準時間)在使用Date()構(gòu)造函數(shù)創(chuàng)建日期對象時，可以傳入以數(shù)字表示的年、月、日、時、分、秒?yún)?shù)，并且最少需要指定年、月兩個參數(shù)，若省略日、時、分、秒?yún)?shù)會自動使用默認值，即當前的日期和時間。5.5.1 日期對象的使用2.傳入數(shù)字型參數(shù)注意月的取值范圍是0~11，其中0表示1月，1表示2月，以此類推。當傳入的數(shù)字大于取值范圍時，會自動轉(zhuǎn)換成相鄰數(shù)字，例如，將月份設(shè)置為12表示明年1月，將月份設(shè)置為-1表示去年12月。為Date()構(gòu)造函數(shù)傳入數(shù)字型參數(shù)的示例代碼如下。5.5.1 日期對象的使用vardate02=newDate(2023,12-1,13,09,35,40);console.log(date02);//輸出結(jié)果為：WedDec13202309:35:40GMT+0800(中國標準時間)在使用Date()構(gòu)造函數(shù)創(chuàng)建日期對象時，可以傳入以字符串表示的日期和時間，字符串中最少需要指定年份。日期和時間的格式有多種，下面以“年-月-日時:分:秒”的格式為例進行講解。5.5.1 日期對象的使用3.傳入字符串型參數(shù)為Date()構(gòu)造函數(shù)傳入字符串型參數(shù)的示例代碼如下。vardate03=newDate('2023-12-1315:05:33');console.log(date03);//輸出結(jié)果為：WedDec13202315:05:33GMT+0800(中國標準時間)5.5.1 日期對象的使用創(chuàng)建日期對象后，若需要單獨獲取或設(shè)置年、月、日、時、分、秒中的某一項，可以調(diào)用日期對象的相關(guān)方法實現(xiàn)，獲取日期和時間的方法如下表所示。方法作用getFullYear()獲取表示年份的4位數(shù)字，如2023getMonth()獲取月份，取值范圍為0~11（0表示1月，1表示2月，以此類推）

getDate()獲取月份中的某一天，取值范圍1~31getDay()獲取星期，取值范圍為0~6（0表示星期日，1表示星期一，以此類推）getHours()獲取小時數(shù)，取值范圍為0~23getMinutes()獲取分鐘數(shù)，取值范圍為0~59getSeconds()獲取秒數(shù)，取值范圍為0~59getMilliseconds()獲取毫秒數(shù)，取值范圍為0~999getTime()獲取從1970-01-0100:00:00（UTC）到日期對象中存放的時間經(jīng)歷的毫秒數(shù)5.5.1 日期對象的使用設(shè)置日期和時間的方法如下表所示。方法作用setFullYear(value)設(shè)置年份setMonth(value)設(shè)置月份setDate(value)設(shè)置月份中的某一天setHours(value)設(shè)置小時數(shù)setMinutes(value)設(shè)置分鐘數(shù)setSeconds(value)設(shè)置秒數(shù)setMilliseconds(value)設(shè)置毫秒數(shù)setTime(value)通過從1970-01-0100:00:00（UTC）開始計時的毫秒數(shù)來設(shè)置時間下面通過代碼演示如何使用日期對象提供的方法設(shè)置和獲取日期，并將獲取到的日期輸出到控制臺。5.5.1 日期對象的使用<script>

vardate=newDate();

//設(shè)置年、月、日

date.setFullYear(2023);

date.setMonth(8-1);

date.setDate(1);

//獲取年、月、日

varyear=dat