玩轉JavaScript OOP[0]——基礎類型

来源:http://www.cnblogs.com/keepfool/archive/2016/06/04/5559886.html
-Advertisement-
Play Games

前言 long long ago,大家普遍地認為JavaScript就是做一些網頁特效的、處理一些事件的。我身邊有一些老頑固的.NET程式員仍然停留在這種認知上,他們覺得沒有後端開發肯定是構建不了系統的。 編程語言和技術的結合使用,就像一個男人娶了好幾個妞一樣。在舊的時代,.NET是大房,JavaS... ...


前言

long long ago,大家普遍地認為JavaScript就是做一些網頁特效的、處理一些事件的。
我身邊有一些老頑固的.NET程式員仍然停留在這種認知上,他們覺得沒有後端開發肯定是構建不了系統的。

編程語言和技術的結合使用,就像一個男人娶了好幾個妞一樣。
在舊的時代,.NET是大房,JavaScript是偏房。
大房是“後宮之主”,不僅要操持家業,還能給你生娃,娃將來也要繼承家業的。
偏房就沒那麼幸運了,在“後宮”沒什麼地位,雖然衣食無憂,但不能管理家族事務,生的娃也只能算是庶出,沒有繼承家業的權利。

But,時代變遷了,家族事業越做越大,家族也在各地開枝散葉,男人也變成了眾人口中的“老爺“。
事業這麼穩定,老爺太無聊了,好色又是人的本能,老爺要找點“性趣”來滿足自己了。
大房為家族勞心勞力,歲月在她的臉上留下了很多痕跡,老爺已經逐漸失去了對她的興趣;
偏房悠閑度日,家族事務又不用她操心,日常事務就是打扮自己、維持自己的青春光彩。
老爺這雙好色的眸子又盯上了偏房,於是偏房終於上位了,上位當然是地位的提升,不僅能夠插手家族的事業,還能讓自己的娃也管理一部分生意。
(PS:這個例子有不恰當的地方,JavaScript出現的比.NET早)

隨著互聯網的普及和迅速發展,JavaScript能做的事兒越來越多。
它能做什麼呢?

  • 它能做網頁富客戶端應用,結合HTML5和CSS3它可以實現複雜的前端交互
  • 它能做服務端應用,比如當前非常流行的Node.js框架
  • 它可以做移動端應用,比如你可以通過PhoneGap或Titianium製作IOS和Android平臺的app

JavaScript還能做其他很多事兒,JavaScript近乎無處不在。
現在我們可以這麼說,無論是PC、智能手機,還是智能電視,凡是提供了JavaScript運行環境的設備,都可以用JavaScript來做一些事情。

類型概述

標題揭示了這又是一個系列文章,是關於JavaScript面向對象編程的。
在正式開始JavaScript面向對象編程前,我們需要先對JavaScript的類型有一個全面的瞭解。

很多.NET程式員能夠理解C#中的數據類型,但不能完全理解JavaScript的數據類型。
JavaScript是一門弱類型的語言,它的類型雖然不如C#中那麼繁多,但它勝在靈活。

例如:在C#中,1就是int類型的,true就是bool類型的,1和true是不能直接比較的。
在JavaScript中,數字不僅僅是數字,有時還能作為條件判斷的邏輯表達式。

var count = 1;
if(count){
    console.log("Hello!");
}

在C#中,編譯器是不允許你這麼做的,下麵的代碼根本就編譯不通過。

var count = 1;
if (count)
{
    Console.WriteLine("Hello!");
}

image

正式因為這樣的靈活性,使得一些.NET的程式員在編寫JavaScript代碼時產生了很多困惑。
今天我們就帶著這個困惑開始這個系列之旅。

JavaScript數據類型簡介

在JavaScript中類型可以分為兩大類:

  • 基礎類型:Number、String、Boolean、Undefined和Null。
  • 複雜類型:只有Object一種。

