JS 中的數據類型

簡介

JavaScript 語言的每個值，都屬於某一種數據類型。JavaScript 的數據類型，共有七種

• 數值（number）：整數和小數，好比1和3.14
• 字符串（string）：文本
• 布爾值（boolean）：表示真僞的兩個特殊值，即true（真）和false（假）
• undefined：表示「未定義」或不存在，即因爲目前沒有定義，因此此處暫時沒有任何值
• null：表示空值
• 對象(object)：各類值組成的集合
• Symbol：ES6新增，表示獨一無二的值，Symbol 用來生成一個全局惟一的值。

一般，數值、字符串、布爾值、Symbol 這四種類型，合稱爲原始類型（primitive type）的值，即它們是最基本的數據類型，不能再細分了。對象則稱爲合成類型（complex type）的值，由於一個對象每每是多個原始類型的值的合成，能夠看做是一個存放各類值的容器。至於undefined和null，通常將它們當作兩個特殊值。

數值(number)

JavaScript 內部，全部數字都是以64位浮點數形式儲存，即便整數也是如此。因此，1與1.0是相同的，是同一個數。

1 === 1.0 //true

因爲浮點數不是精確的值，因此涉及小數的比較和運算要特別當心

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)
// false

數值的範圍

JavaScript 可以表示的數值範圍爲21024到2-1023（開區間），超出這個範圍的數沒法表示。

若是一個數大於等於2的1024次方，那麼就會發生「正向溢出」，即 JavaScript 沒法表示這麼大的數，這時就會返回Infinity

JavaScript 提供Number對象的MAX_VALUE和MIN_VALUE屬性，返回能夠表示的具體的最大值和最小值。

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

數值的表示方法

JavaScript 的數值有多種表示方法，可使用字面形式（十進制，二進制，十六進制，八進制）和科學計數法表示。

如下兩種狀況，JavaScript 會自動將數值轉爲科學計數法表示，其餘狀況都採用字面形式直接表示

• 小數點前的數字多於 21 位

  1234567890123456789012
  // 1.2345678901234568e+21
  
  123456789012345678901
  // 123456789012345680000

• 小數點後面的零多餘 5 個

  // 小數點後緊跟5個以上的零，
  // 就自動轉爲科學計數法
  0.0000003 // 3e-7
  
  // 不然，就保持原來的字面形式
  0.000003 // 0.000003

字面形式：

• 十進制：沒有前導 0 的數值
• 八進制：有前綴0o或0O的數值，或者有前導0、且只用到0-7的八個阿拉伯數字的數值。
• 十六進制：有前綴0x或0X的數值。
• 二進制：有前綴0b或0B的數值。

默認狀況下，JavaScript 內部會自動將八進制、十六進制、二進制轉爲十進制。下面是一些例子

0xff // 255
0o377 // 255
0b11 // 3

若是八進制、十六進制、二進制的數值裏面，出現不屬於該進制的數字，就會報錯。

0xzz // 報錯
0o88 // 報錯
0b22 // 報錯

前導0表示八進制，處理時很容易形成混亂。ES5 的嚴格模式和 ES6，已經廢除了這種表示法，可是瀏覽器爲了兼容之前的代碼，目前還繼續支持這種表示法

NaN

• NaN是 JavaScript 的特殊值，表示「非數字」（Not a Number），主要出如今將字符串解析成數字出錯的場合。

• NaN不等於任何值，包括它自己。

• NaN與任何數（包括它本身）的運算，獲得的都是NaN。

• 數組的indexOf方法內部使用的是嚴格相等運算符，因此該方法對NaN不成立。

字符串（string）

字符串就是零個或多個排在一塊兒的字符，放在單引號或雙引號之中。

單引號字符串的內部，可使用雙引號。雙引號字符串的內部，可使用單引號。

'key = "value"'
"It's a long journey"

若是要在單引號字符串的內部，使用單引號，就必須在內部的單引號前面加上反斜槓，用來轉義。雙引號字符串內部使用雙引號，也是如此。

