JavaScript學(xué)習(xí)小結(jié)(一)——JavaScript入門基礎(chǔ)
一、JavaScript語言特點(diǎn)
1.1、JavaScript是基于對象和事件驅(qū)動(dòng)的(動(dòng)態(tài)的)
它可以直接對用戶或客戶輸入做出響應(yīng),無須經(jīng)過Web服務(wù)程序。它對用戶的響應(yīng),是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng),就是指在主頁中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作,就稱為“事件”。比如按下鼠標(biāo),移動(dòng)窗口,選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后,可能會(huì)引起相應(yīng)的事件響應(yīng)。
1.2、JavaScript是跨平臺的
JavaScript是依賴于瀏覽器本身的,與操作系統(tǒng)無關(guān)。
二、JavaScript變量
2.1、定義變量
在定義變量時(shí),統(tǒng)一使用"var 變量名"表示,例如:var str;甚至可以省略var這個(gè)關(guān)鍵字
2.2、JavaScript變量的類型如何決定
JavaScript中變量的數(shù)據(jù)類型是由JS引擎決定的
var name="孤傲蒼狼";//name是string類型 var age=;//age是number類型 var flag=true;//flag是boolean類型 var email;//email只是聲明,沒有賦值,因此代表的類型是"undefined",也就是無法確定 name=;//name自動(dòng)變成了number類型
2.3、使用typeof關(guān)鍵字查看變量代表的具體數(shù)據(jù)類型
typeof 運(yùn)算符有一個(gè)參數(shù),即要檢查的變量或值。例如:
var sTemp = "test string"; alert (typeof sTemp); //輸出 "string" alert (typeof ); //輸出 "number"
對變量或值調(diào)用typeof運(yùn)算符將返回下列值之一:
undefined - 如果變量是 Undefined 類型的
boolean - 如果變量是 Boolean 類型的
number - 如果變量是 Number 類型的
string - 如果變量是 String 類型的
object - 如果變量是一種引用類型或 Null 類型的
測試代碼:
<script type="text/javascript"> var name="孤傲蒼狼";//name是string類型 alert("name是"+typeof name+"類型"); var age=;//age是number類型 alert("age是"+typeof age+"類型"); var flag=true;//flag是boolean類型 alert("flag的類型是:"+typeof flag); name=;//name自動(dòng)變成了number類型 alert("name變量重新賦值后,name的數(shù)據(jù)類型變成了:"+typeof name); var email;//email只是聲明,沒有賦值,因此代表的類型是"undefined",也就是無法確定 alert("email的類型是:"+typeof email ); var a=null; /* 為什么 typeof 運(yùn)算符對于 null 值會(huì)返回 "Object"。 這實(shí)際上是 JavaScript 最初實(shí)現(xiàn)中的一個(gè)錯(cuò)誤,然后被 ECMAScript 沿用了?,F(xiàn)在,null 被認(rèn)為是對象的占位符,從而解釋了這一矛盾,但從技術(shù)上來說,它仍然是原始值。 */ alert("a是"+typeof a +"類型"); </script>
運(yùn)行結(jié)果:
三、JavaScript數(shù)據(jù)類型
JavaScript包含兩種不同數(shù)據(jù)類型:基本數(shù)據(jù)類型和引用數(shù)據(jù)類型?;绢愋椭傅氖呛唵蔚臄?shù)據(jù),引用類型指由多個(gè)值構(gòu)成的對象。當(dāng)我們把值賦值給一個(gè)變量時(shí),解析器首先要做的就是確認(rèn)這個(gè)值是基本類型值還是引用類型值。
3.1、基本數(shù)據(jù)類型
常見的五種基本數(shù)據(jù)類型:
Boolean
Number
String
Undifined
Null
這五種基本數(shù)據(jù)類型可以直接操作保存在變量中的實(shí)際值。
3.1.1、數(shù)值類型(Number)和布爾類型(Boolean)
看下面的代碼:
<script type="text/javascript"> var a = ; var b = a; b = ; alert("a="+a);//打印a= var b = true; var b = b; b = false; alert("b="+b);//打印b=true </script>
運(yùn)行結(jié)果:
從運(yùn)行結(jié)果可以看出,b的值是a值的一份拷貝,雖然,兩個(gè)變量的值是相等,但是兩個(gè)變量保存兩不同的基本數(shù)據(jù)類型值。b只是保存了a復(fù)制的一個(gè)副本。所以,當(dāng)b的值改變成20時(shí),a的值依然是10。兩個(gè)Boolean變量b1和b2同樣是基本數(shù)據(jù)類型,同樣保存兩個(gè)不同的基本數(shù)據(jù)據(jù)類型值,b2保存1復(fù)制的一個(gè)副本。所以,當(dāng)b2的值改變成false時(shí),b1的值依然是true。
下圖演示了這種基本數(shù)據(jù)類型賦值的過程:
棧內(nèi)存
3.1.2、字符串類型(String)
JavaScript中的字符串String一個(gè)特殊的基本數(shù)據(jù)類型,在很多語言中,String是以對象的形式表示的,但在JavaScript里,String是當(dāng)作一種基本數(shù)據(jù)類型,是通值傳遞的方式來操作。但它是一個(gè)比較特殊的基本類型。
看下面例子:
<script type="text/javascript"> var strA = "這是字符串"; var strB = strA; strA = "這是另外一個(gè)字符串"; alert("strB="+strB); </script>
運(yùn)行結(jié)果:
從運(yùn)行結(jié)果可以看到,仿佛strA通過值傳遞的方式復(fù)制了一份給了strB。當(dāng)strA改變的時(shí)候,strB并沒有改變,似乎我們已經(jīng)可以下結(jié)論,String就是個(gè)基本數(shù)據(jù)類型。
可是,因?yàn)镾tring是可以任意長度的,通過值傳遞,一個(gè)一個(gè)的復(fù)制字節(jié)顯示效率依然很低,看起來String也可以當(dāng)作引用類型。
看下面例子:
var a = "myobject"; a.name = "myname";//為字符串a(chǎn)動(dòng)態(tài)添加name屬性 alert("a.name="+a.name); //訪問a的name屬性,
結(jié)果顯示:a.name=undefined
運(yùn)行結(jié)果:
運(yùn)行結(jié)果顯示,String無法當(dāng)作一個(gè)對象來處理。這也證明了一點(diǎn):基本類型雖然也可以添加屬性,也不會(huì)報(bào)錯(cuò),經(jīng)測試添加完之后卻是無法訪問的,實(shí)際上,javascript里的String是不可以改變的,javascript也沒有提供任何一個(gè)改變字符串的方法和語法。
看下面的例子:
var b = "myobject"; b = b.substring(,); alert("b="+b); // b=bj
運(yùn)行結(jié)果:
這樣做,沒并有改變String字符串"myobject",只b引用了另一個(gè)字符串"bj","myobject"被回收了。
所以可以這樣講,String實(shí)際上并不符合上面兩種數(shù)據(jù)類型分類。它是具有兩方面屬性介于兩都之間的一種特殊類型。
3.1.3、Null 類型
Null類型只有一個(gè)專用值 null,值 undefined 實(shí)際上是從值 null 派生來的,因此 ECMAScript 把它們定義為相等的。
<script type="text/javascript"> alert("null == undefined的結(jié)果是:"+(null == undefined)); //輸出 "true" </script>
運(yùn)行結(jié)果:
盡管這兩個(gè)值相等,但它們的含義不同。undefined 是聲明了變量但未對其初始化時(shí)賦予該變量的值,null 則用于表示尚未存在的對象(typeof 運(yùn)算符對于 null 值會(huì)返回 "Object"。)。如果函數(shù)或方法要返回的是對象,那么找不到該對象時(shí),返回的通常是 null。
3.1.4、Undefined 類型
Undefined 類型只有一個(gè)值,即 undefined。當(dāng)聲明的變量未初始化時(shí),該變量的默認(rèn)值是 undefined。
var oTemp;
前面一行代碼聲明變量 oTemp,沒有初始值。該變量將被賦予值 undefined,即 undefined 類型的字面量。可以用下面的代碼段測試該變量的值是否等于 undefined:
<script type="text/javascript"> var oTemp; alert("oTemp == undefined的結(jié)果是:"+(oTemp == undefined));//輸出 "true" </script>
運(yùn)行結(jié)果:
運(yùn)行結(jié)果顯示 "true",說明這兩個(gè)值確實(shí)相等。
可以用 typeof 運(yùn)算符顯示該變量所代表的的數(shù)據(jù)類型是undefined類型
<script type="text/javascript"> var oTemp; alert("typeof oTemp的結(jié)果是:"+typeof oTemp); //輸出 "undefined" </script>
值 undefined 并不同于未定義的值。但是,typeof 運(yùn)算符并不真正區(qū)分這兩種值??紤]下面的代碼:
<script type="text/javascript"> var oTemp; alert("oTemp變量有聲明,typeof oTemp的結(jié)果是:"+typeof oTemp); //輸出 "undefined" alert("oTemp變量沒有聲明,typeof oTemp的結(jié)果是:"+typeof oTemp); //輸出 "undefined" </script>
運(yùn)行結(jié)果:
兩個(gè)變量輸出的都是 "undefined",即使只有變量 oTemp2 從未被聲明過。如果對oTemp2 使用除 typeof 之外的其他運(yùn)算符的話,會(huì)引起錯(cuò)誤,因?yàn)槠渌\(yùn)算符只能用于已聲明的變量上。
下面的代碼將引發(fā)錯(cuò)誤:
var oTemp; alert(oTemp == undefined);//'oTemp' 未定義
當(dāng)函數(shù)無明確返回值時(shí),返回的也是值 "undefined",如下所示:
function testFunc() { //這是一個(gè)空函數(shù),沒有返回值 } alert("testFunc() == undefined的結(jié)果是:"+(testFunc() == undefined)); //輸出 "true"
運(yùn)行結(jié)果:
3.2、引用數(shù)據(jù)類型
javascript引用數(shù)據(jù)類型是保存在堆內(nèi)存中的對象,JavaScript不允許直接訪問堆內(nèi)存空間中的位置和操作堆內(nèi)存空間,只能通過操作對象在棧內(nèi)存中的引用地址。所以引用類型的數(shù)據(jù),在棧內(nèi)存中保存的實(shí)際上是對象在堆內(nèi)存中的引用地址。通過這個(gè)引用地址可以快速查找到保存在堆內(nèi)存中的對象。
看下面的例子:
<script type="text/javascript"> var obj = new Object(); var obj = obj; obj.name = "孤傲蒼狼"; alert(obj.name); // 孤傲蒼狼 </script>
運(yùn)行結(jié)果:
由上面例子,我們聲明了一個(gè)引用數(shù)據(jù)類型變量obj1,并把它賦值給了另外一個(gè)引用數(shù)據(jù)類型變量obj2。當(dāng)我們obj2添加了一個(gè)name屬性并賦值" 孤傲蒼狼"。obj1同樣擁有了和obj2一樣的name屬性。說明這兩個(gè)引用數(shù)據(jù)類型變量指向同一個(gè)對象。obj1賦值給obj2,實(shí)際只是把這個(gè)對象在棧內(nèi)存的引用地址復(fù)制了一份給了obj2,但它們本質(zhì)上共同指向了堆內(nèi)存中的同一個(gè)對象。
下面我們來演示這個(gè)引用數(shù)據(jù)類型賦值過程
自然,給obj2添加name屬性,實(shí)際上是給堆內(nèi)存中的對象添加了name屬性,obj2和obj1在棧內(nèi)存中保存的只是堆內(nèi)存對象的引用地址,雖然也是拷貝了一份,但指向的對象卻是同一個(gè)。故而改變obj2引起了obj1的改變。
一般而言,基本數(shù)據(jù)類型是由固定數(shù)目的字節(jié)組成,這些字節(jié)可以在解析器的較底層進(jìn)行操作,比如Number和 Boolean;而引用數(shù)據(jù)類型,可以包含任意數(shù)目的屬性和元素,因此它們無法像基本數(shù)據(jù)類型那樣很容易的操作。
由于,引用數(shù)據(jù)類型的值是會(huì)發(fā)生變化的, 所以通過跟基本數(shù)據(jù)類型一樣的值傳遞方式,也就沒什么意義了,因?yàn)闀?huì)牽涉到大量的內(nèi)存的復(fù)制和比較,效率太低。所以引用數(shù)據(jù)類型是通過引用傳遞方式,實(shí)際傳遞的只是對象的一個(gè)地址。
比如Array和Function,因?yàn)樗鼈兌际翘厥獾膶ο笏运鼈兌际且妙愋?。另外,引用類型是可以添加屬性,基本類型雖然也可以添加屬性,也不會(huì)報(bào)錯(cuò),經(jīng)測試添加完之后卻是無法訪問的。
相關(guān)文章
微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11原生JS封裝拖動(dòng)驗(yàn)證滑塊的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了原生JS封裝拖動(dòng)驗(yàn)證滑塊的實(shí)現(xiàn)代碼示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06javascript帶回調(diào)函數(shù)的異步腳本載入方法實(shí)例分析
這篇文章主要介紹了javascript帶回調(diào)函數(shù)的異步腳本載入方法,以實(shí)例形式較為詳細(xì)的分析了javascript回調(diào)函數(shù)實(shí)現(xiàn)異步載入的定義與使用技巧,需要的朋友可以參考下2015-07-07Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11uni-app微信小程序登錄并使用vuex存儲登錄狀態(tài)的思路詳解
這篇文章主要介紹了uni-app微信小程序登錄并使用vuex存儲登錄態(tài)的思路,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11js canvas實(shí)現(xiàn)驗(yàn)證碼并獲取驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)驗(yàn)證碼并獲取驗(yàn)證碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JavaScript實(shí)現(xiàn)頁面中錄音功能的方法
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)頁面中錄音功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06JS實(shí)現(xiàn)判斷對象是否為空對象的5種方法
這篇文章主要介紹了JS實(shí)現(xiàn)判斷對象是否為空對象的5種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04