數據類型 · 前端知識 -- 學習整理

[TOC] >[success] # js 數據類型 1. js 數據類型有8個依次是 **'Undefined','Null','Boolean','Number','String','Object', 'BigInt','Symbol'** 2. **'Undefined'** -- 當值未定義的時候，例如函數**沒有明確返回值**，和**聲明變量沒有賦值** '**Boolean**' -- 布爾類型(**true 和 false**) '**String**' -- 字符串類型(用**單引號**或者**雙引號**表示) '**Number**' -- 數字類型(**整數和小數**) '**BigInt**' -- 表示**任意精度格式的整數** '**Null**' -- 空類型,值只有一個:**null**,一個對象指向**為空**,此時**可以賦值為null** '**Object**' -- 對象 '**Symbol**' -- 用來創建**匿名的對象屬性** 3. **基本類型**有**7**個 **'string'，'number'，'bigint'，'boolean'，'null'，'undefined'，'symbol'** 4. 引用數據類型（Object）又分,**Array - 數組對象**、**RegExp - 正則對象**、**Date - 日期對象**、**Math - 數學函數**、**Function - 函數對象**,和 **基本類型包裝對象**(除了 null 和 undefined之外，所有基本類型都有其對應的包裝對象)**String** - 為**字符串**基本類型、**Number** - 為**數值**基本類型、**BigInt** 為**大整數**基本類型、**Boolean** 為**布爾**基本類型 **Symbol** 為**字面量**基本類型等等 5. '**基礎類型**'存儲在**棧內存**，被引用或拷貝時，會創建**一個完全相等的變量**； 6. '**引用類型**'存儲在**堆內存**，存儲的**是地址**，多個引用**指向同一個地址** 7. **函數對象參數** 傳遞是對象在 **堆中的地址** >[info] ## null 和 undefined 1. 首先當我們聲明一個對象的變量的時候，如果沒有給其賦值最好設置為'null'，例如: `var myObject = null` 2. 當使用雙等時候：`console.log(null == undefined) ` 結果為 'true' 但不建議這么使用 3. null 是 JavaScript 保留**關鍵字**，而undefined是全局**對象的一個屬性**。也就是說，它是全局作用域的一個變量。`undefined`的最初值就是原始數據類型`undefined`，`undefined`是一個不能被配置（**non-configurable**），不能被重寫（**non-writable**）的屬性，也要注意'**undefined不是一個保留字**' [undefined](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) >[danger] ##### undefined 1. `Undefined `是一個很特殊的數據類型，它**只有一個值**，也就是 `undefined` 2. 產生`undefined`幾種情況 2.1. 引用已聲明但**未初始化的變量**； 2.2. 引用**未定義**的對象屬性； 2.3. 執行**無返回值**函數； 2.4. 執行 **void 表達式**； 2.5. 全局常量 **window.undefined 或 undefined**。 ~~~ var a; // undefined var o = {} o.b // undefined (() => {})() // undefined void 0 // undefined window.undefined // undefined ~~~ 3. void 表達式來得到 undefined 值，因為這種方式既簡并且比undefined長度少，不需要引用額外變量和屬性在三目運算的時候表示不進行任何操作 `x>0 && x<5 ? fn() : void 0;` 4. `undefined`是全局對象的一個屬性',因此在非全局作用域下可以重新賦值 ~~~ // 打印 'foo string' PS：說明undefined的值和類型都已經改變 (function() { var undefined = 'foo'; console.log(undefined, typeof undefined) })() ~~~ 5. `undefined in window // true` >[danger] ##### 關于對 undefined 類型的判斷 ~~~ 1.下面的三種形式都可以對 'undefined' 做判斷，但是推薦type of 的形式，原因：第一種對空字符串數值0，null等情況都會有不僅僅針對undefined，第二種用'==='但是如果變量沒定義會報錯，導致程序停止運行 ~~~ ~~~ // 方式1 if(!x) { ... } // 方式2 if(x===undefined) { ... } // 方式2 if(typeof x === 'undefined') { ... } ~~~ >[info] ## Boolean 類型 1. 布爾類型只有兩個字面值:`true` 和 `false`, 并且**區分大小寫**，只能**小寫**表示 2. 如果想將其他值轉成布爾類型使用`Boolean()` -- 或者使用`!!` 3. 有時候可以看到一些言論說數字 **1是true** 或者 **0是false** 實際只是在 **if 條件語句中** 這些值自動執行了`Boolean` 方法上的轉化 4. 除了 **undefined、 null、 false、 ''、 0（包括 +0，-0）、 NaN** 轉換出來是 `false`，其他都是 `true` >[danger] ##### 常見的類型轉化成boolean | 數據類型 |轉化為true |轉化成false| | --- | --- | --- | | Boolean |true |false | | String|任何非空字符|字符串length等于0(空字符)| | Number |非0的數字(Infinity)包括無窮大 |0 和 NaN| | Object |任何對象包括 {} 對象中沒值 /new Boolean(false) |null | | Undefined |n/a（不使用的意思）|undefined | ~~~ console.log(Boolean(Infinity)) // true ~~~ >[info] ## Number 類型 1. 二進制:遇到2進一 2. 八進制:遇到8進一 3. 十進制:遇到10進一 4. 十六進制:遇到f進一 5. 數字類型分整數類型和浮點數值類型 6. NaN 表示非數值類型 7. 使用`Infinity / -Infinity`表示**無窮大/無窮小** 8. js 表示數字的 **最大值/最小值** 使用:`MAX_VALUE/MIN_VALUE`例如 `console.log(Number.MAX_VALUE)` [toLocaleString 有意思](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) >[danger] ##### 進制問題 1. 十進制就是正常數字表示 2. 八進制的第一位必須是0，然后數字順序是（**0-7**），超出0-7前導0被忽略然后展示數字 3. 十六進制必須是**0x**開頭，后面跟著(**0-9**)及(**A-F**),字母大小寫不區分，超出同理八進制 4. 計算的時候會自動將**八進制和十六進制轉換成十進制** ~~~ var intNum = 10; // 十進制 var octalNumber1 = 070; // 八進制 var octalNumber2 = 080; // 錯誤的八進制只能在0-7中 var hexNumber1 = 0xA; // 十六進制 console.log(intNum, octalNumber1, octalNumber2, hexNumber1) 打印結果： 10 56 80 10 ~~~ * 進制計算 ~~~ var octalNumber1 = 070; // 八進制 var hexNumber1 = 0xA; // 十六進制 console.log(hexNumber1+octalNumber1) // 八進制56 + 十六進制10 打印結果： 66 ~~~ >[danger] ##### 浮點數值 1. **浮點值內存空間是整數值的兩**倍，因此在特定情況下浮點值回被轉成整數，例如：`var a = 1.0` 打印的值就是**1** 2. 可以使用科學計數法來表示一些數值,表現形式就是**e前面的數值乘上后面10的次冪**，例如：`var a = 3.12e5` 相當于 3.12 * 10^5 因此 a 的結果是**312000** 3. 想用科學計數法表示小數則可以寫成：`var a = 3.12e-5` 打印結果**0.0000312** 4. 不要用**一個小數去求證一個小數** 例如 `0.1+0.2` 問題 >[danger] NaN -- 非數值(Not a Number) 1. `NaN` 不予任何值相等包括本身例如：`alert(NaN == NaN) // false` 2. 任何數值**除以非數值**都會返回`NaN` 3. 想判斷當前是不是數字用`isNaN() `方法，不是數字返回`true`，是數字返回`false`，這種判斷不準確因為`isNaN `接受的參數其實**是數字**，當然如果你傳入了其他類型參數你發現他依然可以執行，在規范中的解釋是'**Let num be ToNumber(number)**.' [tonumber參考](https://262.ecma-international.org/6.0/#sec-tonumber) 和 [isnan參考](https://262.ecma-international.org/6.0/#sec-isnan-number) 4. `isNaN()` 也可以驗證對象，但是會先調用對象的`valueOf()` 看返回的是不是一個數字，如果對象沒有這個方法，則調用`toString()` 方法，如果都沒有則為`true`,反之根據剛才兩方法的返回值來做判斷 5. 判斷一個值是不是數字`typeof value === 'number' && !isNaN(value)` ,因為 **NaN 的typeof 是number** ~~~ console.log(isNaN(NaN)) // true console.log(isNaN('w')) // true console.log(isNaN(10)) // false console.log(isNaN('10')) // false console.log(isNaN(true)) // false（true會被轉成1） console.log(isNaN([]) )// false console.log(isNaN([123]) )// false console.log(isNaN(['123']))// false ~~~ >[danger] ##### Number() 方法 ~~~ 1.一般用于瀏覽器的隱式轉換中都會默認調用'Number([val])'例如下面幾種情況 1.1.數學運算,舉個例子 1+1 1-1，1-'1' 這一類的計算都是Number數字隱士轉換，當然相對數字加字符例如1+'1' 結果為字符串'11' 并不是數字的轉換，這類最通俗的記法加號可能是數學計算可能是字符串拼接，當數字和字符串的時候最簡單方式就是統一作為拼接處理減少區分類型產生的可能性，相對來說減號只能做數學算法因此是轉換 Number 計算 1.2.isNaN檢測，isNaN 接受的參數其實是數字，在規范中的解釋是'Let num be ToNumber(number).'，這也好解釋為什么isNaN(true) 為false 原本認為true 作為Boolean值應該是在isNaN下是true才對但實際isNaN(Number(true)), Number(true) 轉換之后為 1 因此變成了isNaN(1) 因此為false 1.3.==比較 ~~~ ~~~ console.log(Number(070)) console.log(Number(011)) console.log(Number('070')) console.log(Number(NaN)) console.log(Number("sss")) console.log(Number(undefined)) console.log(Number(null)) console.log(Number('')) console.log(Number('0xf')) ~~~ ~~~ 56 9 70 NaN NaN NaN 0 0 15 ~~~ * 強制轉換規則 ~~~ 1.隱士轉換都是調用了 Number() 方法，因此只要知道Number() 針對其他類型的轉換規則，即可針對這種得到轉換結果 1.1.如果是字符串，遵循以下規則：如果字符串中只包含數字（或者是 0X / 0x 開頭的十六進制數字字符串，允許包含正負號），則將其轉換為十進制；如果字符串中包含有效的浮點格式，將其轉換為浮點數值；如果是空字符串，將其轉換為 0；如果不是以上格式的字符串，均返回 NaN； 1.2.如果是布爾值，true 和 false 分別被轉換為 1 和 0； 1.3.如果是 null，返回 0，如果是 undefined，返回 NaN； 1.4.Symbol無法轉換為數字，會報錯：Uncaught TypeError: Cannot convert a Symbol value to a number 1.5.BigInt去除'n'（超過安全數字的，會按照科學計數法處理） 1.6.把對象轉換為數字：先調用對象的 'Symbol.toPrimitive' 這個方法，如果不存在這個方法再調用對象的 'valueOf' 獲取原始值，如果獲取的值不是原始值再調用對象的 'toString' 把其變為字符串最后再把字符串基于'Number'方法轉換為數字注對'Symbol.toPrimitive' 說明 xxx[Symbol.toPrimitive](hint){} // hint:'number' / 'string' / 'default' // + number：獲取當前對象的數字類型的原始值 // + string：獲取當前對象的字符串類型的原始值 // + default：根據操作獲取數字或者字符串類型的原始值 ~~~ * 舉例說明1.6[Symbol.toPrimitive](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) ~~~ 1.轉換 {} 為 Number ，const obj = {} ，console.log(Number(obj)) 結果是NaN 1.1.先調用'Symbol.toPrimitive'console.log(obj[Symbol.toPrimitive]) 結果是undefined 1.2.調用console.log(obj.valueOf()) 結果是 {} 1.3.調用 console.log(obj.toString()) 結果'[object Object]' 任何非數字字符串轉換結果都是NaN，即相當于實際執行為Number('[object Object]') 2.轉換數組為Number 為例依舊是經過下面幾次得到結果 const arr = [10] console.log(arr[Symbol.toPrimitive]); // undefined console.log(arr.valueOf()); // [ 10 ] console.log(arr.toString()); // "10" console.log(Number("10")); // 10 // --------------分割 -------------------------------- const arr = [10, 20] console.log(arr[Symbol.toPrimitive]) // undefined console.log(arr.valueOf()) // [ 10, 20 ] console.log(arr.toString()) // "10,20" console.log(Number('10,20')) // NaN 3.轉換Date，當先查是否有'Symbol.toPrimitive' 屬性方法此時發現有就開始調用，調用時候傳參，如果想轉換的為number類型，此時傳參為'number' 即可 const date = new Date(2015, 1, 1) console.log(date[Symbol.toPrimitive]) // 存在這個屬性 console.log(date[Symbol.toPrimitive]('number')) // 1422720000000 4.自定義對象重寫'Symbol.toPrimitive' 方法 let obj = { [Symbol.toPrimitive](hint) { let result; switch (hint) { case 'number': result = 0; break; case 'string': result = JSON.stringify(obj); break; default: result = ""; } return result; } }; ~~~ >[danger] ##### parseInt([val],[radix]) ~~~ 1.如果是整數正常解析 2.[val]值必須是一個字符串，如果不是則先轉換為字符串；然后從字符串左側第一個字符開始找，把找到的有效數字字符最后轉換為數字「一個都沒找到就是NaN」；遇到一個非有效數字字符，不論后面是否還有有效數字字符，都不再查找了 3.[radix]的范圍：2~36 不在這個范圍內，最后結果都是NaN [radix]不寫或者寫零：默認值是10「特殊：如果[val]字符串是以0x開始的，默認值是16」 4.根據上面的結論所以可以得出為什么 'parseInt' 為什么可以把小數轉成整數，例如1.1,從1開始找到后面發現點不是數字所以后面全丟棄得到 1 5.字符串的情況下，十六進制是不識別的，八進制會把前綴0舍去，要注意和'Number' 不同null 和空字符都是 NaN 6.想讓parseInt 識別十六進制和八進制字符串可以這么寫parseInt('AF',16) 第二個參數表示幾進制 ~~~ ~~~ console.log(parseInt(070)) // 56 console.log(parseInt('-070 00')) // -70 console.log(parseInt(null)) // NaN console.log(parseInt('AF')) // NaN console.log(parseInt('AF',16)) // 175 console.log(parseInt('070',8)) // 56 console.log(parseInt("g10")); //NaN ~~~ >[danger] ##### parseFloat([val]) ~~~ 1.跟parseInt() 類似，只不過解釋所有里面浮點類型，不同點沒有第二個參數，無法把十六進制和八進制字符串轉換，十六進制字符串統一被轉成 0 ~~~ ~~~ console.log(parseFloat("10"));//10 console.log(parseFloat("10afrswfdsf"));//10 console.log(parseFloat("g10"));//NaN console.log(parseFloat("1fds0"));//1 console.log(parseFloat("10.98"));//10.98 console.log(parseFloat("10.98fdsfd"));//10.98 // ----------------------- // 在字符串中，找到所有符合二進制的內容 -> '10' ，因為3不是二進制中的因此到3截至了 // 把'10'看做二進制，轉換為十進制？如何把其它機制的值轉換為十進制 “按權展開求和” // 個位數權重0 十位數權重1 百位數權重2 依次類推現在10 其中十位是 1 十位的權重為1，對應的公式 // 1*2^1 + 0*2^0 => 2 2的指數對應二進制當前位置1和0 前面乘法的是對應權重 console.log(parseInt('1030px', 2)); // --------------------- let arr = [27.2, 0, '0013', '14px', 123]; // 等到結果原因要知道map 數組回調方法是可接受三個參數，parseInt 默認是兩個參數此時其實是 // parseInt(number,index) 因此會對應位置進制轉換 arr = arr.map(parseInt); // ?[27, NaN, 1, 1, 27] ~~~ >[danger] ##### 判斷是否為整數 -- Number.isInteger() ~~~ 1.'Number.isInteger()' 方法用來判斷給定的參數是否為整數 ~~~ * 舉個例子 ~~~ Number.isInteger(0); // true Number.isInteger(1); // true Number.isInteger(-100000); // true Number.isInteger(0.1); // false Number.isInteger(Math.PI); // false ~~~ >[danger] ##### [關于trunc方法說明](https://blog.csdn.net/qq_37016928/article/details/80667247)重點 >[danger] ##### 數字類型轉化總結 ~~~ 1.總結:想要轉整數用parseInt(),想要轉小數用parseFloat()想要轉數字:Number(); 要比上面的兩種方式嚴格 ~~~ >[info] ## 字符串String 1. toString()可以將所有的的數據都轉換為字符串，調用自身 `toString` 方法,但是要排除 `null` 和 `undefined`，也就是`false` 和 `true` 例如 `true.toString()`，包含在內，也可以做進制轉換例如： ~~~ 二進制：.toString(2); 八進制：.toString(8); 十進制：.toString(10); 十六進制：.toString(16); ~~~ 2. `String()` 可以將 `null` 和 `undefined`轉換為字符串，但是**沒法轉進制字符串轉換規則** 2.1. 基本類型拿字符串包起來,舉個例子`String(true)` => 結果 `true` 2.2. 對象則是調用 **Symbol.toPrimitive -> valueOf -> toString**， `Object.prototype.toString` 舉個例子`String(new Object)` => `(new Object).toString()` =>打印結果 **[object Object]** >[info] ## Sysmbol 唯一值類型 1. ES6 引入了一種新的原始數據類型 `Symbol`，表示**獨一無二**的值。它是 JavaScript 語言的第七種數據類型 2. `Symbol`函數前**不能使用new命令**，否則會報錯。這是因為生成的 **Symbol 是一個原始類型的值，不是對象**。也就是說，由于 `Symbol `值不是對象，所以**不能添加屬性**。基本上，它是**一種類似于字符串的數據類型**。 3. `Symbol`函數可以接受一個字符串作為參數，表示對 Symbol 實例的描述，主要是為了在控制臺顯示，或者轉為字符串時，比較容易區分。 4. 很多JS底層的處理機制，就是基于這些屬性方法實現的 `Symbol.hasInstance\Symbol.toStringTag\Symbol.toPrimitive\Symbol.iterator...` >[danger] ##### 給對象屬性設置sysmbol 值 ~~~ const obj = { name: 'w', [Symbol()]: 'symbol', } // 打印是undefined ，原因是因為當前打印的symbol key // 和聲明的symbol 毫無關系 console.log(obj[Symbol()]) // ---------------想獲取方法一------------------ const key = Symbol() const obj = { name: 'w', [key]: 'symbol', } // 想獲取symbol 可以將symbol 作為統一的變量提取 console.log(obj[key]) // ---------------想獲取方法二------------------ const obj = { name: 'w', [key]: 'symbol', } let symbolKeys = Object.getOwnPropertySymbols(obj); //獲取當前對象所有Symbol類型的私有屬性，結果數組 symbolKeys.forEach(key => { console.log(obj[key]); }); ~~~ >[info] ## BigInt JS中在進行數學運算的時候，如果計算的數值超過**最大/最小安全數字**，計算出來的結果很可能是**不準確**，舉個例子查看數字最大安全值`Number.MAX_SAFE_INTEGER`和最小安全值的方法`Number.MIN_SAFE_INTEGER` ~~~ const maxNumber = Number.MAX_SAFE_INTEGER console.log(maxNumber) const add = maxNumber + 10 console.log(add) ~~~ * 上面的打印結果在我的電腦如下： ~~~ 9007199254740991 9007199254741000 ~~~ 可以發現當**超過了最大精度時候計算開始出現錯誤**，為了避免這種事情發生使用`BigInt`大數類型：**數字后面加個n**即使大數類型 ~~~ const add = BigInt(maxNumber) + 10n console.log(add) ~~~ 打印結果**9007199254741001n**當在數字后面加n時候即轉換為大數類型實際開發過程服務器端數據庫存儲，是有**longInt**類型，服務器返回給客戶端的**值超過安全數字**的一般會將數字返回**字符串作為參數返回**，但是如果前端想要**計算**此時就不能是單純轉換為數字類，需要`BigInt`,當計算完成后在將轉**換成字符串給到后臺**