typeofit.js - Using typeofit.js to get the real JavaScript type of a value.

yaohaixiao · 发表于 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/

// 核心的代码，完整的代码看附件中的吧
(function () {
'use strict';
OP = Object.prototype,
toString = OP.toString,
TYPE_BOOLEAN = 'boolean',
TYPE_NULL = 'null',
TYPE_UNDEFINED = 'undefined',
TYPE_NUMBER = 'number',
TYPE_STRING = 'string',
TYPE_OBJECT = 'object',
TYPE_ARRAY = 'array',
TYPE_DATE = 'date',
TYPE_ERROR = 'error',
TYPE_ARGUMENTS = 'arguments',
TYPE_COLLECTION = 'collection',
TYPE_FUNCTION = 'function',
TYPE_ELEMENT = 'element',
TYPE_TEXT = 'text',
TYPE_WHITESPACE = 'whitespace',
TYPE_REGEXP = 'regexp',
TYPE_SYMBOL = 'symbol',
TYPE_SET = 'set',
TYPE_WEAKSET = 'weakset',
TYPE_MAP = 'map',
TYPE_WEAKMAP = 'weakmap',
TYPE_INT8_ARRAY = 'int8array',
TYPE_UNIT8_ARRAY = 'uint8array',
TYPE_UNIT8_CLAMPED_ARRAY = 'uint8clampedarray',
TYPE_INT16_ARRAY = 'int16array',
TYPE_UNIT16_ARRYA = 'uint16array',
TYPE_INT32_ARRAY = 'int32array',
TYPE_UNIT32_ARRAY = 'uint32array',
TYPE_FLOAT32_ARRAY = 'float32array',
TYPE_FLOAT64_ARRAY = 'float64array',
OBJECT_ARRAY = '[object Array]',
OBJECT_INT8_ARRAY = '[object Int8Array]',
OBJECT_UNIT8_ARRAY = '[object Uint8Array]',
OBJECT_UNIT8_CLAMPED_ARRAY = '[object Uint8ClampedArray]',
OBJECT_INT16_ARRAY = '[object Int16Array]',
OBJECT_UNIT16_ARRAY= '[object Uint16Array]',
OBJECT_INT32_ARRAY = '[object Int32Array]',
OBJECT_UNIT32_ARRAY = '[object Uint32Array]',
OBJECT_FLOAT32_ARRAY = '[object Float32Array]',
OBJECT_FLOAT64_ARRAY = '[object Float64Array]',
OBJECT_DATE = '[object Date]',
OBJECT_ERROR = '[object Error]',
OBJECT_FUNCTION = '[object Function]',
OBJECT_REGEXP = '[object RegExp]',
OBJECT_SET = '[object Set]',
OBJECT_WEAKSET = '[object WeakSet]',
OBJECT_MAP = '[object Map]',
OBJECT_WEAKMAP = '[object WeakMap]',
OBJECT_SYMBOL = '[object Symbol]',
REGEXP_BASE64 = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/,
REGEXP_HEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
/**
* [url=home.php?mod=space&uid=111085]@method[/url] typeOf
* @param {*} val - 要检测的任意值
* @returns {String}
*/
function typeOf ( val ) {
var type = toString.apply(val);
/* ===== 原始值类型（Primitive data types） ===== */
// 检查是否为 Boolean 类型
if ( typeof val === TYPE_BOOLEAN ) {
return TYPE_BOOLEAN;
}
// 检测是否为 null
if ( val === null ) {
return TYPE_NULL;
}
// 检测是否为 Number 类型
if ( typeof val === TYPE_NUMBER && isFinite( val ) ) {
return TYPE_NUMBER;
}
// 检测是否为 Undefined
if ( typeof val === TYPE_UNDEFINED ) {
return TYPE_UNDEFINED;
}
// 检测是否为 String 类型
if ( typeof val === TYPE_STRING ) {
return TYPE_STRING;
}
/* ===== ES6 ( Map, WeakMap, Set, WeakSet, Symbol ) ===== */
if (type === OBJECT_SET) {
return TYPE_SET;
}
// 检测是否为 WeakSet 类型
if (type === OBJECT_WEAKSET) {
return TYPE_WEAKSET;
}
// 检测是否为 Map 类型
if (type === OBJECT_MAP) {
return TYPE_MAP;
}
// 检测是否为 WeakMap 类型
if (type === OBJECT_WEAKMAP) {
return TYPE_WEAKMAP;
}
// 检测是否为 Symbol 类型
if ( type === OBJECT_SYMBOL ) {
return TYPE_SYMBOL;
}
/* ===== 引用类型（Reference data types） ===== */
// 检测是否为 Array 类型
if ( type === OBJECT_ARRAY ) {
return TYPE_ARRAY;
}
// 检测是否为 Date 类型
if ( type === OBJECT_DATE ) {
return TYPE_DATE;
}
// 检测是否为 Error 类型
if ( type === OBJECT_ERROR ) {
return TYPE_ERROR;
}
// 检测是否为 Function 类型
if ( (typeof val === TYPE_FUNCTION) || type === OBJECT_FUNCTION ) {
return TYPE_FUNCTION;
}
// 检测是否为 RegExp 类型
if ( type === OBJECT_REGEXP ) {
return TYPE_REGEXP;
}
/* ===== ES2017 Arrays ===== */
// Int - 整数
// Uint - 无符号整数
// Float - IEEE754 浮点数
if (type === OBJECT_INT8_ARRAY) {
return TYPE_INT8_ARRAY;
}
if (type === OBJECT_UNIT8_ARRAY) {
return TYPE_UNIT8_ARRAY;
}
if (type === OBJECT_UNIT8_CLAMPED_ARRAY) {
return TYPE_UNIT8_CLAMPED_ARRAY;
}
if (type === OBJECT_INT16_ARRAY) {
return TYPE_INT16_ARRAY;
}
if (type === OBJECT_UNIT16_ARRAY) {
return TYPE_UNIT16_ARRYA;
}
if (type === OBJECT_INT32_ARRAY) {
return TYPE_INT32_ARRAY;
}
if (type === OBJECT_UNIT32_ARRAY) {
return TYPE_UNIT32_ARRAY;
}
if (type === OBJECT_FLOAT32_ARRAY) {
return TYPE_FLOAT32_ARRAY;
}
if (type === OBJECT_FLOAT64_ARRAY) {
return TYPE_FLOAT64_ARRAY;
}
/* ===== 其它类型（Others） ===== */
// 检测是否为一个 DOM
if ( val.nodeName ) {
// 检测是否为 Element 节点
if ( val.nodeType === 1 ) {
return TYPE_ELEMENT;
}
// 检测是否为 Text 节点
if ( val.nodeType === 3 ) {
return (/\S/).test( val.nodeValue ) ? TYPE_TEXT : TYPE_WHITESPACE;
}
}
else {
// 检测是否为 ArrayLike 类型
if ( typeof val === TYPE_OBJECT && typeof val.length === TYPE_NUMBER && val.length > 0 ) {
// 检测是否为 Arguments 类型
if ( 'callee' in val ) {
return TYPE_ARGUMENTS;
}
// 检测是否为 NodeList 类型
if ( 'item' in val ) {
return TYPE_COLLECTION;
}
}
}
// 其它标准的数据类型
return typeof val;
}
})();

复制代码

yaohaixiao · 发表于 2017-8-5 16:16:06

这里也吐槽一下，最近面试的一些人，开发了3年都4年了，还不知道怎么使用OOP实现继承，甚至要他说10个JS原生操作DOM 的方法都做不上来，上来就跟我说怎么使用VUE遛云云，我都跟他们说好好补补JS基础啊！
这个typeofit，也是JS基础知识的总结，希望对刚接触JS的朋友学习如何判断JS的值类型有帮助，起码你要知道有哪些基础值类型，那些是引用类型的值啊！

boylwf · 发表于 2017-8-7 16:08:37

谢分享，感觉我的js都是烂的一逼

帐号		自动登录	找回密码
密码			注册

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