首頁 web前端 js教程 JavaScript學習小結(一)-JavaScript入門基礎_javascript技巧

JavaScript學習小結(一)-JavaScript入門基礎_javascript技巧

May 16, 2016 pm 03:41 PM
js入門 js基礎

一、JavaScript語言特點

1.1、JavaScript是基於物件和事件驅動的(動態的)

  它可以直接對使用者或客戶輸入做出回應,無須經過Web服務程式。它對用戶的回應,是採用以事件驅動的方式進行的。所謂事件驅動,就是指在主頁中執行了某種操作所產生的動作,就稱為「事件」。例如按下滑鼠,移動窗口,選擇菜單等都可以視為事件。當事件發生後,可能會引起相應的事件回應。

1.2、JavaScript是跨平台的

  JavaScript是依賴瀏覽器本身的,與作業系統無關。

二、JavaScript變數

2.1、定義變數

  在定義變數時,統一使用"var 變數名稱"表示,例如:var str;甚至可以省略var這個關鍵字

2.2、JavaScript變數的型別如何決定

  JavaScript中變數的資料型別是由JS引擎決定的

 var name="孤傲苍狼";//name是string类型
 var age=;//age是number类型
 var flag=true;//flag是boolean类型
 var email;//email只是声明,没有赋值,因此代表的类型是"undefined",也就是无法确定
 name=;//name自动变成了number类型
登入後複製

2.3、使用typeof關鍵字查看變數代表的特定資料型別

  typeof 運算子有一個參數,即要檢查的變數或值。例如:

 var sTemp = "test string";
 alert (typeof sTemp);  //输出 "string"
 alert (typeof );  //输出 "number"
登入後複製

對變數或值呼叫typeof運算子將傳回下列值之一:

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自动变成了number类型
   alert("name变量重新赋值后,name的数据类型变成了:"+typeof name);
   var email;//email只是声明,没有赋值,因此代表的类型是"undefined",也就是无法确定
   alert("email的类型是:"+typeof email );
   var a=null;
 /*
 为什么 typeof 运算符对于 null 值会返回 "Object"。
 这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
 */
   alert("a是"+typeof a +"类型");
  </script>
登入後複製

運行結果:

 三、JavaScript資料型別

  

  JavaScript包含兩種不同資料類型:基本資料型別和參考資料型別。基本型別指的是簡單的數據,引用型別指由多個值所構成的物件。當我們把值賦值給變數時,解析器首先要做的就是確認這個值是基本型別值還是引用型別值。

3.1、基本資料型別

  常見的五種基本資料類型:

Boolean
Number
String
Undifined
Null  

這五種基本資料型別可以直接操作保存在變數中的實際值。

3.1.1、數值型別(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>
登入後複製

 運行結果:

  從運行結果可以看出,b的值是a值的一份拷貝,雖然,兩個變數的值是相等,但是兩個變數保存兩個不同的基本資料型別值。 b只是保存了a複製的一個副本。所以,當b的值改變成20時,a的值還是10。兩個Boolean變數b1和b2同樣是基本資料型,同樣保存兩個不同的基本資料據型值,b2保存1複製的一個副本。所以,當b2的值改變成false時,b1的值還是true。

下圖示範了這個基本資料型別賦值的過程:

堆疊記憶體

 

3.1.2、字串型別(String)

  JavaScript中的字串String一個特殊的基本資料類型,在很多語言中,String是以物件的形式表示的,但在JavaScript裡,String是當作一種基本資料類型,是通值傳遞的方式來操作。但它是一個比較特殊的基本型別。

看下面範例:

<script type="text/javascript">
   var strA = "这是字符串";
   var strB = strA;
     strA = "这是另外一个字符串";
     alert("strB="+strB);
 </script>
登入後複製

运行结果:

  

  从运行结果可以看到,仿佛strA通过值传递的方式复制了一份给了strB。当strA改变的时候,strB并没有改变,似乎我们已经可以下结论,String就是个基本数据类型。

可是,因为String是可以任意长度的,通过值传递,一个一个的复制字节显示效率依然很低,看起来String也可以当作引用类型。

看下面例子:

 var a = "myobject";
 a.name = "myname";//为字符串a动态添加name属性
 alert("a.name="+a.name); //访问a的name属性,
登入後複製

结果显示:a.name=undefined

运行结果:

  

  运行结果显示,String无法当作一个对象来处理。这也证明了一点:基本类型虽然也可以添加属性,也不会报错,经测试添加完之后却是无法访问的,实际上,javascript里的String是不可以改变的,javascript也没有提供任何一个改变字符串的方法和语法。

看下面的例子:

 var b = "myobject";
 b = b.substring(,);
 alert("b="+b); // b=bj
登入後複製

运行结果:

  

  这样做,没并有改变String字符串"myobject",只b引用了另一个字符串"bj","myobject"被回收了。

  所以可以这样讲,String实际上并不符合上面两种数据类型分类。它是具有两方面属性介于两都之间的一种特殊类型。

3.1.3、Null 类型

  Null类型只有一个专用值 null,值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。

  <script type="text/javascript">
    alert("null == undefined的结果是:"+(null == undefined)); //输出 "true"
  </script>
登入後複製

运行结果:

  

  尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象(typeof 运算符对于 null 值会返回 "Object"。)。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。

3.1.4、Undefined 类型

  Undefined 类型只有一个值,即 undefined。当声明的变量未初始化时,该变量的默认值是 undefined。

var oTemp;

  前面一行代码声明变量 oTemp,没有初始值。该变量将被赋予值 undefined,即 undefined 类型的字面量。可以用下面的代码段测试该变量的值是否等于 undefined:

 <script type="text/javascript">
   var oTemp;
   alert("oTemp == undefined的结果是:"+(oTemp == undefined));//输出 "true"
  </script>
登入後複製

运行结果:

  

  运行结果显示 "true",说明这两个值确实相等。

  可以用 typeof 运算符显示该变量所代表的的数据类型是undefined类型

 <script type="text/javascript">
   var oTemp;
   alert("typeof oTemp的结果是:"+typeof oTemp); //输出 "undefined"
  </script>
登入後複製

  值 undefined 并不同于未定义的值。但是,typeof 运算符并不真正区分这两种值。考虑下面的代码:

 <script type="text/javascript">
   var oTemp;
   alert("oTemp变量有声明,typeof oTemp的结果是:"+typeof oTemp); //输出 "undefined"
   alert("oTemp变量没有声明,typeof oTemp的结果是:"+typeof oTemp); //输出 "undefined"
  </script>
登入後複製

运行结果:

  两个变量输出的都是 "undefined",即使只有变量 oTemp2 从未被声明过。如果对oTemp2 使用除 typeof 之外的其他运算符的话,会引起错误,因为其他运算符只能用于已声明的变量上。

  下面的代码将引发错误:

var oTemp;
 alert(oTemp == undefined);//'oTemp' 未定义
登入後複製

  当函数无明确返回值时,返回的也是值 "undefined",如下所示:

function testFunc() { 
   //这是一个空函数,没有返回值
 }
 alert("testFunc() == undefined的结果是:"+(testFunc() == undefined)); //输出 "true"
登入後複製

运行结果:

  

3.2、引用数据类型

  javascript引用数据类型是保存在堆内存中的对象,JavaScript不允许直接访问堆内存空间中的位置和操作堆内存空间,只能通过操作对象在栈内存中的引用地址。所以引用类型的数据,在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存在堆内存中的对象。

看下面的例子:

 <script type="text/javascript">
   var obj = new Object();
   var obj = obj;
   obj.name = "孤傲苍狼";
   alert(obj.name); // 孤傲苍狼
 </script>
登入後複製

运行结果:

  

  由上面例子,我们声明了一个引用数据类型变量obj1,并把它赋值给了另外一个引用数据类型变量obj2。当我们obj2添加了一个name属性并赋值" 孤傲苍狼"。obj1同样拥有了和obj2一样的name属性。说明这两个引用数据类型变量指向同一个对象。obj1赋值给obj2,实际只是把这个对象在栈内存的引用地址复制了一份给了obj2,但它们本质上共同指向了堆内存中的同一个对象。

下面我们来演示这个引用数据类型赋值过程

    

自然,给obj2添加name属性,实际上是给堆内存中的对象添加了name属性,obj2和obj1在栈内存中保存的只是堆内存对象的引用地址,虽然也是拷贝了一份,但指向的对象却是同一个。故而改变obj2引起了obj1的改变。

  一般而言,基本数据类型是由固定数目的字节组成,这些字节可以在解析器的较底层进行操作,比如Number和 Boolean;而引用数据类型,可以包含任意数目的属性和元素,因此它们无法像基本数据类型那样很容易的操作。

由于,引用数据类型的值是会发生变化的, 所以通过跟基本数据类型一样的值传递方式,也就没什么意义了,因为会牵涉到大量的内存的复制和比较,效率太低。所以引用数据类型是通过引用传递方式,实际传递的只是对象的一个地址。

比如Array和Function,因为它们都是特殊的对象所以它们都是引用类型。另外,引用类型是可以添加属性,基本类型虽然也可以添加属性,也不会报错,经测试添加完之后却是无法访问的。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

JavaScript難以學習嗎? JavaScript難以學習嗎? Apr 03, 2025 am 12:20 AM

學習JavaScript不難,但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程,通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤,使用調試技巧。 5)優化性能,遵循最佳實踐。

如何實現視差滾動和元素動畫效果,像資生堂官網那樣?
或者:
怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? 如何實現視差滾動和元素動畫效果,像資生堂官網那樣? 或者: 怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? Apr 04, 2025 pm 05:36 PM

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

console.log輸出結果差異:兩次調用為何不同? console.log輸出結果差異:兩次調用為何不同? Apr 04, 2025 pm 05:12 PM

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異,並解釋其背後的原因。 �...

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

See all articles