JavaScript中的基本數據類型，地基同樣重要（系列九）

JavaScript中的基本數據類型

在上一篇JavaScript中的參數傳遞一文中，我們瞭解到了值傳遞、引用傳遞、共享傳遞，三種傳遞的第一層區別就在於傳入參數的數據類型不同，所以這次，我們來講講Js中的數據類型。
本篇文章是根據《你不知道的Js》第一部分延伸擴展出來的。一個較基礎的問題，它很適合放在整個面試的前幾問，面試官會根據你的回答確定之後問題的走向，比如當你回答基本數據類型時少回答了一個String，那麼面試官很可能就會問你String都有哪些方法哦～

目錄：

• 一、類型
• 二、數據類型分類
• 三、常見問題
• 寫在最後

一、類型

可能許多習慣了C++、C#這類靜態語言（強類型）語言的小夥伴們在編寫Js代碼時，會很不習慣，因爲相對於靜態語言來說，Js甚至沒有類型的”概念“。

而且Js中吐槽較多的恰恰就包含類型轉換，在我們日常寫代碼時總是遇到或顯示或隱示的類型轉換，比如：

你要獲取數字123的個位十位百位，你會怎麼做？

• toSrting()後通過下標獲取？
• 取整取餘？

使用類型轉換形式多樣。有些方式簡明易懂，也很安全，然而稍不留神，就會出現意想不到的結果。

爲了學習和掌握類型轉換，現在先讓我們來深入瞭解一下值和類型。

內置類型

JavaScript 擁有動態類型，這意味着相同的變量可用作不同的類型：類型是值的內部特徵，它定義了值的行爲，以使其區別於其他值。

JavaScript中的內置類型:

• null
• undefined
• 布爾值（boolean）
• 數字（number）
• 字符串（string）
• 對象（Object）
• symbol（ES6新增）

對於null和undefined大家一定不陌生，我們會在第三節簡單的分析他們之前的區別。

二、數據類型分類

除了對象，其他幾個都是基本類型，這是因爲聲明變量時不同的內存分配而決定的：

2.1 基本類型

JavaScript 中共有 6 種基本數據類型：Undefined、Null、Boolean、Number、String、Symbol。

基本類型存儲在棧（stack）中，也就是說：

• 它們的值直接存儲在變量訪問的位置。
• 這些原始類型佔據的空間是固定的，所以可將他們存儲在較小的內存區域 – 棧中。
• 這樣存儲便於迅速查尋變量的值。
• 基本類型的值是按值訪問的，且基本類型的值是不可變的。

var str = "123hello321";
str.toUpperCase();     // 123HELLO321
console.log(str);      // 123hello321

基本類型的比較是它們的值的比較：

var a = 1;
var b = true;
console.log(a == b);    // == 只進行值的比較
console.log(a === b);   // === 不僅進行值得比較，還要進行數據類型的比較

有關符號運算，優先級的問題，我覺得應該將它放在Js專題系列，單獨討論它們才能比較透徹，這裏就不過多解釋了。

來看下面的代碼，我們用圖示來分析它

var a,b
a = 100;
b = a;
a = '字符串';

2.2 引用類型

引用類型存儲在堆（heap）中的對象，也就是說:

• 存儲在變量處的值是一個指針（point），指向存儲對象的內存地址。
• 引用類型的值是按引用訪問的，且引用類型的值是可變的。
• 變量存儲的是可以打開保存數據的房間的鑰匙
• 存儲鑰匙地址的大小是固定的，所以把它存儲在棧中對變量性能無任何負面影響。

除過上面的 6 種基本數據類型外，剩下的就是引用類型了，統稱爲 Object 類型。細分的話，有：

• Object
• Array
• Date
• RegExp
• Function
• …

引用類型的比較是引用的比較：

var obj1 = {};    // 新建一個空對象 obj1
var obj2 = {};    // 新建一個空對象 obj2
console.log(obj1 == obj2);    // false
console.log(obj1 === obj2);   // false

因爲 obj1 和 obj2 分別引用的是存放在堆內存中的2個不同的對象，故變量 obj1 和 obj2 的值（引用地址）也是不一樣的！

來看下面的代碼，我們用圖示來分析它