(最新的ECMAScript 6追加了一個新的基礎類型Symbol)

1. Number: 數字類型,它包括整數、浮點數,例如:666, 3.14。
2. String: 表示文本數據的類型,例如:"Hello", "JavaScript"。
3. Boolean: 表示一個邏輯實體,它只有兩個值true和false。
4. Undefined: 表示變數未定義或未賦值,它有一個唯一的值undefined。
5. Null: 它表示空、無值,它也只有一個唯一的值null。
6. Object: 它表示JavaScript中的對象,例如由new Array()或new Object創建的對象。

基礎類型和複雜類型的區別

  • 基礎類型的變數直接保存值,例如數字100,字元串"Hello"。
  • 複雜類型的變數並不直接保存對象,而是一個指向記憶體中實際對象的指針。

 

基礎類型

Number類型

.NET FCL的數字類型有多種,包括Int16、Int32、Int64、Float、Double和Decimal。
Int16、Int32、Int64還分別包含有符號和無符號版本。

Int16 shortValue = 73;
Int32 intValue = 666;
Int64 longValue = 2147483648;
Single floatValue = 3.14f;
Double doubleValue = 999.99;
Decimal decimalValue = 86400.35627m;

在JavaScript中則只有一種數字類型,即Number類型,它包括整數和浮點數。
JavaScript的數字類型還有3個特殊的表示:

  • Inifiity:正的無窮大
  • -Inifity:負的無窮大
  • NaN:非數字(Not a number)

下麵這段JS代碼定義了5個變數,分別表示這5種情況,使用typeof查看變數的類型:

var intValue = 123;
var floatValue = 3.14;
var nanValue = NaN;
var positiveInfinityValue = Infinity;
var negativeInfinityValue = -Infinity;

image

typeof操作用於獲取變數的類型,它符返回一個字元串

String類型

.NET的FCL有兩種字元類型,分別是Char和String。
Char用於表示一個16位的Unicode字元,String則用於表示一個字元數組。
Char類型須用一對單引號包圍字元,String類型需用一對雙引號包圍字元。

// Char字元
var ch = 'g';
// String字元串
var str1 = "Hello";
// 包含雙引號的字元串(使用轉義字元)
var str2 = "He said: \" It is a good job!\"";

JavaScript只有一種字元類型,即String類型。
和.NET不同的是,JavaScript的String類型用單引號和雙引號包圍字元都可以,這一定程度上提供了便利性。

// 1個字元的字元串
var ch = 'g';
// 字元串
var str1 = 'Hello World';
// 帶雙引號的字元串(使用轉義字元)
var str2 = "He said: \" It is a good job!\"";
// 使用單引號表示字元串,雙引號不用轉義
var str3 = 'He said: "It is a good job!"';

用typeof查看變數的類型:

image

Boolean類型

和.NET一樣,Boolean類型是表示邏輯實體,它只有true和false兩個值。

var flag = true;
var deleted = false;

用typeof查看變數類型:

image

Null類型

.NET也有null值,表示一個空指針的對象,null值用於引用類型。

由於C#是強類型語言,所以無法通過var關鍵字直接將null值賦給一個變數,因為編譯器無法推斷它的隱式類型。

image

在JavaScript中,null值是Null類型的唯一值,概念上和.NET是一致的。

var foo = null;

使用typeof查看變數的類型

image

為什麼typeof null"object"呢?

實際上typeof null為"object"時ECMAScript的一個bug, 從JavaScript一開始出現時就是這樣的,typeof null本來應該是"null"。

Undefined類型

.NET沒有Undefined類型,Undefined是JavaScript特有的類型,表示未賦值的變數,或未定義的變數。

// 定義變數,未賦值
var undefinedValue1;
// 定義變數賦值為undefined
var undefinedValue2 = undefined;

如果你定義了變數卻沒有賦值,JavaScript引擎會自動地幫你將變數初始化為undefined值。

