DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript高級程序設計(第3版)學習筆記3 js簡單數據類型
JavaScript高級程序設計(第3版)學習筆記3 js簡單數據類型
編輯:JavaScript基礎知識     
ECMAScript是一種動態類型的語言,構建於5種簡單數據類型(Undefined、Null、Boolean、Number、String)和一種復雜數據類型(Object)的基礎之上。這篇文章就來復習一下簡單數據類型,我會盡量從編程實踐的角度來描述,下面代碼運行環境為FireFox 14.0.1。

簡單數據類型

簡單數據類型 取值 Undefined undefined(只有一個值) Null null(只有一個值) Boolean true|false(只有兩個值) Number 數值 String 字符串

  首先需要說明的是,在ECMAScript中,上述5種簡單數據類型,其中Boolean、Number、String都有同名的內置包裝對象,而簡單數據類型的字面值(變量)會根據情況自動包箱,從而可以直接調用方法,至於具體可以調用哪些方法,在討論內置對象時再詳細說明:
復制代碼 代碼如下:
console.info(true.toString());//true,相當於使用Boolean()包裝之後再調用
console.info(Boolean(false).toString());//false,將false轉換為Boolean類型值
console.info(new Boolean(false).toString());//false,將false使用Boolean()包裝
console.info(false.toString());//false,相當於使用Boolean()包裝之後再調用
console.info('test'.toString());//test,相當於使用String()包裝之後再調用

try{
console.info(undefined.toString());//沒有相應包裝類型,拋出異常
}catch(e){
console.info(e);//TypeError
}
try{
console.info(null.toString());//沒有相應包裝類型,拋出異常
}catch(e){
console.info(e);//TypeError
}

var num = 4;
console.info(num.toString());//4,可以直接在簡單數值變量上調用方法,相當於使用Number()包裝之後再調用
//console.info(3.toString());//SyntaxError,語法錯誤不能使用try捕獲,說明不能直接在數值字面量上調用

其次說一下實際用的最多的數據轉換:
  (1)轉換為Boolean:!!value
  (2)轉換為Number:+value
  (3)轉換為String:''+value
  下面再具體說明5種簡單數據類型:
1、Undefined類型
  Undefined數據類型只有一個取值:undefined。
(1)所有未初始化的值都默認為undefined(也就沒有必要把一個變量顯示初始化為undefined了)。
(2)在函數作用域中,沒有傳入實際參數的函數形參為undefined。
(3)函數沒有明確返回或者return;的時候,返回值為undefined。
(4)在ECMAScript中,規定null==undefined返回true,而null===undefined返回false。
(5)undefined相應的Boolean值為false。
(6)使用typeof作用於undefiend時,返回字符串'undefined',作用於一個從未聲明的“變量”時,也會返回'undefined'。
(7)undefined轉換數值為NaN,轉換字符串為'undefined'。
復制代碼 代碼如下:
console.info(undefined===undefined);//true
console.info(typeof undefined);//undefined
console.info(typeof noDefined);//undefined,未定義的標識符,使用typeof也返回undefined,這也是未定義的標識符唯一可用的的操作符
console.info(!undefined);//true,這裡返回true,正是很多條件語句中判斷變量是否初始化的基礎
console.info(!!undefined);//任何一個值,使用雙重否定!!都會將其轉換為相應的Boolean值,這裡說明undefiend相應的Boolean值為false
console.info(undefined==null);//ES中規定,null與undefined相等性測試返回true
console.info(undefined===null);//但undefined與null畢竟是兩個數據類型,使用全等比較時,返回false
console.info(typeof undefined==undefined);//false,typeof undefined返回的是一個字符串'undefined',所以這裡輸出false
console.info(+undefined);//NaN,轉換數值時為NaN
console.info(''+undefined);//undefined,轉換為字符串'undefined'

2、Null類型
  Null類型也只有一個值:null。
(1)對null值使用typeof時,返回字符串'object'。
(2)null相應的Boolean值為false。
(3)如果一個變量用於保存一個對象,建議初始化為null。
(4)null轉換數值為0,轉換字符串為'null'。
復制代碼 代碼如下:
console.info(null===null);//true
console.info(typeof null);//object
console.info(!null);//true
console.info(!!null);//false,說明null相應的Boolean值為false
console.info(undefined==null);//true
console.info(undefined===null);//false
console.info(+null);//0,轉換為數值0
console.info(''+null);//null,轉換為字符串'null'

3、Boolean類型
  Boolean類型只有兩個值:true和false。
(1)雖然只有兩個值,但是任何一種數據類型的值都能轉換為與其相對應的Boolean值,轉換方式主要有三種:
  A、通過轉型函數Boolean()轉換
    需要注意的是,當Boolean()作為轉換函數時,會轉換為一個與其相應的Boolean值,當作為構造函數時,會創建一個對象,而任意非空對象的Boolean值都是true,有時候這會造成誤解,建議就是不使用Boolean()。對於String()、Number()也有類似情況。
  B、通過雙重否定!!操作符轉換
  C、通過隱式轉換,比如一些條件語句中
