一、JS中八種數(shù)據(jù)類型判斷方法

在JavaScript中，數(shù)據(jù)類型分為兩大類：基本（原始）數(shù)據(jù)類型和引用（對象）數(shù)據(jù)類型。

基本數(shù)據(jù)類型（Primitive Data Types）

基本數(shù)據(jù)類型是表示簡單的數(shù)據(jù)片段，它們是直接存儲在變量中的數(shù)據(jù)。JavaScript中的基本數(shù)據(jù)類型有以下幾種：

1. String?- 表示文本數(shù)據(jù)，例如?"Hello, World!"。
2. Number?- 表示整數(shù)和浮點數(shù)，例如?42?和?3.14。
3. Boolean?- 表示邏輯值?true?或?false。
4. Undefined?- 表示未定義的值，即變量已聲明但未初始化時的值。
5. Null?- 表示空值或者不存在的對象。在JavaScript中，null?是一個表示“無”的對象，轉為數(shù)值時為?0。
6. Symbol?(ES6新增) - 表示獨一無二的值，常用于創(chuàng)建對象的私有成員。
7. BigInt?(ES2020新增) - 表示非常大的整數(shù)。

基本數(shù)據(jù)類型的值是不可變的，也就是說，一旦創(chuàng)建，就不能更改。如果對基本數(shù)據(jù)類型的變量進行操作，實際上是創(chuàng)建了一個新的變量或值。

引用數(shù)據(jù)類型（Reference Data Types）

引用數(shù)據(jù)類型表示的是數(shù)據(jù)的集合，它們存儲的是對數(shù)據(jù)的引用（內存地址），而不是數(shù)據(jù)本身。在JavaScript中，最常見的引用數(shù)據(jù)類型是對象（Object），還包括以下幾種：

1. Object?- 表示一組無序的鍵值對，例如?{name: "Alice", age: 25}。
2. Array?- 表示一組有序的數(shù)據(jù)集合，例如?[1, 2, 3, 4]。
3. Function?- 表示函數(shù)，JavaScript中的函數(shù)是一等公民，可以作為對象使用。
4. Date?- 表示日期和時間。
5. RegExp?- 表示正則表達式。

引用數(shù)據(jù)類型的值是可變的，這意味著可以改變它們的內容而不改變它們的身份。例如，可以向對象添加屬性或修改數(shù)組中的元素。

基本數(shù)據(jù)類型與引用數(shù)據(jù)類型的區(qū)別

以下是一些基本數(shù)據(jù)類型和引用數(shù)據(jù)類型之間的關鍵區(qū)別：

• 存儲方式：基本數(shù)據(jù)類型的值直接存儲在變量中，而引用數(shù)據(jù)類型存儲的是內存地址。
• 賦值：基本數(shù)據(jù)類型賦值時是傳遞值，而引用數(shù)據(jù)類型賦值時是傳遞引用。
• 比較：基本數(shù)據(jù)類型比較的是值，而引用數(shù)據(jù)類型比較的是引用地址。
• 參數(shù)傳遞：在函數(shù)中，基本數(shù)據(jù)類型作為參數(shù)傳遞時，傳遞的是值的副本；引用數(shù)據(jù)類型傳遞的是引用地址。

理解這些差異對于編寫高效和正確的JavaScript代碼非常重要。

八種數(shù)據(jù)類型判斷方式

二、NaN

三、數(shù)值千分位的六種方法

1.format with array

(number + '')?是一種常見的類型轉換技巧，它將數(shù)字?number?轉換為字符串。無論?number?是什么數(shù)字，加上一個空字符串?''?后，結果都會是一個字符串形式的?number。

function format_with_array(number) {// 轉為字符串，并按照.拆分var arr = (number + '').split('.');// 整數(shù)部分再拆分var int = arr[0].split('');// 小數(shù)部分var fraction = arr[1] || '';// 返回的變量var r = "";var len = int.length;// 倒敘并遍歷int.reverse().forEach(function (v, i) {// 非第一位并且是位值是3的倍數(shù)， 添加 ","if (i !== 0 && i % 3 === 0) {r = v + "," + r;} else {// 正常添加字符r = v + r;}})// 整數(shù)部分和小數(shù)部分拼接return r + (!!fraction ? "." + fraction : '');
}const print = console.log;
print(format_with_array(938765432.02));938765432.02

1. var arr = (number + '').split('.');

   這行代碼首先通過?number + ''?將數(shù)字?number?轉換為字符串。這是因為?split?方法是字符串的方法，不能直接在數(shù)字上使用。
   然后使用?split('.')?方法將字符串按照小數(shù)點（.）分割成兩部分，結果存儲在數(shù)組?arr?中。如果?number?是一個整數(shù)，那么?arr?將只有一個元素，即整數(shù)部分；如果?number?是一個小數(shù)，那么?arr將有兩個元素，第一個元素是整數(shù)部分，第二個元素是小數(shù)部分。

2. var int = arr[0].split('');

   這行代碼將?arr?數(shù)組中的第一個元素（即整數(shù)部分）再次使用?split('')?方法進行分割。由于沒有指定分隔符，實際上是將整數(shù)部分的每個字符分割成一個單獨的字符串，并將結果存儲在數(shù)組?int?中。例如，如果整數(shù)部分是?"123"，那么?int?將是?["1", "2", "3"]。

