搜尋
首頁web前端js教程JavaScript高階程式設計(第3版)學習筆記3 js簡單資料型別_基礎知識

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===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===nullull); /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; falseVal = false;
var undef = undefined;
var nullVal = null;
var intVal = '1';
var floatVal = '1.0';
var strVal🎜>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(trueVal));//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 = {


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( )轉換成字串,然後將兩個字串合併。 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字符

好了,關於簡單資料型,就整理到此。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

如何創建和發布自己的JavaScript庫?如何創建和發布自己的JavaScript庫?Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能?如何在瀏覽器中優化JavaScript代碼以進行性能?Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

如何使用瀏覽器開發人員工具有效調試JavaScript代碼?如何使用瀏覽器開發人員工具有效調試JavaScript代碼?Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

如何構建簡單的jQuery滑塊如何構建簡單的jQuery滑塊Mar 11, 2025 am 12:19 AM

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫,它基於jQuery構建,並提供許多配置選項來設置輪播。 如今,圖片輪播已成為網站必備功能——一圖胜千言! 決定使用圖片輪播後,下一個問題是如何創建它。首先,您需要收集高質量、高分辨率的圖片。 接下來,您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計,因此使用此庫構建的輪播可以適應任何

jQuery矩陣效果jQuery矩陣效果Mar 10, 2025 am 12:52 AM

將矩陣電影特效帶入你的網頁!這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效,只需選擇一張圖片,插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧,非常有趣! 工作原理 插件將圖片加載到畫布上,讀取像素和顏色值: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域,並利用jQuery計算每個區域的平均顏色。然後,使用

如何使用源地圖調試縮小JavaScript代碼?如何使用源地圖調試縮小JavaScript代碼?Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖,設置斷點以及使用Chrome DevTools和WebPack之類的工具。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

記事本++7.3.1

記事本++7.3.1

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

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。