(2)Boolean類型的true和false,使用typeof時,均返回字符串'boolean'。
(3)在轉換為數值時,true和false分別轉換為1和0,轉換為字符串時,分別為'true'和'false'。
復制代碼 代碼如下:
var value = 'test';
var empty = '';
console.info(!!value);//true
console.info(!!empty);//false
console.info(Boolean(value));//true
console.info(Boolean(empty));//false
console.info(!!value === Boolean(value));//true,說明兩種轉換方式等價
console.info(!!empty === Boolean(empty));//true
console.info(new Boolean(value));//Boolean對象,注意這裡使用了new,會創建一個對象
console.info(new Boolean(empty));//Boolean對象
if(value){//隱式轉換為true
console.info(value);//test
}
if(empty){//隱式轉換為false,不執行括號內部語句
console.info('empty');
}
if(new Boolean(empty)){//先創建對象,再隱式轉換為true,會執行括號內部的語句
console.info('empty');//empty
}
console.info(typeof true == 'boolean');//true
console.info(+true);//1,一元操作符,轉換為數值1
console.info(+false);//0
console.info(''+true);//true,重載後的+操作符,轉換為字符串'true'
console.info(''+false);//false


具體的轉換規則如下:

數據類型 轉換為true的值 轉換為false的值 Undefined - undefined Null - null Boolean true false Number 任意非0數值(包括無窮大) 0和NaN String 任意非空字符串 空字符串 Object 任意對象 -

 4、Number類型

  在ECMAScript中,沒有單獨的整型、浮點型,只有一個Number類型,使用IEEE754格式來表示(這種表示法在計算時會有捨入誤差),在這裡不去細究底層實現,這些東西在學校學C語言的時候已經很頭痛了,不想再頭痛一次。下面我把實際編程中用的最多的放到最前面來講,這一般來說已經足夠,對於不想被太邊緣的細節所困擾的朋友,隨時可以跳過後面關於Number的論述。

(1)數值轉換:主要是下面的三個轉換函數

  • Number()函數:和Boolean()類似,將數據轉換成Number類型,和使用一元加操作符(+)作用相同,建議使用 + 操作符,比較簡單。
  • parseInt()函數:解析整數,可以傳入數據和進制,如parseInt('070',8)輸出10進制的56。
  • parseFloat()函數:解析浮點數,只能接受一個參數,需要注意的是,如果被解析的數據結果是整數,會直接返回整數。

注:使用Number()和+轉換時,true—>1,false—>0,undefined—>NaN,null—>0,空字符串—>0,非空字符串—>按數值解析。

復制代碼 代碼如下:
var trueVal = true;
var falseVal = false;
var undef = undefined;
var nullVal = null;
var intVal = '1';
var floatVal = '1.0';
var strVal = 'test';
var empty = '';
console.info(Number(trueVal));//1
console.info(Number(falseVal));//0
console.info(Number(undef));//NaN
console.info(Number(nullVal));//0
console.info(Number(intVal));//1
console.info(Number(floatVal));//1
console.info(Number(strVal));//NaN
console.info(Number(empty));//0

console.info(+trueVal);//1
console.info(+falseVal);//0
console.info(+undef);//NaN
console.info(+nullVal);//0
console.info(+intVal);//1
console.info(+floatVal);//1
console.info(+strVal);//NaN
console.info(+empty);//0

console.info(parseInt(trueVal));//NaN
console.info(parseInt(falseVal));//NaN
console.info(parseInt(undef));//NaN
console.info(parseInt(nullVal));//NaN
console.info(parseInt(intVal));//1
console.info(parseInt(floatVal));//1
console.info(parseInt(strVal));//NaN
console.info(parseInt(empty));//NaN

console.info(parseFloat(trueVal));//NaN
console.info(parseFloat(falseVal));//NaN
console.info(parseFloat(undef));//NaN
console.info(parseFloat(nullVal));//NaN
console.info(parseFloat(intVal));//1
console.info(parseFloat(floatVal));//1
console.info(parseFloat(strVal));//NaN
console.info(parseFloat(empty));//NaN

說明:這些轉換函數的行為可能會由於浏覽器的不同實現而不同,建議在實際編程過程中對存有疑問的先自行編寫測試。在《JavaScript高級程序設計(第3版)》中,這一節描述的也有很多地方和我實際運行的結果不同,比如原書說parseInt()只能解析字符串,但是下面的代碼也可以運行:
復制代碼 代碼如下:
var object = {
value:1,
toString:function(){
return this.value;
}
};
console.info(parseInt(object));//1

