2. JavaScript數據類型 · JavaScript精品面試題系列

[TOC] # 面試真題 ## 1\. 說說`js`中有哪些數據類型 ## 2\. js有哪些原始/值/基本，數據類型 ## 3\. 如何判斷空對象 ## 4\. BigInt解決了什么問題 ## 5\. 基本類型和引用類型的區別 ## 6\. null和undefined有什么區別 ## 7\. 如何準確區分所有數據類型 # 幫助理解 `JavaScript` 是一種弱類型說動態語言。這意味著你不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定。這也意味著你可以使用同一個變量保存不同類型的數據，因此`JavaScript`的數據類型相對而言比較少。 ~~~javascript m = 7; console.log(typeof m) // number m = "最編程"; console.log(typeof m) // string m = true; console.log(typeof m) // boolean ~~~ 從運行結果可以看出來`m`變量的數據類型是由它的值來決定的 ## 基本數據類型 ES5中有5種簡單數據類型（也稱為基本數據類型）：`undefined`、`Null`、`Boolean`、`Number`、`String` ES6中新增了：`symbol` ES10中新增了：`biginit` 所以最新的基本數據類型現在一共是7個 ### undefined `undefined`類型只有一個值，即特殊的`undefined`也就是它自身。在使用`var`聲明變量但未對其加以初始化時，這個變量的值就是`undefined` ~~~javascript var m; console.log(m === undefined) // true ~~~ ### Null `null`類型是第二個只有一個值的數據類型，這個特殊的值是`null`也就是它自身。從邏輯角度來看，`null` 值表示一個空對象指針，而這也正是使用`typeof`操作符檢測`null`值時會返回`object`的原因。 ~~~javascript var m = null; console.log(typeof m) // object ~~~ ### Boolean 布爾類型，該類型有兩個值：`true`和`false`。布爾值 `true` 代表“真”，`false` 代表“假”。下面6種值轉化為布爾值時為`false`，其他轉化都為`true` 1. `undefined`（未定義，找不到值時出現） ~~~javascript let m = undefined; if (m) console.log('最編程') // 不會執行，因為m的值為false ~~~ 2. `null`（代表空值） ~~~javascript let m = null; if (m) console.log('最編程') // 不會執行，因為m的值為false ~~~ 3. `false`（布爾值的`false`，字符串"`false`"布爾值為`true`） ~~~javascript let m = 'false'; if (m) console.log('最編程') // 最編程 ~~~ 4. `0`（數字0，字符串"0"布爾值為`true`） ~~~javascript let m = 0; if (m) console.log('最編程') // 不會執行，因為m的值為false // 字符串"0"布爾值為 true let m = '0'; if (m) console.log('最編程') // 最編程 ~~~ 5. `NaN`（無法計算結果時出現，表示"非數值"；但是`typeof NaN==="number"`） ~~~javascript let m = NaN; if (m) console.log('最編程') // 不會執行，因為m的值為false // NaN數據類型為number console.log(typeof NaN) // number ~~~ 6. `""`（雙引號）或`''`（單引號）（空字符串，中間有空格時也是`true`） ~~~javascript let m = ''; if (m) console.log('最編程') // 不會執行，因為m的值為false // 空字符串，中間有空格時也是true let m = ' '; if (m) console.log('最編程') // 最編程 ~~~ ### Number `JavaScript`中只有一種數字類型：基于 IEEE 754 格式來表示整數和浮點數值，所有數字在`JavaScript`中均用浮點數值表示，無法精確表示的非常大的整數將自動四舍五入。確切地說，`JS`中的`Number`類型只能安全地表示`2^53 = 9007199254740992之間的整數`（2的53次方- 1，9007199254740992-1，16位），任何超出此范圍的整數值都可能失去精度，所以在進行數字運算的時候要特別注意精度缺失問題。 ~~~javascript console.log(9999999999999999); // 10000000000000000 ~~~ 該整數大于`JS Number` 類型所能表示的最大整數，因此，它被四舍五入了。意外四舍五入會損害程序的可靠性和安全性 ### String 字符串類型用于表示文本數據，字符串可以是單引號也可以是雙引號，它們是完全相同的 ~~~javascript var m1 = '最編程' var m2 = "創未來" ~~~ ### symbol `ES6` 引入了一種新的原始（基本）數據類型 `Symbol` ，表示獨一無二的值，最大的用法是用來定義對象的唯一屬性名 ~~~javascript let sy = Symbol("key1"); // 寫法1 let syObject = {}; syObject[sy] = "mm"; console.log(syObject); // {Symbol(key1): "mm"} // 寫法2 let syObject = { [sy]: "mm" }; console.log(syObject); // {Symbol(key1): "mm"} ~~~ ### bigint `BigInt`類型是 `JavaScript`中的一個基礎的數值類型，可以用任意精度表示整數。使用 `BigInt`，您可以安全地存儲和操作大整數，甚至可以超過數字的安全整數限制。BigInt數據類型的目的是比Number數據類型支持的范圍更大的整數值，使用`BigInt`，整數溢出將不再是問題。此外，可以安全地使用更加準確時間戳，大整數`ID`等，而無需使用變通方法。`BigInt` 是通過在整數末尾附加`n` 或調用構造函數來創建的。 ~~~javascript // 創建BigInt的方法，第一種：只需在整數的末尾追加n即可 let m1 = 7n; // 第二種：BigInt()構造函數 let m2 = BigInt(7); // 這倆貨是相等的 console.log(m1 === m2); // true ~~~ 使用 `typeof` 測試時， `BigInt` 返回 `"bigint"` ： ~~~javascript let m1 = 7n; console.log(typeof m1) // bigint let m2 = BigInt(7); console.log(typeof m2) // bigint ~~~ 它在某些方面類似于`Number` ，但是也有幾個關鍵的不同點：不能用于 `Math `對象中的方法： ~~~javascript let m = 7n console.log(Math.round(m)) // Cannot convert a BigInt value to a number(無法將BigInt值轉換為數字) ~~~ 不能和任何 `Number `實例混合運算，兩者必須轉換成同一種類型 ~~~javascript let m = 7n let n = 7 console.log(m + n) // Cannot mix BigInt and other types, use explicit conversions(無法混合BigInt和其他類型，請使用顯式轉換 ~~~ 在兩種類型來回轉換時要小心，因為 `BigInt `變量在轉換成 `Number `變量時可能會丟失精度。 **bigint和number對比：** ~~~javascript // bigint數據類型 console.log(9007199254740995n) // 9007199254740995n // number數據類型（把后面的n去掉） console.log(9007199254740995) // 9007199254740996 ~~~ `BigInt` 和 `Number`不是嚴格相等的，但是寬松相等的 ~~~javascript let m = 7n let n = 7 console.log(m === n) // false console.log(m == n) // true ~~~ `Number `和 `BigInt `可以進行比較 ~~~javascript console.log(1n < 2) // true console.log(2n > 1) // true console.log(2 > 2) // false console.log( 2n > 2) // false console.log(2n >= 2) // true ~~~ 兩者也可以混在一個數組內并排序 ~~~javascript const arr = [3n, 4, 2, 1n, 0, -1n]; console.log(arr.sort()); // (6)[-1n, 0, 1n, 2, 3n, 4] ~~~ ## 引用數據類型 ### Object `Object`類型，我們也稱為一個對象。是`JavaScript`中的引用數據類型。它是一種復合值，它將很多值聚合到一起，可以通過名字訪問這些值 ~~~javascript // 創建對象 let obj = {} // 添加屬性 obj.age = 20 // 添加方法 obj.fn = function() { alert(obj.age) } // 調用對象內的方法 obj.fn() ~~~ 對象除了可以創建自有屬性，還可以通過從一個名為原型的對象那里繼承屬性。除了`String`、`Number`、`Boolean`、`null`和`undefined`之外，`JS`中的值都是對象在此類型下面還有子類型：`Array`、`Function`、`Date`、`RegExp` # 真題解答 ## 1\. 說一說`JS`中有哪些數據類型? 首先，我來介紹一下基本數據類型，在`ES5`中有`5`種基本數據類型，分別是：`undefined`、`Null`、`Boolean`、`Number`、`String`。在`ES6`中新增了：`symbol`表示獨一無二的值，通過 `Symbol`函數調用生成，由于生成的`symbol`值為原始類型，所以 `Symbol` 函數不能使用`new`調用。在`ES10`中新增了：`biginit`可以用任意精度表示整數。所以最新的基本數據類型現在一共是`7`個。其次，就是`object`，它是`JavaScript`中的引用數據類型。是一種復合值，它將很多值聚合到一起，可以通過名字訪問這些值，此類型下面還有子類型：`Array`、`Function`、`Date`、`RegExp`。 ## 2\. js有哪些原始/值/基本，數據類型在`ES5`中有`5`種基本數據類型，分別是：`undefined`、`Null`、`Boolean`、`Number`、`String`。在`ES6`中新增了：`symbol`表示獨一無二的值，通過 `Symbol` 函數調用生成，由于生成的 `symbol` 值為原始類型，所以 `Symbol` 函數不能使用 `new`調用。在`ES10`中新增了：`biginit`可以用任意精度表示整數。所以最新的基本數據類型現在一共是`7`個。 ## 3\. 如果判斷空對象第一種方法：使用`JSON.stringify()`轉為對象字符串判斷是否全等于`"{}"` ~~~javascript let obj = {}; console.log(JSON.stringify(obj) === '{}') // true ~~~ 第二種方法：因為`for in`只能枚舉對象自身的屬性，不能枚舉原型屬性，因此可以用來判斷是否為空對象 ~~~javascript function isEmptyObject(obj) { for (var key in obj) { return false; } return true; } console.log((isEmptyObject({}))) // true ~~~ 第三種方法：`Object.keys`也是只能獲取自身屬性，不能獲取原型屬性 ~~~javascript function isEmptyObject(obj) { return Object.keys(obj).length === 0; } console.log(isEmptyObject({})) // true ~~~ ## 4\. `BigInt` 解決了什么問題？ `JavaScript`中能表示的最?安全數字，轉換成`10`進制是`9007199254740991`，即在這個數范圍內不會出現精度丟失（?數除外）。但是?旦超過這個范圍，`js`就會出現計算不準確的情況，這在?數計算的時候不得不依靠?些第三?庫進?解決，因此官?提出了`BigInt`來解決此問題。 ## 5\. 基本類型和引用的區別稍后更新... ## 6\. null和undefined有什么區別？稍后更新... ## 7\. 如何準確區分所有數據類型？稍后更新...