3. var fraction = arr[1] || '';

   這行代碼嘗試獲取?arr?數(shù)組中的第二個元素（即小數(shù)部分）。如果?arr?只有一個元素（即?number?是一個整數(shù)），那么?arr[1]?將是?undefined。
   使用邏輯或運算符?||，如果?arr[1]?是?undefined（即沒有小數(shù)部分），則將?fraction?設置為一個空字符串?''。如果存在小數(shù)部分，則?fraction?將是小數(shù)部分的字符串。

return r + (!!fraction ? "." + fraction : '');

1. r +：這是字符串拼接的開始，將數(shù)字?r?轉換為字符串并準備拼接。

2. !!fraction：這是雙重邏輯非操作符，用于將?fraction?轉換為布爾值。如果?fraction?是非空字符串、非零數(shù)字或任何“真值”對象，則?!!fraction?將為?true；如果?fraction?是空字符串、零、null、undefined?或任何“假值”，則?!!fraction?將為?false。

3. ? "." + fraction : ''：這是一個條件（三元）運算符，它根據(jù)?!!fraction?的結果來決定返回的值。如果?!!fraction?為?true（即?fraction?有值），則返回?"." + fraction，即小數(shù)點加上?fraction?的值；如果?!!fraction?為?false（即?fraction?沒有值或為假值），則返回空字符串?''。

整體來看，這段代碼的作用是：

如果?fraction?有值，那么返回的字符串將是?r?后面跟著一個小數(shù)點和?fraction?的值。如果?fraction?沒有值或為假值，那么返回的字符串就只是?r?轉換成的字符串。

2.format with substring

function format_with_substring(number) {// 數(shù)字轉字符串, 并按照 .分割var arr = (number + '').split('.');var int = arr[0] + '';var fraction = arr[1] || '';// 多余的位數(shù)var f = int.length % 3;// 獲取多余的位數(shù)，f可能是0， 即r可能是空字符串var r = int.substring(0, f);// 每三位添加","和對應的字符for (var i = 0; i < Math.floor(int.length / 3); i++) {r += ',' + int.substring(f + i * 3, f + (i + 1) * 3)}//多余的位數(shù)，上面if (f === 0) {r = r.substring(1);}// 整數(shù)部分和小數(shù)部分拼接return r + (!!fraction ? "." + fraction : '');
}const print = console.log;
print(format_with_substring(938765432.02));

3.format with mod

function format_with_mod(number) {var n = number;  // 將傳入的參數(shù) number 賦值給變量 n，用于后續(xù)計算，保留原始數(shù)值不變。var r = "";     // 初始化一個空字符串 r，用于存儲格式化后的結果。var temp;       // 聲明一個變量 temp，用于暫存計算過程中的中間值。do {mod = n % 1000;  // 計算 n 除以 1000 的余數(shù)，即取 n 的最后三位數(shù)字（包括小數(shù)部分）。n = n / 1000;    // 將 n 除以 1000，即每次循環(huán)處理掉 n 的最后三位數(shù)字。temp = ~~mod;    // 使用雙按位非操作符（~~）來取整，去除 mod 的小數(shù)部分，獲取整數(shù)部分。// 以下代碼用于構造格式化字符串：// 如果 n 大于等于 1，說明還有更多的數(shù)字需要處理，因此使用 padStart(3, "0") 來確保 temp 是三位數(shù)字，不足部分用 "0" 填充。// 如果 r 已經(jīng)有內容，則在 temp 前面加上 ","，否則直接使用 temp。r = (n >= 1 ? `${temp}`.padStart(3, "0") : temp) + (!!r ? "," + r : "");} while (n >= 1);  // 當 n 大于等于 1 時，繼續(xù)循環(huán)，直到 n 小于 1。var strNumber = number + "";  // 將數(shù)字 number 轉換為字符串，以便后續(xù)查找小數(shù)點位置。var index = strNumber.indexOf(".");  // 查找小數(shù)點的位置。// 如果存在小數(shù)點（index >= 0），則將原始數(shù)字的小數(shù)部分添加到格式化字符串 r 的末尾。if (index >= 0) {r += strNumber.substring(index);}return r;  // 返回格式化后的字符串。
}const print = console.log;  // 將 console.log 方法賦值給變量 print，便于后續(xù)使用。
print(format_with_mod(38765432.02));  // 調用 format_with_mod 函數(shù)并打印結果。

4.format with regex

const print = console.log;
print(/hello (?=[a-z]+)/.test("hello a"));
print(/hello (?=[a-z]+)/.test("hello 1"));  

function format_with_regex(number) {var reg = /\d{1,3}(?=(\d{3})+$)/g;return (number + '').replace(reg, '$&,');
}// 987, 654, 321// const print = console.log;
// print(format_with_regex(987654321));function format_with_regex(number) {var reg = /\d{1,3}(?=(\d{3})+$)/g;return (number + '').replace(reg, function(match, ...args){    console.log(match, ...args);return match + ','});
}
format_with_regex(987654321)// function format_with_regex(number) {
//     var reg = /(\d)(?=(?:\d{3})+$)/g
//     return (number + '').replace(reg, '$1,');
// }

