js中各種數據類型檢測和判定的實戰示例

Posted on by

介紹

在前端開發中，js 有各種各樣的數據類型，數據類型檢測是每個開發者都必須掌握基礎知識。數據類型檢測的方法也有很多種，本題將封裝一個通用的數據類型檢測函數。

準備

本題已經內置瞭初始代碼，打開實驗環境，目錄結構如下：

.
└── main.js

其中：
main.js 是待補充代碼的 js 文件。
在 main.js 文件中封裝好方法以後，可以嘗試在該文件中手動調用已經封裝好的方法，通過命令 node main.js 來執行文件，打印對應的日志。

目標

完善 main.js 中 getType 函數中的 TODO 部分，返回傳入值的對應數據類型。

傳入值以及 getType 函數返回值（大小寫可忽略）按照如下方式對應：

傳入值 返回值
‘s’ string
0 number

傳入值 返回值
false boolean
undefined undefined
Symbol() symbol
function fn(){} function
123n bigint
null null
{} object
[] array
new Date date
new Map map
new Set set
/a/ regexp

測試用例

// 示例
const testArr = [
  "s",
  0,
  false,
  undefined,
  Symbol(),
  function () {},
  123n,
  null,
  {},
  [],
  new Date(),
  new Map(),
  new Set(),
  /a/,
];
const result = testArr.map((item) => getType(item));
console.log("得到的結果：", result);
/*
得到的結果：
 [
    'string',  'number',
    'boolean', 'undefined',
    'symbol',  'function',
    'bigint',  'null',
    'object',  'array',
    'date',    'map',
    'set',     'regExp'
  ]
*/

值得註意的是需要我們區別typeof與instanceof的用法。instanceof運算符用來判斷一個構造函數的prototype屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上。關於原型鏈請自行學習，這裡不過多解釋。typeof返回的是一個字符串，具體用法請見代碼。typeof隻能檢測出圖中的8種類型。並且你如果使用typeof檢測 null、Date、RegExp、Error都會返回為object類型。所以最好使用instanceof檢測

代碼

/**
 * @description: 數據類型檢測
 * @param {*} data 傳入的待檢測數據
 * @return {*} 返回數據類型
 */
 function getType(data) {
  // TODO：待補充代碼
    if(typeof data=="String"){
      return 'string';
    }else if( typeof data=="number"){
      return "number"
    }else if(typeof data== "boolean"){
      return "boolean"
    }else if(typeof data=="undefined"){
      return "undefined"
    }else if(typeof data== "function"){
      return "function"
    }else if(typeof data=== "symbol"){
      return "symbol"
    }
    else if(typeof data== "bigint"){
      return "bigint"
    }else if( data=== null){
      return "null"
    }else if(Array.isArray(data)){
      return "array"
    }else if(data instanceof Date){
      return "date"
    }else if(data instanceof RegExp){
      return "regExp"
    }
    else if(data instanceof Map){
      return "map"
    }else if(data instanceof Set){
      return "set"
    }
    else if(typeof data=="string"){
      return "string"
    }else if(typeof data=="object"){
      return "object"
    }
}

const testArr = [
  "s",
  0,
  false,
  undefined,
  Symbol(),
  function () {},
  123n,
  null,
  {},
  [],
  new Date(),
  new Map(),
  new Set(),
  /a/,
];
  const result = testArr.map((item) => getType(item));
console.log("得到的結果：", result);
module.exports = {
  getType
}

使用

可以把代碼復制到一個js文件中。在終端運行node 文件名.js即可。測試結果如下，結果是從左往右開始讀，然後下一行

總結 

到此這篇關於js中各種數據類型檢測和判定的文章就介紹到這瞭,更多相關js數據類型檢測和判定內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：