'在單引號中顯示單引號 \'Hello\''
// "在單引號中使用單引號 'Hello'"

"在雙引號中顯示雙引號 \"Hello\""
//在雙引號中顯示雙引號 \"Hello\"

如何將字符串分紅多行

• 在每一行的尾部使用反斜槓

  var longString = 'Long \
  long \
  long \
  string';
  
  longString
  // "Long long long string"

• 使用運算符 + 鏈接

  var longString = 'Long '
    + 'long '
    + 'long '
    + 'string';

• 使用 ES6 提供的字符串模板，全部的空格和縮進都會被保留在輸出之中

  var longString=`1111
  2222
  3333`
  
  // 輸出
  1111
  2222
  3333

轉義

反斜槓（）在字符串內有特殊含義，用來表示一些特殊字符，因此又稱爲轉義符。

須要用反斜槓轉義的特殊字符，主要有下面這些。

• \0 ：null（\u0000）
• \b ：後退鍵（\u0008）
• \f ：換頁符（\u000C）
• \n ：換行符（\u000A）
• \r ：回車鍵（\u000D）
• \t ：製表符（\u0009）
• \v ：垂直製表符（\u000B）
• \' ：單引號（\u0027）
• \" ：雙引號（\u0022）
• \\ ：反斜槓（\u005C）

字符串數組

字符串能夠被視爲字符數組，所以可使用數組的方括號運算符，用來返回某個位置的字符（位置編號從0開始）。

var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"

// 直接對字符串使用方括號運算符
'hello'[1] // "e"

若是方括號中的數字超過字符串的長度，或者方括號中根本不是數字，則返回undefined。

'abc'[3] // undefined
'abc'[-1] // undefined
'abc'['x'] // undefined

可是，字符串與數組的類似性僅此而已。實際上，沒法改變字符串之中的單個字符。

var s = 'hello';

delete s[0];
s // "hello"

s[1] = 'a';
s // "hello"

s[5] = '!';
s // "hello"

length 屬性

length屬性返回字符串的長度，該屬性也是沒法改變的。

Base64 轉碼

Base64 就是一種編碼方法，能夠將任意值轉成 0～九、A～Z、a-z、+和/這64個字符組成的可打印字符。使用它的主要目的，不是爲了加密，而是爲了避免出現特殊字符，簡化程序的處理。

JavaScript 原生提供兩個 Base64 相關的方法。

• btoa()：任意值轉爲 Base64 編碼
• atob()：Base64 編碼轉爲原來的值

var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

注意，這兩個方法不適合非 ASCII 碼的字符，會報錯。

btoa('你好') // 報錯

要將非 ASCII 碼字符轉爲 Base64 編碼，必須中間插入一個轉碼環節，再使用這兩個方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

布爾（Boolean）

布爾值表明「真」和「假」兩個狀態。「真」用關鍵字true表示，「假」用關鍵字false表示。布爾值只有這兩個值。

下列運算符會返回布爾值：

• 前置邏輯運算符： ! (Not)
• 相等運算符：===，!==，==，!=
• 比較運算符：>，>=，<，<=

轉換規則是除了下面六個值被轉爲false，其餘值都視爲true。

• undefined

• null

• false

• 0

• NaN

• ""或''（空字符串）

注意，空數組（[]）和空對象（{}）對應的布爾值，都是true。

null 和 undefined

null與undefined均可以表示「沒有」，含義很是類似。

null是一個表示「空」的對象，轉爲數值時爲0；undefined是一個表示"此處無定義"的原始值，轉爲數值時爲NaN。

1. （規範）若是一個變量沒有被賦值，那麼這個變量的值就是 undefiend
2. （習俗）若是你想表示一個還沒賦值的對象，就用 null。若是你想表示一個還沒賦值的字符串/數字/布爾/symbol，就用 undefined（可是實際上你直接 var xxx 一下就好了，不用寫 var xxx = undefined）

