萌新HTML5 入門(mén)指南（二）

本文由葡萄城技術(shù)團(tuán)隊(duì)原創(chuàng)并首發(fā)

上一篇我們已經(jīng)為大家介紹了HTML5新增的內(nèi)容和基礎(chǔ)頁(yè)面布局，這篇會(huì)繼續(xù)向大家介紹廣義上HTML5中另一個(gè)組成部分：JavaScript數(shù)據(jù)類(lèi)型。

JavaScript作為一種弱類(lèi)型語(yǔ)言，最大的特點(diǎn)就是動(dòng)態(tài)類(lèi)型。也就是說(shuō)不用提前聲明變量的類(lèi)型，在程序運(yùn)行時(shí)，類(lèi)型會(huì)被動(dòng)態(tài)的確定，并且在執(zhí)行過(guò)程中可以動(dòng)態(tài)的修改變量的類(lèi)型。同時(shí)不同類(lèi)型變量在運(yùn)算時(shí)會(huì)自動(dòng)進(jìn)行隱式的類(lèi)型轉(zhuǎn)換。以下是一些常見(jiàn)的隱式轉(zhuǎn)換示例：

var foo = 2020;     // typeof foo -> "number"
var foo = "SpreadJS"     // typeof foo -> "string"
var foo = true + 1;         // foo = 2 typeof foo -> " number"
var foo = true + false;      // foo = 1 typeof foo -> " number"
var foo = '5' - '2';          // foo = 3 typeof foo -> " number"
var foo = 20 + 20 + "SpreadJS" // foo = "40SpreadJS" typeof foo -> "string"
var foo = "SpreadJS" + 20 + 20 // foo = "40SpreadJS" typeof foo -> " string"

依據(jù)最新的 ECMAScript 標(biāo)準(zhǔn)將數(shù)據(jù)類(lèi)型定義了 8 種：

其中為原始類(lèi)型：Boolean、Null、Undefined、Number、BigInt、String、Symbol 和對(duì)象類(lèi)型：object

關(guān)于原始類(lèi)型需要知道的幾個(gè)知識(shí)點(diǎn)：

• 原始類(lèi)型的值是按值訪(fǎng)問(wèn)的 

即在賦值和修改值時(shí)是通過(guò)值傳遞的方式來(lái)完成的，對(duì)變量賦值或者修改值會(huì)在內(nèi)存中重新分配空間。

例如：

var a, b, x, y;
a = " SpreadJS";
b = " GrapeCity";
x = a;
y = b;
console.log(a, b, x, y);   // result:  SpreadJS GrapeCity SpreadJS GrapeCity

a和x， b和y之間賦值是完全獨(dú)立的拷貝，互不干涉，如果我們將其中任何一個(gè)變量的值重新改變，其他相同值的變量也不會(huì)受到任何影響。

• 嚴(yán)格相等===和非嚴(yán)格相等==
  

對(duì)于原始類(lèi)型，==只進(jìn)行值比較，如果是不同類(lèi)型則會(huì)在轉(zhuǎn)換后再比較，===則會(huì)比較數(shù)據(jù)類(lèi)型。

例如：

undefined === null //fasle
undefined == null //true
true === 1 //fasle
true == 1 //true
null == 0 //false

• Null 和 Undefined
  

null和undefined在使用中幾乎沒(méi)有區(qū)別，在使用非嚴(yán)格相等比較時(shí)結(jié)果也為true，它們的區(qū)別就是在于進(jìn)行數(shù)值轉(zhuǎn)換時(shí)它們的字面意義不同，undefined代表未定義，轉(zhuǎn)為數(shù)值為NaN，而null為空、轉(zhuǎn)為數(shù)值時(shí)為0。

例如：

Number(undefined)    //NaN
Number(null)    //0
1 + undefined   //NaN
1 + null    //1

雖然兩者差別不大，并不會(huì)嚴(yán)格按照上面的區(qū)分去使用，但在實(shí)際項(xiàng)目應(yīng)用中，對(duì)于空值的判斷兩者則都需要考慮。

• NaN
  

NaN 即 Not a Number ，表示了非數(shù)字類(lèi)型，任何和NaN的操作返回值都是NaN，NaN不等于NaN。其中有一個(gè)全局方法 isNaN()，它的作用是檢查一個(gè)值是否能被 Number() 成功轉(zhuǎn)換。 如果能轉(zhuǎn)換成功，就返回 false，否則返回 true 。

例如：

NaN == NaN;     // fasle
isNaN('123')   // false 能轉(zhuǎn)換
isNaN('abc')    // true 不能轉(zhuǎn)換

• 浮點(diǎn)數(shù)精度誤差
  

在JavaScript中，整數(shù)和浮點(diǎn)數(shù)都屬Number數(shù)據(jù)類(lèi)型，所有數(shù)字都是以64位浮點(diǎn)數(shù)形式存儲(chǔ)的，也就是說(shuō)JavaScript底層沒(méi)有整數(shù)，1和1.0是相同的。

下面舉幾個(gè)例子來(lái)說(shuō)明：

// 加法
0.1 + 0.2 = 0.30000000000000004
0.1 + 0.7 = 0.7999999999999999
0.2 + 0.4 = 0.6000000000000001
 
// 減法
0.3 - 0.2 = 0.09999999999999998
1.5 - 1.2 = 0.30000000000000004
 
// 乘法
0.8 * 3 = 2.4000000000000004
19.9 * 100 = 1989.9999999999998
 
// 除法
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999
 
// 比較
0.1 + 0.2 === 0.3 // false
(0.3 - 0.2) === (0.2 - 0.1) // false

類(lèi)似這樣看起來(lái)不會(huì)算錯(cuò)的問(wèn)題，在某些系統(tǒng)尤其是涉及財(cái)務(wù)的系統(tǒng)中會(huì)是一個(gè)嚴(yán)重的問(wèn)題，這里就不展開(kāi)解釋發(fā)生誤差的原因了，大家可自行研究，我們這只對(duì)解決方案簡(jiǎn)單的列一下，1. 可以通過(guò)引用類(lèi)似Math.js、decimal.js、big.js這樣的類(lèi)庫(kù)。2.對(duì)于對(duì)數(shù)字精度要求不高的系統(tǒng)，可以格式化并保留x位小數(shù)來(lái)處理。3. 計(jì)算時(shí)，將小數(shù)部分和整數(shù)部分分開(kāi)計(jì)算再合并，等。

關(guān)于引用類(lèi)型需要知道的幾個(gè)知識(shí)點(diǎn)：

• 引用類(lèi)型的值是按引用訪(fǎng)問(wèn)的
  

在操作對(duì)象時(shí)，實(shí)際上是在操作對(duì)象的引用而不是實(shí)際的對(duì)象。給變量賦值改變的是對(duì)象的引用關(guān)系。

例如：

var obj1 = {a:1};
var obj2 = obj1;
obj1.a = 2;
console.log(obj2.a) // result: 2.obj1和obj2為同一對(duì)象
obj1 = {a:3};
console.log(obj2.a) // result: 2.obj1指向新對(duì)象，obj2不變

• 引用類(lèi)型===和==意義相同都為引用的比較
  

即是否為同一對(duì)象，各類(lèi)型之間的非嚴(yán)格相等==比較類(lèi)型轉(zhuǎn)換可參考下表