在Chrome控制台查看變數undefinedValue1,它的值是undefined。
用typeof查看變數的類型:

image

判斷變數是否有值

如果變數已經定義了,但不知道變數是否有值,可以通過=== undefined來判斷

var unassigndVar;
if(unassigndVar === undefined){
	// 邏輯處理
}else{
	// 邏輯處理
}

判斷變數是否存在

如下變數undeclaredVar未定義,則不能用 === undefined來判斷,否則瀏覽器會提示一個錯誤:
Uncaught ReferenceError: undeclaredVar is not defined

image

這時需要通過typeof來判斷變數是否存在

if (typeof undeclaredVar === 'undefined') {
	console.log('變數undeclaredVar未定義!');
} else {
	console.log('Hello!');
}

image

小技巧:判斷變數是否有值或判斷變數是否存在,都可以通過if (typeof (variable) !== "undefined")這種方式。

==和===操作符

在介紹Undefined類型時,我們使用了===,它是“相等”操作符。
在JavaScript中,有兩種“相等”操作符,分別是==和===。

  • ==操作符:用於比較兩個變數的值,它會忽視變數的類型。即使兩個變數的類型不一致,JavaScript引擎會先將兩個變數轉換成相同的類型。只要值相同,==操作符就會返回true。
  • ===操作符:不僅比較兩個變數的值,它還比較兩個變數的類型,只有類型和值都相同時才返回true。

我們在控制臺中分別用這兩個操作符比較數字1和字元串"1",JavaScript認為1和"1"值是相等的,但類型是不相等的。

image

有“相等”就會有“不等”,JavaScript也提供了兩種“不等”比較符,!=是寬鬆比較符號,!==是嚴格比較符。

註意:NaN是一個特殊的存在,它和任何值都是不相等的,即使是它本身。

NaN == NaN; // false

image

PS:在這篇文章中我沒有介紹其他比較符,比如>=、<=、&&、||等,因為它們和C#中相應的操作符的表現是一致的。

undefined和null的比較

undefined和null是兩個有意思的值,undefined表示”無“或”不存在“,null表示”空“。
從字面解釋來看,它們多少有些相近的意思,二者也經常拿來作比較。

區別1:值相等類型不相等

先看一段代碼:

var x;
var y = null;

console.log(x == y);

變數x和y是不同類型的,在Chrome控制臺中輸出的結果卻為true,是不是有點驚訝?

image

我們可以這麼認為:null和undefined雖然類型不同,但持有相同的值。

在Chrome的控制臺中輸入以下兩行代碼:

null == undefined;
null === undefined;

得到的結果如下:

image

區別2:和數字的運算

既然null和undefined的值是相同的,那麼它們在運算上有什麼區別呢?

說到運算,最常見的當然是數字的加減乘除預算,在Chrome控制臺中輸入以下兩行代碼:

1 + null;
1 + undefined;

1 + null得到的是1,1 + undefined得到的是NaN。
image

在JavaScript中,undefined和null參與運算時,有兩個約定:

  • 運算表達式中包含undefined的,最終的結果都是NaN。
  • 運算表達式中包含null的,在運行時被當作0。

這能意味著null和0的值是相等的嗎?不,null和0仍然是不相等的。

image

null和數字的加減乘除運算

image

註意:5 / null的結果為Infinity,Infinity表示正的無窮大, 5 / 0的結果也是Infinity。

undefined和數字的加減乘除運算

image

undefined和null比較總結

  1. undefined和null持有相同的值,undefined == null返回true
  2. undefined和null的類型不同,undefined === null返回false
  3. undefined和數字進行加減乘除運算,結果始終為NaN
  4. null和數字進行加減乘除運算,null會被當作0來運算

Number、Boolean和String的比較

前面已經比較了null和undefined這兩個特殊的存在,既然==操作符能比較值,那麼Number、Boolean和String的值,放在一起比較時會有什麼表現呢?