(2)整數和浮點數:受C語言熏陶的人,肯定要固執的區分一下整數和浮點數吧!在ECMAScript中,他們沒有預想的那麼有差別,簡單點,含有小數點且小數點後至少有一位不是0的數值就是浮點數,否則就是整數,比如1.01是浮點數,1.、1.00因為小數點後沒有不是0的數,引擎會解析成整數1。你可能會設想兩個整數相除結果也會取整吧,比如3 / 2 = 1,但是在ECMAScript中,不要擔心這些,已經還原其數學屬性了,你會發現 3 / 2 = 1.5了,這一點,在運算符相關部分還會再提及。

(3)進制:也稱進位制,實際上就是進位(低位向高位)的方法,每種進制都有一個基數,當低位數值達到這個基數時,就向高位進1。在日常生活中,用的最多的自然是10進制,比如10角就進位為1元,在時間度量中,還有24進制(24小時為1天)、60進制(60秒為1分),在古代,也有使用16進制的(想一想半斤八兩吧)。但是在計算機的處理中,由於電流只有通和不通兩種狀態,所以只能處理2進制數據,不過這對於自然人來說不好理解,於是又使用8進制、16進制作為10進制和2進制轉換的中間狀態。

  在ES3中,可以使用8進制、10進制、16進制,但是在ES5中,8進制已經被禁用了。

  8進制:以1位數字0開始,後面是8進制數字序列(0~7),如果數字超過了7,會忽略前導0而作為10進制處理,比如08會解析為10進制的數字8。

  16進制:以1位數字0和1個字母x開始,後面是16進制數字序列(0-9a-fA-F)。

  10進制:可以直接將所有數位一一寫出來,也可以使用科學計數法(不明白?找一本中學數學教科書來看看吧)來表示。

(3)特殊值:在ECMAScript中,有2個特殊的數值NaN和Infinity需要注意一下,前者表示不是一個數值(Not a Number),後者表示不在表示范圍內的數值,還可以使用正負號表示方向。對於這兩個特殊值,這裡不去考察具體的運算規則(你若感興趣,可以自行測試,我在下面也會舉一些例子),只做如下兩點說明:

  A、不能用val==NaN來判斷一個變量是否為NaN,而要使用全局的isNaN()函數,該函數接受一個參數,當參數可以轉換為數值時返回true,否則返回false。

  B、盡量不要使用val==Infinity判斷是否超出范圍,而使用全局的isFinite()函數,該函數接受一個參數,當參數數值處於表示范圍內時返回true,否則返回false。這裡所說的表示范圍是指從Number.MIN_VALUE到Number.MAX_VALUE,另外,在Number裡面,還有屬性Number.NEGATIVE_INFINITY和Number.POSITIVE_INFINITY,其值分別為Infinity和 -Infinity。
復制代碼 代碼如下:
console.info(0/0); //NaN
console.info(NaN==NaN);//false
console.info(NaN+1);//NaN
console.info(NaN/NaN);//NaN

var notNumber = NaN;
console.info(notNumber==NaN);//false
console.info(isNaN(notNumber));//true
console.info(1/0); //Infinity
console.info(-1/0); //-Infinity
console.info(1/Infinity);//0
console.info(Infinity/Infinity);//NaN
console.info(Infinity==Infinity); //true
var inf = Infinity;
console.info(inf==Infinity);//true
console.info(!isFinite(inf));//true
console.info(!isFinite(NaN));//true
console.info(isNaN(Infinity));//false

注:在《JavaScript高級程序設計(第3版)》中第29頁說任何數值除以0都會返回NaN,實際上並非如此。

5、String類型

  和一般類C語言不同,在ECMAScript中,沒有字符類型,而將字符串類型String作為一種簡單類型,其字面量使用引號(單引號'或雙引號“)括起來。

(1)對於字符串類型的操作,加號“+”被重載,任意一個數值與字符串相加,都會先將其使用String()轉換成字符串,然後將兩個字符串合並。

(2)使用String()轉換,undefined—>'undefined',null—>'null',true—>'true',false—>'false',數值類型Number—>按數值可見的字符轉換,對象Object—>調用toString。
復制代碼 代碼如下:
console.info(''+1+1);//11,而不是2
console.info(''+true);//true
console.info(''+undefined);//undefined
console.info(''+null);//null

(3)字符串使用反斜槓“\”來轉義,常見的一些轉義字符有:

字面量 含義 字面量 含義 \n 換行 \\ 反斜槓 \t 制表 \' 單引號 \b 空格 \" 雙引號 \r 回車 \xnn 以十六進制代碼nn表示的一個字符 \f 進紙 \unnnn 以十六進制代碼nnnn表示的一個Unicode字符

好了,關於簡單數據類型,就整理到此。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved