Web前端開發(fā)（JavaScript+jQuery）課件 項目 2數(shù)組與對象

Web前端技術(shù)

數(shù)組與對象目錄2.1數(shù)組對象2.2?點擊查看本小節(jié)知識架構(gòu)?點擊查看本小節(jié)知識架構(gòu)

數(shù)組2.1.1初始數(shù)組數(shù)組（array）是存儲一系列變量的組合，它有一個或多個元素組成，各個元素之間用逗號分割。vararr=['a','b','c'];2.1.2創(chuàng)建數(shù)組實例化Array對象的方式創(chuàng)建數(shù)組是通過new關(guān)鍵字實現(xiàn)的。1.使用Array對象創(chuàng)建數(shù)組varname=newArray('Lucy','Jack','Limin');//元素值類型為字符型varage=newArray(18,38,62,44);//元素值類型為數(shù)值型varmix=newArray(112,'abc',null,true,undefined);//元素值類型為混合型vararrl=newArray（）；//或vararr2=newArray：//空數(shù)組2.1.2創(chuàng)建數(shù)組使用“[]”創(chuàng)建數(shù)組的方式與Array()對象的使用方式類似，只需將newArray()替換為[]即可。2.使用“[]”創(chuàng)建數(shù)組varweather=['wind'，'fine'，]；//相當于：newArray（'wind'，'fine'，）varempty=[];//相當于：newArrayvarmood=["sad"，empty×3，"hAppy"];//控制臺輸出mood：（5）varmood=['sad',,'hAppy'];控制臺輸出mood：（3）2.1.3數(shù)組的基本操作Array對象提供的length屬性可以獲取數(shù)組的長度，其值為數(shù)組元素最大下標加1。1.獲取數(shù)組長度vararrl=[78,88,98];vararr2=['a',,,'b','c'];console.log（arrl.length）；//輸出結(jié)果為：3console.log（arr2.length）；//輸出結(jié)果為：52.1.3數(shù)組的基本操作訪問數(shù)組元素：數(shù)組創(chuàng)建完成后，若想要查看數(shù)組中某個具體的元素，可以通過“數(shù)組名[下標]”的方式獲取指定下標的值。2.數(shù)組的訪問與遍歷vararr=['Limin','JavaScript',1156,true];console.log(arr[0]);2.1.3數(shù)組的基本操作遍歷數(shù)組元素：依次訪問數(shù)組中所有元素的操作，可以使用for或for...in語句。2.數(shù)組的訪問與遍歷vararray=[1,2,3,4,5];//定義一個數(shù)組//使用for...in語句遍歷數(shù)組for(varindexinarray){varelement=array[index];console.log(element);}2.1.3數(shù)組的基本操作數(shù)組創(chuàng)建后，可以根據(jù)實際需求，通過自定義數(shù)組元素下標的方式添加元素。3.添加數(shù)組元素vararr=['Honghong',‘Jim’];arr[2]='Tom';arr[3]='Jack';console.log(arr);//輸出結(jié)果:（4）["Honghong"，"Jim"，"Tom"，"Jack"]2.1.3數(shù)組的基本操作修改元素與添加元素的使用方式相同，不同的是修改元素是為已含有值的元素重新賦值。4.修改元素vararr=['a','b','c','d'];arr[2]=123;arr[3]=456;console.log(arr);//輸出結(jié)果：（4）["a"，"b"，123，456]2.1.3數(shù)組的基本操作可以利用delete關(guān)鍵字刪除該數(shù)組元素的值。5.元素的刪除varstu=['Tom','Jimmy','Lucy'];console.log（stu）；//輸出結(jié)果：（3）["Tom"，"Jimmy"，"Lucy"]deletestu[1]；

//刪除數(shù)組中第2個元素console.log（stu）；//輸出結(jié)果：（3）["Tom"，empty，"Lucy"]2.1.4數(shù)組的排序重復(fù)走訪過要排序的數(shù)列，一次比較兩個數(shù)，如果順序錯誤就進行交換，直到?jīng)]有再需要交換。1.冒泡排序2.1.4數(shù)組的排序在未排序的數(shù)組中找到最小或者最大的元素，存放在排序數(shù)組的起始位置。然后再從未排序的數(shù)列中去找到這個數(shù)組中第二大或這第二小的數(shù)放在已排序的數(shù)之后，以此類推，不斷重復(fù)直到所有元素排列完畢。2.選擇排序2.1.4數(shù)組的排序?qū)⒁粋€未排序的元素插入到已經(jīng)排序好的數(shù)組中，從而使得已排序的數(shù)組增加一個元素，通過插入不斷完善已排序數(shù)組。3.插入排序2.1.4數(shù)組的排序三種排序方式優(yōu)劣比較：名稱優(yōu)點缺點冒泡排序穩(wěn)定性好；慢，每次只能移動相鄰兩個數(shù)據(jù)。選擇排序移動數(shù)據(jù)的次數(shù)已知（n-1次）比較次數(shù)多，是一種不穩(wěn)定的排序方法。插入排序穩(wěn)定性好，速度快；比較次數(shù)不一定，比較次數(shù)越少，插入點后的數(shù)據(jù)移動越多，特別是當數(shù)據(jù)總量龐大的時候，但用鏈表可以解決這個問題。2.1.5常見數(shù)組方法JavaScript中可以利用Array對象提供的方法，實現(xiàn)在數(shù)組的末尾或開頭添加數(shù)組的新元素，或在數(shù)組的末尾或開頭移出數(shù)組元素。利用這些方法可以模擬棧和隊列的操作。1.棧和隊列方法方法名稱功能描述push()將一個或多個元素添加到數(shù)組的末尾，并返回數(shù)組的新長度unshift()將一個或多個元素添加到數(shù)組的開頭，并返回數(shù)組的新長度pop()從數(shù)組的末尾移出并返回一個元素，若是空數(shù)組則返回undefinedshift()從數(shù)組的開頭移出并返回一個元素，若是空數(shù)組則返回undefined2.1.5常見數(shù)組方法在開發(fā)中，若要檢測給定的值是否是數(shù)組，或是查找指定的元素在數(shù)組中的位置，則可以利用Array對象提供的檢索方法。2.檢索方法方法名稱功能描述includes()用于確定數(shù)組中是否含有某個元素，含有返回true，否則返回falseArray.isArray()用于確定傳遞的值是否是一個Array，是返回true，不是返回falseindexOf()返回在數(shù)組中可以找到給定值的第1個索引，如果不存在，則返回-1lastIndexOf()返回指定元素在數(shù)組中的最后一個的素引，如果不存在則返回-12.1.5常見數(shù)組方法在項目開發(fā)中,若需要將數(shù)組轉(zhuǎn)換為字符串,則可以利用JavaScript提供的join()和toString()方法實現(xiàn)。3.數(shù)組轉(zhuǎn)字符串方法名稱功能描述join()將數(shù)組的所有元素連接到一個字符串中。toString()返回一個字符串，表示指定的數(shù)組及其元素。2.1.5常見數(shù)組方法JavaScript還提供了很多其他常用的數(shù)組方法。例如，合并數(shù)組、數(shù)組淺拷貝、顛倒數(shù)組元素的順序等。4.其他方法方法名稱功能描述sort()對數(shù)組的元素進行排序，并返回數(shù)組。fill()用一個固定值填充數(shù)組中指定下標范圍內(nèi)的全部元素reverse()顛倒數(shù)組中元素的位置splice()對一個數(shù)組在指定下標范圍內(nèi)刪除或添加元素slice()從一個數(shù)組的指定下標范圍內(nèi)拷貝數(shù)組元素到一個新數(shù)組中concat()返回一個合并兩個或多個數(shù)組后的新數(shù)組2.1.5常見數(shù)組方法一群猴子排成一圈，按“1，2，......，n”依次編號。然后從第1只開始數(shù)，數(shù)到第m只，把它踢出圈，其后的猴子再從1開始數(shù)，數(shù)到第m只，再把它踢出去·....·.如此不停地進行下去，直到最后只剩下一只猴子為止，那只猴子就是我們要找的大王。5.案例--猴子選大王2.1.5常見數(shù)組方法模擬游戲：假設(shè)n（猴子總數(shù)）：8、m（踢出圈的）：3；第一圈：踢出的猴子編號為3、6，位置編號為3、6。第二圈：踢出的猴子編號為1、5，位置編號為9、12。第三圈：踢出的猴子編號為2、8，位置編號為15、18。第四圈：無。第五圈：踢出的猴子編號為4，位置編號為21。得出猴王編號：75.案例--猴子選大王實現(xiàn)思路：通過prompt()接收用戶傳遞的猴子總數(shù)n和踢出的第m只猴子；利用數(shù)組保存所有猴子的編號（1~n）；設(shè)置一個變量i，記錄每次參與游戲（報數(shù)）的猴子位置；通過while循環(huán)，只要猴子數(shù)組內(nèi)元素個數(shù)大于1，就繼續(xù)循環(huán)；在循環(huán)中判斷當前猴子的位置i與m求余是否為0，若為零，刪除該數(shù)組元素。提示：通過出棧的方式取出猴子，如判斷不為0，再將該元素入棧。5.案例2.1.5常見數(shù)組方法通常使用3個下拉菜單分別表示省份、城市和區(qū)域，為了使代碼更好維護，可以利用數(shù)組存儲數(shù)據(jù)，再創(chuàng)建函數(shù)來控制二三級下拉菜單。1.動態(tài)生成下拉菜單動手實踐：三級聯(lián)動菜單的實現(xiàn)functioncreateOption(obj，data){for(variindata){varop=newOption(data[i]，i);obj.options.add(op);}}varprovince=document.getElementById(provincecreateOption(province，provinceArr);用戶選擇完省份后，其后下拉列表中自動獲取該省份的所有城市，并依次類推，選擇完城市后，其后的下拉列表中自動獲取該城市中的所有區(qū)域。2.實現(xiàn)下拉菜單三級聯(lián)動動手實踐：三級聯(lián)動菜單的實現(xiàn)//獲取城市下拉菜單的元素對象varcity=document.getElementById('city’);//為省份下拉列表添加事件province.onchange=function(){optioncity.options.length=0；createOption(city，cityArr[province.value]);}編寫代碼修改省份province的onchange事件，使得區(qū)域的下拉菜單內(nèi)容隨省份修改進行變動。2.實現(xiàn)下拉菜單三級聯(lián)動動手實踐：三級聯(lián)動菜單的實現(xiàn)province.onchange=function(){city.options.length=0;createOption(city，cityArr[province.value]);if(province.value>=0){city.onchange();//自動添加城市對應(yīng)區(qū)域下拉菜單}else{ country.options.length=0;}};

對象2.2.1對象在JavaScript中，對象是一組無序的相關(guān)屬性和方法的集合，所有的事物都是對象，例如字符串、數(shù)值、數(shù)組、函數(shù)等。對象是由屬性和方法組成的。屬性：事物的特征，在對象中用屬性來表示（常用名詞）方法：事物的行為，在對象中用方法來表示（常用動詞）1.什么是對象2.2.1對象在javascript中的對象表達結(jié)構(gòu)更清晰，更強大，如Lucy的個人信息在對象中的表達結(jié)構(gòu)如下：2.為什么需要對象Lucy.姓名=‘Lucy’；=‘Lucy’;Lucy.性別=‘女’；person.sex=‘女’;Lucy.年齡=‘12’；person.age=‘12’;Lucy.身高=‘156’；person.heigh=‘156’;2.2.2對象的創(chuàng)建對象字面量：就是花括號{}里面包含了表達這個具體事物（對象）的屬性和方法。{}里面采取鍵值對的形式表示。鍵：相當于屬性名；值：相當于屬性值，可以是任意類型的值1.利用字面量創(chuàng)建對象varstudent={ name:‘李明’; age:18; sex:’男’;S sayHello:function(){ alert(‘Helloeveryone!’)}; };2.2.2對象的創(chuàng)建Object（）：第一個字母大寫newObject（）：需要new關(guān)鍵字使用的格式：對象.屬性=值；2.利用newObject創(chuàng)建對象varJim=newObect();J='pink';andy.age=18;Jim.sex='男'；Jim.sayHello=function(){alert（'Helloeveryone!'）；}2.2.2對象的創(chuàng)建構(gòu)造函數(shù)用于創(chuàng)建某一類對象，其首字母要大寫構(gòu)造函數(shù)要和new一起使用才有意義3.利用構(gòu)造函數(shù)創(chuàng)建對象functionPerson(name){=name;this.sayHi=function(){ alert（’我的名字叫：’+）； }}varbigboy=newPerson（'大男孩'）；console.log();2.2.3new關(guān)鍵字使用new關(guān)鍵字創(chuàng)建一個新的對象實例：創(chuàng)建一個空的普通JavaScript對象（{}）1將新創(chuàng)建的對象的原型（__proto__）連接到構(gòu)造函數(shù)的原型對象中2將構(gòu)造函數(shù)內(nèi)部的this關(guān)鍵字指向新創(chuàng)建的對象3執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼，初始化新對象的屬性和方法4如果構(gòu)造函數(shù)沒有顯示返回一個對象，則返回新創(chuàng)建的對象52.2.3new關(guān)鍵字//構(gòu)造函數(shù)functionPerson(name,age){=name;this.age=age;}//使用new關(guān)鍵字創(chuàng)建對象varperson1=newPerson("Alice",30);varperson2=newPerson("Bob",25);console.log(person1);//Person{name:'Alice',age:30}console.log(person2);//Person{name:'Bob',age:25}示例：2.2.4遍歷對象對象是鍵值對的集合，通?？赡苄枰闅v它的鍵（key）、值（value）或者兩者?？捎胒or...in語句對數(shù)組或者對象的屬性進行循環(huán)操作。for(varkinobj){console.log(k);//這里的k是屬性名console.log(obj[k]);//這里的obj[k]是屬性值}for（變量in對象名字）{//在此執(zhí)行代碼}2.2.5內(nèi)置對象JavaScript中的對象分為3種：自定義對象、內(nèi)置對象、瀏覽器對象。內(nèi)置對象：就是指JavaScript語言自帶的一些對象，這些對象供開發(fā)者使用，并提供了一些常用的或是最基本而必要的功能（屬性和方法）。優(yōu)點：可幫助我們快速開發(fā)。1.概述2.2.5內(nèi)置對象2.Math對象常用方法功能Math.abs(x)返回一個數(shù)的絕對值。Math.ceil(x)向上取整，返回大于等于給定數(shù)字的最小整數(shù)。Math.floor(x)向下取整，返回小于等于給定數(shù)字的最大整數(shù)。Math.round(x)四舍五入，返回最接近給定數(shù)字的整數(shù)。Math.PI圓周率π的近似值，約為3.141592653589793。Math.max(x1,x2,...xn)返回一組數(shù)中的最大值。Math.pow(x,y)返回x的y次冪。Math.random()返回一個介于0（包含）和1（不包含）之間的隨機浮點數(shù)。Math.log(x)返回一個數(shù)的自然對數(shù)（以e為底）。2.2.5內(nèi)置對象3.Date對象方法名說明代碼getFullYear():獲取年份（4位）dObj.getFullYear()getMonth():獲取月份（0表示一月，11表示十二月）dObj.getMonth()getDate():獲取日期（1-31）。dObj.getDate()getDay():獲取星期幾（0表示星期日，6表示星期六）dObj.getDay()getHours():獲取小時（0-23）dObj.getHours()getMinutes():獲取分鐘（0-59）dObj.getMinutes()getSeconds():獲取秒數(shù)（0-59）dObj.getseconds()getMilliseconds():獲取毫秒數(shù)（0-999）dObj.getMilliseconds()2.2.5內(nèi)置對象4.String對象方法作用length獲取字符串的長度charAt(index)獲取index位置