收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2046|回复: 2

[作品展示] typeofit.js - Using typeofit.js to get the real JavaScript type of a value.

[复制链接]
发表于 2017-8-5 16:09:12 | 显示全部楼层 |阅读模式
本帖最后由 yaohaixiao 于 2017-8-5 16:10 编辑

很久没有发作品了,这个是我在github上写的一个小程序,用来检测JS中的值类型的,有些库中也有检测的一些方法,但是为了检测一个值就用那么大库实在划不来 ,就自己写了一个,对于刚接触JS的朋友,学习如何检测JS中的值类型也是有帮助的。

项目 地址:https://github.com/yaohaixiao/typeofit.git
API 地址:https://yaohaixiao.github.io/typeofit/


  1. // 核心的代码,完整的代码看附件中的吧
  2. (function () {
  3.     'use strict';

  4.         OP = Object.prototype,
  5.         toString = OP.toString,
  6.         TYPE_BOOLEAN = 'boolean',
  7.         TYPE_NULL = 'null',
  8.         TYPE_UNDEFINED = 'undefined',
  9.         TYPE_NUMBER = 'number',
  10.         TYPE_STRING = 'string',
  11.         TYPE_OBJECT = 'object',
  12.         TYPE_ARRAY = 'array',
  13.         TYPE_DATE = 'date',
  14.         TYPE_ERROR = 'error',
  15.         TYPE_ARGUMENTS = 'arguments',
  16.         TYPE_COLLECTION = 'collection',
  17.         TYPE_FUNCTION = 'function',
  18.         TYPE_ELEMENT = 'element',
  19.         TYPE_TEXT = 'text',
  20.         TYPE_WHITESPACE = 'whitespace',
  21.         TYPE_REGEXP = 'regexp',
  22.         TYPE_SYMBOL = 'symbol',
  23.         TYPE_SET = 'set',
  24.         TYPE_WEAKSET = 'weakset',
  25.         TYPE_MAP = 'map',
  26.         TYPE_WEAKMAP = 'weakmap',
  27.         TYPE_INT8_ARRAY = 'int8array',
  28.         TYPE_UNIT8_ARRAY = 'uint8array',
  29.         TYPE_UNIT8_CLAMPED_ARRAY = 'uint8clampedarray',
  30.         TYPE_INT16_ARRAY = 'int16array',
  31.         TYPE_UNIT16_ARRYA = 'uint16array',
  32.         TYPE_INT32_ARRAY = 'int32array',
  33.         TYPE_UNIT32_ARRAY = 'uint32array',
  34.         TYPE_FLOAT32_ARRAY = 'float32array',
  35.         TYPE_FLOAT64_ARRAY = 'float64array',
  36.         OBJECT_ARRAY = '[object Array]',
  37.         OBJECT_INT8_ARRAY = '[object Int8Array]',
  38.         OBJECT_UNIT8_ARRAY = '[object Uint8Array]',
  39.         OBJECT_UNIT8_CLAMPED_ARRAY = '[object Uint8ClampedArray]',
  40.         OBJECT_INT16_ARRAY = '[object Int16Array]',
  41.         OBJECT_UNIT16_ARRAY= '[object Uint16Array]',
  42.         OBJECT_INT32_ARRAY = '[object Int32Array]',
  43.         OBJECT_UNIT32_ARRAY = '[object Uint32Array]',
  44.         OBJECT_FLOAT32_ARRAY = '[object Float32Array]',
  45.         OBJECT_FLOAT64_ARRAY = '[object Float64Array]',
  46.         OBJECT_DATE = '[object Date]',
  47.         OBJECT_ERROR = '[object Error]',
  48.         OBJECT_FUNCTION = '[object Function]',
  49.         OBJECT_REGEXP = '[object RegExp]',
  50.         OBJECT_SET = '[object Set]',
  51.         OBJECT_WEAKSET = '[object WeakSet]',
  52.         OBJECT_MAP = '[object Map]',
  53.         OBJECT_WEAKMAP = '[object WeakMap]',
  54.         OBJECT_SYMBOL = '[object Symbol]',
  55.         REGEXP_BASE64 = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/,
  56.         REGEXP_HEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;

  57.     /**
  58.      * [url=home.php?mod=space&uid=111085]@method[/url] typeOf
  59.      * @param {*} val - 要检测的任意值
  60.      * @returns {String}
  61.      */
  62.     function typeOf ( val ) {
  63.         var type = toString.apply(val);

  64.         /* ===== 原始值类型(Primitive data types) ===== */
  65.         // 检查是否为 Boolean 类型
  66.         if ( typeof val === TYPE_BOOLEAN ) {
  67.             return TYPE_BOOLEAN;
  68.         }

  69.         // 检测是否为 null
  70.         if ( val === null ) {
  71.             return TYPE_NULL;
  72.         }

  73.         // 检测是否为 Number 类型
  74.         if ( typeof val === TYPE_NUMBER && isFinite( val ) ) {
  75.             return TYPE_NUMBER;
  76.         }

  77.         // 检测是否为 Undefined
  78.         if ( typeof val === TYPE_UNDEFINED ) {
  79.             return TYPE_UNDEFINED;
  80.         }

  81.         // 检测是否为 String 类型
  82.         if ( typeof val === TYPE_STRING ) {
  83.             return TYPE_STRING;
  84.         }

  85.         /* ===== ES6 ( Map, WeakMap, Set, WeakSet, Symbol ) ===== */
  86.         if (type === OBJECT_SET) {
  87.             return TYPE_SET;
  88.         }

  89.         // 检测是否为 WeakSet 类型
  90.         if (type === OBJECT_WEAKSET) {
  91.             return TYPE_WEAKSET;
  92.         }

  93.         // 检测是否为 Map 类型
  94.         if (type === OBJECT_MAP) {
  95.             return TYPE_MAP;
  96.         }

  97.         // 检测是否为 WeakMap 类型
  98.         if (type === OBJECT_WEAKMAP) {
  99.             return TYPE_WEAKMAP;
  100.         }

  101.         // 检测是否为 Symbol 类型
  102.         if ( type === OBJECT_SYMBOL ) {
  103.             return TYPE_SYMBOL;
  104.         }

  105.         /* ===== 引用类型(Reference data types) ===== */
  106.         // 检测是否为 Array 类型
  107.         if ( type === OBJECT_ARRAY ) {
  108.             return TYPE_ARRAY;
  109.         }

  110.         // 检测是否为 Date 类型
  111.         if ( type === OBJECT_DATE ) {
  112.             return TYPE_DATE;
  113.         }

  114.         // 检测是否为 Error 类型
  115.         if ( type === OBJECT_ERROR ) {
  116.             return TYPE_ERROR;
  117.         }

  118.         // 检测是否为 Function 类型
  119.         if ( (typeof val === TYPE_FUNCTION) || type === OBJECT_FUNCTION ) {
  120.             return TYPE_FUNCTION;
  121.         }

  122.         // 检测是否为 RegExp 类型
  123.         if ( type === OBJECT_REGEXP ) {
  124.             return TYPE_REGEXP;
  125.         }

  126.         /* ===== ES2017 Arrays ===== */
  127.         // Int - 整数
  128.         // Uint - 无符号整数
  129.         // Float - IEEE754 浮点数
  130.         if (type === OBJECT_INT8_ARRAY) {
  131.             return TYPE_INT8_ARRAY;
  132.         }

  133.         if (type === OBJECT_UNIT8_ARRAY) {
  134.             return TYPE_UNIT8_ARRAY;
  135.         }

  136.         if (type === OBJECT_UNIT8_CLAMPED_ARRAY) {
  137.             return TYPE_UNIT8_CLAMPED_ARRAY;
  138.         }

  139.         if (type === OBJECT_INT16_ARRAY) {
  140.             return TYPE_INT16_ARRAY;
  141.         }

  142.         if (type === OBJECT_UNIT16_ARRAY) {
  143.             return TYPE_UNIT16_ARRYA;
  144.         }

  145.         if (type === OBJECT_INT32_ARRAY) {
  146.             return TYPE_INT32_ARRAY;
  147.         }

  148.         if (type === OBJECT_UNIT32_ARRAY) {
  149.             return TYPE_UNIT32_ARRAY;
  150.         }

  151.         if (type === OBJECT_FLOAT32_ARRAY) {
  152.             return TYPE_FLOAT32_ARRAY;
  153.         }

  154.         if (type === OBJECT_FLOAT64_ARRAY) {
  155.             return TYPE_FLOAT64_ARRAY;
  156.         }

  157.         /* ===== 其它类型(Others) ===== */
  158.         // 检测是否为一个 DOM
  159.         if ( val.nodeName ) {

  160.             // 检测是否为 Element 节点
  161.             if ( val.nodeType === 1 ) {
  162.                 return TYPE_ELEMENT;
  163.             }

  164.             // 检测是否为 Text 节点
  165.             if ( val.nodeType === 3 ) {
  166.                 return (/\S/).test( val.nodeValue ) ? TYPE_TEXT : TYPE_WHITESPACE;
  167.             }
  168.         }
  169.         else {

  170.             // 检测是否为 ArrayLike 类型
  171.             if ( typeof val === TYPE_OBJECT && typeof val.length === TYPE_NUMBER && val.length > 0 ) {

  172.                 // 检测是否为 Arguments 类型
  173.                 if ( 'callee' in val ) {
  174.                     return TYPE_ARGUMENTS;
  175.                 }

  176.                 // 检测是否为 NodeList 类型
  177.                 if ( 'item' in val ) {
  178.                     return TYPE_COLLECTION;
  179.                 }
  180.             }
  181.         }

  182.         // 其它标准的数据类型
  183.         return typeof val;
  184.     }

  185. })();
复制代码


typeofit.zip

4.54 KB, 下载次数: 147

源代码

 楼主| 发表于 2017-8-5 16:16:06 | 显示全部楼层
这里也吐槽一下,最近面试的一些人,开发了3年都4年了,还不知道怎么使用OOP实现继承,甚至要他说10个JS原生操作DOM 的方法都做不上来,上来就跟我说怎么使用VUE遛云云,我都跟他们说好好补补JS基础啊!
这个typeofit,也是JS基础知识的总结,希望对刚接触JS的朋友学习如何判断JS的值类型有帮助,起码你要知道 有哪些基础值类型,那些是引用类型的值啊!
回复 支持 反对

使用道具 举报

发表于 2017-8-7 16:08:37 | 显示全部楼层
谢分享,感觉我的js都是烂的一逼
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-23 08:50 , Processed in 0.109102 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表