var a = { name: '餘光' };
var b;
b = a;
a.name = "yuguang";
b.age = 23;
var c = {
  name: '餘光',
  age: 23
};

2.3 小結

基本類型

• 棧內存中包括了變量的標識符和變量的值

引用類型

• 棧內存中保存了變量標識符和指向堆內存中該對象的指針
• 堆內存中保存了對象的內容

三、常見問題

3.1 JavaScript中的變量是沒有類型的

來看下面的例子：

var a = 100; // 嚴格地說 變量a沒有類型，它所保存的 100是數字類型的
typeof a === 'number'; // 其實檢測是=>typeof 100

a = 'string'
typeof a === 'string'; // true

變量a可以隨時持有任何類型的值。換個角度來理解就是，JavaScript不做“類型強制”；也就是說，語言引擎不要求變量總是持有與其初始值同類型的值。

3.2 typeof檢測不總是對的

需要注意的點：

number

// 基本數學API和屬性
typeof Math.LN2 === 'number'; // true  Math的屬性
typeof Infinity === 'number'; // true 無窮
typeof NaN === 'number'; // true 特殊的數字類型，not a number
// 被強轉稱數字的其他數據類型
typeof Number('str') === 'number'; // Number('str') => NaN => number

string

typeof (typeof 1) === 'string'; // typeof always returns a string
typeof String(1) === 'string'; // 強轉成字符串

布爾值

typeof Boolean(1) === 'boolean'; // 強制類型轉換
typeof !!(1) === 'boolean'; // two calls of the ! (logical NOT) operator are equivalent to Boolean()

Symble

typeof Symbol() === 'symbol'
typeof Symbol('foo') === 'symbol'

undefined

一個沒有被賦值的變量的數據類型是undefined(如果方法或者是語句中操作的變量沒有被賦值，則會返回undefined) —— MDN

typeof undefined === 'undefined';

object

typeof { name: '餘光' } === 'object';

null

值得我們注意恰恰是這個null,typeof 對它的處理返回的是object

typeof null === 'object'; // true

function

typeof檢測函數返回的也是object，這是因爲從規範上看function實際上是object的一個子類型。

// Functions
typeof function() {} === 'function';
typeof class C {} === 'function';

那麼你還知道其他檢測數據類型的方式嗎？

3.3 null和undefined

• null：特指對象的值未設置。它是 JavaScript 基本類型 之一。
  • 它不是全局對象的一個屬性;
  • 在 API 中，null 常在返回類型應是一個對象，但沒有關聯的值的地方使用。
• undefined：表示聲明但未被賦值的變量類型
  • 你可以使用undefined和嚴格相等或不相等操作符來決定一個變量是否擁有值。

他們的區別：

當檢測 null 或 undefined 時，注意相等 ==與===兩個操作符的區別 ，前者會執行類型轉換：

• typeof檢測時兩者的返回值不同
• 代表的含義不同

typeof null        // "object" (因爲一些以前的原因而不是'null')
typeof undefined   // "undefined"
null === undefined // false
null  == undefined // true
null === null // true
null == null // true
!null //true
isNaN(1 + null) // false
isNaN(1 + undefined) // true

寫在最後

目前，前端內功系列已經是第九篇了，虛心接受大家的批評和指正，如果能對您有幫助，希望您關注、收藏、點贊一波哦～

JavaScript內功系列：

1. this、call、apply詳解，系列（一）
2. 從原型到原型鏈，系列（二）
3. 從作用域到作用域鏈，系列（三）
4. JavaScript中的執行上下文（四）
5. JavaScript中的變量對象（五)
6. JavaScript之自執行函數表達式（六）
7. JavaScript中的閉包，給自己一場重生（七）
8. 參數傳遞(求值策略)（八）
9. 本文
10. 你真的瞭解Js嗎？（上）

關於我

• 花名：餘光
• WX：j565017805
• 沉迷JS，水平有限，虛心學習中

其他沉澱

• JavaScript版LeetCode題解
• 前端進階筆記
• CSDN

如果您看到了最後，不妨收藏、點贊、評論一下吧！！！
持續更新，您的三連就是我最大的動力，虛心接受大佬們的批評和指點，共勉！