5.format with toLocaleString

function format_with_toLocaleString(number, minimumFractionDigits, maximumFractionDigits) {minimumFractionDigits = minimumFractionDigits || 2;maximumFractionDigits = (maximumFractionDigits || 2);maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits);return number.toLocaleString("en-us", {maximumFractionDigits: maximumFractionDigits || 2,minimumFractionDigits: minimumFractionDigits || 2})
}function format_with_toLocaleString(number) {return number.toLocaleString("en-us")
}const print = console.log;
print(format_with_toLocaleString(938765432.02));

6.Intl.NumberFormat

function format_with_Intl(number, minimumFractionDigits, maximumFractionDigits) {minimumFractionDigits = minimumFractionDigits || 2;maximumFractionDigits = (maximumFractionDigits || 2);maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits);return new Intl.NumberFormat('en-us', {maximumFractionDigits: maximumFractionDigits || 2,minimumFractionDigits: minimumFractionDigits || 2}).format(number)
}// 使用默認配置選項
// function format_with_Intl(number) {
//     return new Intl.NumberFormat('en-us').format(number)
// }const print = console.log;
print(format_with_Intl(938765432.02));

7.效果對比

對比一下這六種方法的性能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>數(shù)字千分位</title>
</head><body><div style="text-align:center"><p><input type="number" value="5000" id="textCount" /></p><p><input type="button" onclick="executeTest()" value="測試" /><input type="button" onclick="javascript:document.getElementById('messageEl').innerHTML=''" value="清除" /></p></div><div id="messageEl" style="width: 300px;margin: auto;"></div><script>function format_with_array(number) {var arr = (number + '').split('.');var int = arr[0].split('');var fraction = arr[1] || '';var r = "";var len = int.length;int.reverse().forEach(function(v, i) {if (i !== 0 && i % 3 === 0) {r = v + "," + r;} else {r = v + r;}})return r + (!!fraction ? "." + fraction : '');}</script><script>function format_with_substring(number) {var arr = (number + '').split('.');var int = arr[0] + '';var fraction = arr[1] || '';var f = int.length % 3;var r = int.substring(0, f);for (var i = 0; i < Math.floor(int.length / 3); i++) {r += ',' + int.substring(f + i * 3, f + (i + 1) * 3)}if (f === 0) {r = r.substring(1);}return r + (!!fraction ? "." + fraction : '');}</script><script>function format_with_mod(number) {var n = number;var r = "";var temp;var mod;do {mod = n % 1000;n = n / 1000;temp = ~~mod;r = (n > 1 ? `${temp}`.padStart(3, "0") : temp) + (!!r ? "," + r : "")} while (n > 1)var strNumber = number + "";var index = strNumber.indexOf(".");if (index > 0) {r += strNumber.substring(index);}return r;}</script><script>function format_with_regex(number) {var reg = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g;// var reg = /(\d)(?=(?:\d{3})+$)/g//var reg = /\d{1,3}(?=(\d{3})+$)/g;return (number + '').replace(reg, '$1,');}</script><script>// function format_with_toLocaleString(number, minimumFractionDigits, maximumFractionDigits) {//     minimumFractionDigits = minimumFractionDigits || 2;//     maximumFractionDigits = (maximumFractionDigits || 2);//     maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits);//     return number.toLocaleString("en-us", {//         maximumFractionDigits: maximumFractionDigits || 2,//         minimumFractionDigits: minimumFractionDigits || 2//     })// }function format_with_toLocaleString(number) {return number.toLocaleString("en-us")}</script><script>// function format_with_Intl(number, minimumFractionDigits, maximumFractionDigits) {//     minimumFractionDigits = minimumFractionDigits || 2;//     maximumFractionDigits = (maximumFractionDigits || 2);//     maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits);//     return new Intl.NumberFormat('en-us', {//         maximumFractionDigits: maximumFractionDigits || 2,//         minimumFractionDigits: minimumFractionDigits || 2//     }).format(number)// }const format = new Intl.NumberFormat('en-us');function format_with_Intl(number) {return format.format(number)}</script><script>function getData(count) {var data = new Array(count).fill(0).map(function(i) {var rd = Math.random();var r = rd * Math.pow(10, Math.trunc(Math.random() * 12));if (rd > 0.5) {r = ~~r;}return r})return data;}function test(data, fn, label) {var start = performance.now();for (var i = 0; i < data.length; i++) {fn(data[i]);}var time = performance.now() - start;message((fn.name || label) + ":" + time.toFixed(2) + "ms");}function executeTest() {var data = getData(+textCount.value);test(data, format_with_array);test(data, format_with_mod);test(data, format_with_substring);test(data, format_with_regex);test(data, format_with_toLocaleString);test(data, format_with_Intl);message("-------------------")}function message(msg) {var el = document.createElement("p");el.innerHTML = msg;messageEl.appendChild(el);}</script></body></html>

三、[]+[],{}+{},[]+{},{}+[]