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

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

WBOY
WBOY原創
2016-05-16 15:41:081334瀏覽

一、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