對象（object）

簡單說，對象就是一組「鍵值對」（key-value）的集合，是一種無序的複合數據集合。鍵名與鍵值之間用冒號分隔，兩個鍵值對之間用逗號分隔。

對象的全部鍵名都是字符串（ES6 又引入了 Symbol 值也能夠做爲鍵名），因此加不加引號均可以。

若是鍵名是數值，會被自動轉爲字符串。

若是鍵名不符合標識名的條件（好比第一個字符爲數字，或者含有空格或運算符），且也不是數字，則必須加上引號，不然會報錯。

// 報錯
var obj = {
    1p: 'Hello World'
};

// 不報錯
var obj = {
    '1p': 'Hello World',
    'h w': 'Hello World',
    'p+q': 'Hello World'
};

對象的每個鍵名又稱爲「屬性」（property），它的「鍵值」能夠是任何數據類型。若是一個屬性的值爲函數，一般把這個屬性稱爲「方法」，它能夠像函數那樣調用。

var obj = {
    p: function (x) {
        return 2 * x;
    }
};

obj.p(1) // 2

若是屬性的值仍是一個對象，就造成了鏈式引用。

var o1 = {};
var o2 = { bar: 'hello' };

o1.foo = o2;
o1.foo.bar // "hello"

讀取與賦值

讀取對象的屬性，有兩種方法，一種是使用點運算符，還有一種是使用方括號運算符.

點運算符和方括號運算符，不只能夠用來讀取值，還能夠用來賦值。

var obj = {
    p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"

// 方括號運算符內部還可使用表達式
obj['hello' + ' world']
obj[3 + 3]

// 數字鍵能夠不加引號，由於會自動轉成字符串。
var obj = {
  0.7: 'Hello World'
};

obj['0.7'] // "Hello World"
obj[0.7] // "Hello World"


obj['0.7'] = '賦值';

注意，數值鍵名不能使用點運算符（由於會被當成小數點），只能使用方括號運算符

查看屬性

查看一個對象自己的全部屬性，可使用Object.keys方法。

var obj = {
  key1: 1,
  key2: 2
};

// 查看對象自己全部的屬性
Object.keys(obj);   // ['key1', 'key2']

刪除屬性

delete命令用於刪除對象的屬性，刪除成功後返回true。

var obj = { p: 1 };
Object.keys(obj) // ["p"]

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []

上面代碼中，delete命令刪除對象obj的p屬性。刪除後，再讀取p屬性就會返回undefined，並且Object.keys方法的返回值也再也不包括該屬性。

注意，刪除一個不存在的屬性，delete不報錯，並且返回true。

遍歷屬性

使用 for...in循環來遍歷一個對象的所有屬性

var obj = {a: 1, b: 2, c: 3};

for (var i in obj) {
  console.log('鍵名='+i+', 鍵值='+obj[i])
}
// 鍵名=a, 鍵值=1
// 鍵名=b, 鍵值=2
// 鍵名=c, 鍵值=3

注意：

1. 它遍歷的是對象全部可遍歷（enumerable）的屬性，會跳過不可遍歷的屬性
2. 它不只遍歷對象自身的屬性，還遍歷繼承的屬性

若是繼承的屬性是可遍歷的，那麼就會被for...in循環遍歷到，這時應該結合使用hasOwnProperty方法，在循環內部判斷一下，某個屬性是否爲對象自身的屬性

var person = { name: '老張' };

for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}

屬性是否存在：in 運算符

in運算符用於檢查對象是否包含某個屬性（注意，檢查的是鍵名，不是鍵值），若是包含就返回true，不然返回false。它的左邊是一個字符串，表示屬性名，右邊是一個對象。

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

其它

typeof 操做符

xxx 的類型	string	number	boolean	symbol	undefined	null	object	function
typeof xxx	'string'	'number'	'boolean'	'symbol'	'undefined'	'object'	'object'	'function'

注意 function 並非一個類型。