Number和Boolean的比較

image

結論:用==操作符比較Number和Boolean類型時,只有數字1才和true相等。

Number和String的比較

image

有意思的是,65 == "0065"和3.14 == "3.14000"的結果是真。

結論:比較Number和String類型時,總是會將字元串先轉換成相應的數字,然後再做比較,只要數值相同結果就為true。

Boolean和String的比較

image

"0001" == true、"1.0000" == true和"0" == false的結果為真。

結論:比較Boolean和String類型,如果字元串不能轉換為數字類型的,則結果為false。如果能夠轉換為數字類型,總是先將字元串先轉換成相應的數字,然後再比較,只有1才和true相等。

基礎類型總結

到此我們已經介紹完了JavaScript的基礎類型,我們用一段代碼和三幅圖來總結本篇的內容

var intValue = 666;
var floatValue = 3.14;
var strValue = "Hello";
var boolValue = true;
var nullValue = null;
var unassignedValue;

變數類型

image

undefined和null的比較

image

Number、String和Boolean的==比較

image

null和undefined分別用於四則運算

image

引用和參考

1. 《Object-Oriented JavaScript 2nd Edition》

2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

【關註】keepfool
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 轉自:http://www.gowhich.com/blog/147?utm_source=tuicool&utm_medium=referral 源碼下載的地址:https://github.com/fxsjy/jieba 演示地址:http://jiebademo.ap01.aws.af.cm/ ...
  • web許可權設計,做許可權目前有三種主流實現方式 第一種:手動實現 配置2個攔截器,一個是攔截是否登陸,一個是攔截url的許可權,通過角色許可權表的配置,把許可權url的路徑與訪問資源的url進行匹配 第二種:spring-security實現,比較重,不推薦 第三章:shiro,目前spring已經捨棄自己 ...
  • 緩存是分散式系統中的重要組件,主要解決高併發,大數據場景下,熱點數據訪問的性能問題。提供高性能的數據快速訪問。 本文是緩存在分散式應用第二篇文章,介紹分散式緩存,Memcache,Redis,本地緩存(硬碟緩存,記憶體緩存)以及緩存在分散式系統中的架構示例。 ...
  • 緩存是分散式系統中的重要組件,主要解決高併發,大數據場景下,熱點數據訪問的性能問題。提供高性能的數據快速訪問。 本文是緩存在分散式應用第一篇文章,介紹緩存的原理,緩存的分類,緩存的設計,CDN緩存(原理,架構參考和技術實踐),反向代理緩存(原理,Squid架構實踐和常用代理緩存之間的比較)。 ...
  • Atitit.用戶許可權服務 登錄退出功能 參數說明 /com.attilax/user/loginOut.jsp?url="+url Utype=mer 作者:: ★(attilax)>>> 綽號:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉 ...
  • 一開始可能會寫得很亂,因為自己也不太清楚從哪裡入手,可能會直接將一些別人的心得羅列出來,後面我會在吸收了以後,找到了頭緒,然後整理歸納出自己的東西。 不多扯了,先摘一段別人的心得,原文鏈接http://www.cnblogs.com/Azula/p/4988949.html 一 . AbpBoots ...
  • 方法: 1、安裝tomcat1,過程為解壓縮。 2、拷貝壓縮後的文件,命名為tomcat2。 修改tomcat2中配置文件,tomcat1保持不變 server.xml, <Server port="8006" shutdown="SHUTDOWN"> 埠改為8006,tomcat1為8005 < ...
  • Pool對象的技術指標: 避免頻繁創建經常使用的稀有資源,提高工作效率. 控制閥值,很多情況下一些關鍵資源都有一個最佳併發數,超過這個拐點性能有可能急劇下降,也有可能繼續增大併發數性能不能提升. 安全的獲取對象和釋放對象(使用之後放回連接池) T對象實現時最好與Pool對象建立某種關聯,調用T對象實 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...