javascript学习-类型判断
javascript学习-类型判断
1.类型判断的的武器
javascript中用于类型判断的武器基本上有以下几种：
- 严格相等===，用来判断null，undefined，true，false这种有限值的数据类型很好用，唯一需要注意的是NaN !== NaN
- typeof运算符，用来判断其余的基本类型很好用
- Object.prototype.toString，用来判断对象类型很好用
2.类型判断的实现
了解了我们手中的武器，代码是非常简单了。当然了，这些函数都是自己测试时用的，不能直接用于商业库中，毕竟很多兼容性等细节问题没有考虑：
// isType function function _isNumber(value) { return typeof value === "number"; } function _isString(value) { return typeof value === "string"; } function _isBoolean(value) { return typeof value === "boolean"; } function _isUndefined(value) { // return typeof value === "undefined"; return value === (void 0); } function _isNull(value) { return value === null; } function _isPrimitive(value) { return _isNumber(value) || _isString(value) || _isBoolean(value) || _isNull(value) || _isUndefined(value); } function _isZero(value) { return value === 0; } // Is the given value `NaN`? (NaN is the only number which does not equal itself). function _isNaN(value) { return _isNumber(value) && value !== value; } function _isInfinity(value) { return value === Infinity || value === -Infinity; } function _isFinity(value) { return _isNumber(value) && !_isInfinity(value) && !_isNaN(value); } function _isObject(value) { return !_isPrimitive(value); } function _isArray(value) { // return Array.isArray(value); return Object.prototype.toString.call(value) === '[object Array]'; } function _isFunction(value) { return Object.prototype.toString.call(value) === '[object Function]'; } function _isRegExp(value) { return Object.prototype.toString.call(value) === '[object RegExp]'; } function _isDate(value) { return Object.prototype.toString.call(value) === '[object Date]'; } function _isError(value) { return Object.prototype.toString.call(value) === '[object Error]'; } function _isNumberObj(value) { return Object.prototype.toString.call(value) === '[object Number]' && !_isNumber(value); } function _isStringObj(value) { return Object.prototype.toString.call(value) === '[object String]' && !_isString(value); } function _isBooleanObj(value) { return Object.prototype.toString.call(value) === '[object Boolean]' && !_isBoolean(value); } function _isArguments(value) { return Object.prototype.toString.call(value) === '[object Arguments]'; }
3.类型判断的测试
基于我们的学习传统，一段测试用例那是必须的。不过首先我们需要准备测试数据：
var caseDatas = [ // number { sample : NaN }, { sample : 0 }, { sample : +0 }, { sample : -0 }, { sample : 1 }, { sample : 012 }, { sample : 0x12 }, { sample : 1.2 }, { sample : 1.217e2 }, { sample : Infinity }, { sample : -1 }, { sample : -012 }, { sample : -0x12 }, { sample : -1.2 }, { sample : -1.217e2 }, { sample : -Infinity }, // string { sample : "" }, { sample : "abc" }, { sample : "1abc" }, { sample : "NaN" }, { sample : "0" }, { sample : "+0" }, { sample : "-0" }, { sample : "1" }, { sample : "012" }, { sample : "0x12" }, { sample : "1.2" }, { sample : "1.217e2" }, { sample : "Infinity" }, { sample : "-1" }, { sample : "-012" }, { sample : "-0x12" }, { sample : "-1.2" }, { sample : "-1.217e2" }, { sample : "-Infinity" }, // boolean { sample : true }, { sample : false }, // remain primitive { sample : null }, { sample : undefined }, // built-in function { sample : new Object() }, { sample : new Array() }, { sample : new Function() }, { sample : new RegExp() }, { sample : new Date() }, { sample : new Error() }, { sample : new Number() }, { sample : new String() }, { sample : new Boolean() }, // built-in literals { sample : [] }, { sample : [1] }, { sample : [1,2,3] }, { sample : {} }, { sample : {name : "wgs", age : 18} }, { sample : function() {} }, { sample : function(a, b) { return a + b; } }, ];
基本上把我们可能想到的数据都加上去了，当然你也可以自己继续添加。
至于为什么用一个对象的形式对测试数据进行了一次包装？主要是为了兼容一般的测试用例数据，我们现在的测试用例不需要检测测试结果，如果需要的话，那么测试用例数据一般是：
{ sample : NaN, result : false }
下面来写测试函数：
function testCase(caseData, fn) { // 得到测试数据的采样值 var sample = caseData.sample; // 得到判断函数的结果 var isOk = fn(sample); if (isOk) { // 如果判断是这种类型，用_varDesc函数得到值的描述 var desc = _varDesc(sample); // 添加到测试节点上，这里当然都是true的 assert(isOk, desc); } }
下面写测试代码，对我们的类型判断函数逐个进行测试：
test("_isNumber", function() {
caseDatas.forEach(function(value) {
testCase(value, _isNumber);
});
});
test("_isString", function() {
caseDatas.forEach(function(value) {
testCase(value, _isString);
});
});
test("_isBoolean", function() {
caseDatas.forEach(function(value) {
testCase(value, _isBoolean);
});
});
test("_isUndefined", function() {
caseDatas.forEach(function(value) {
testCase(value, _isUndefined);
});
});
test("_isNull", function() {
caseDatas.forEach(function(value) {
testCase(value, _isNull);
});
});
test("_isZero", function() {
caseDatas.forEach(function(value) {
testCase(value, _isZero);
});
});
test("_isNaN", function() {
caseDatas.forEach(function(value) {
testCase(value, _isNaN);
});
});
test("_isInfinity", function() {
caseDatas.forEach(function(value) {
testCase(value, _isInfinity);
});
});
test("_isFinity", function() {
caseDatas.forEach(function(value) {
testCase(value, _isFinity);
});
});
test("_isObject", function() {
caseDatas.forEach(function(value) {
testCase(value, _isObject);
});
});
test("_isArray", function() {
caseDatas.forEach(function(value) {
testCase(value, _isArray);
});
});
test("_isFunction", function() {
caseDatas.forEach(function(value) {
testCase(value, _isFunction);
});
});
test("_isRegExp", function() {
caseDatas.forEach(function(value) {
testCase(value, _isRegExp);
});
});
test("_isDate", function() {
caseDatas.forEach(function(value) {
testCase(value, _isDate);
});
});
test("_isError", function() {
caseDatas.forEach(function(value) {
testCase(value, _isError);
});
});
test("_isNumberObj", function() {
caseDatas.forEach(function(value) {
testCase(value, _isNumberObj);
});
});
test("_isStringObj", function() {
caseDatas.forEach(function(value) {
testCase(value, _isStringObj);
});
});
test("_isBooleanObj", function() {
caseDatas.forEach(function(value) {
testCase(value, _isBooleanObj);
});
});
结果是html的，但是我不知道怎么插入博客中，只好最笨的方式来截图了：
结果当然是测试通过了，如果不通过，我早就悄悄的改了，呵呵。
4.测试数据的显示
本来javascript中如何显示一个值JSON.stringify之类的函数已经考虑到了。但是这玩意毕竟是给机器看的，而不是给人看的，我不满意的主要是：
- 对undefined返回undefined，而不是一个字符串，想想也能忍受
- 对函数返回undefined，你给我个函数名不是更好吗？
- 对NaN，Infinity直接返回null，这个不能忍了
既然你不提供，那我就自己来吧，所以就有了下面的函数_varDesc，之所以用_开头是为了避免名称冲突，毕竟这个小玩意主要是为了自己用着方便，直接放在全局对象中了，就没必要弄个即时函数啥的吧。
function _varDesc(value) { var ret = ""; if (_isNumber(value)) { ret = "number({0})".fmt(value); } else if (_isString(value)) { ret = "string(\"{0}\")".fmt(value); } else if (_isBoolean(value)) { ret = "boolean({0})".fmt(value); } else if (_isNull(value)) { ret = "null".fmt(value); } else if (_isUndefined(value)) { ret = "undefined"; } else if (_isArray(value)) { ret = "Array({0})".fmt(JSON.stringify(value)); } else if (_isFunction(value)) { ret = "Function({0})".fmt(value.name); } else if (_isRegExp(value)) { ret = "Regexp({0})".fmt(value.toString()); } else if (_isDate(value)) { ret = "Date({0})".fmt(value.toString()); } else if (_isError(value)) { ret = "Error({0})".fmt(value.toString()); } else if (_isNumberObj(value)) { ret = "Number({0})".fmt(value.toString()); } else if (_isStringObj(value)) { ret = "String(\"{0}\")".fmt(value.toString()); } else if (_isBooleanObj(value)) { ret = "Boolean({0})".fmt(value.toString()); } else if (_isObject(value)) { ret = "Object({0})".fmt(JSON.stringify(value)); } else { ret = "Unknown"; } return ret; }
fmt函数是为了弥补javascript中字符串没有format函数的小缺憾。当然了，这是简化版，充其量就是个正则表达式替换，根本没有考虑显示宽度，显示精度等复杂的格式控制。
String.prototype.fmt = function(){ var args = arguments; return this.replace(/\{(\d+)\}/g, function(m, i){ return args[i]; }); }
最后，附一个JSON.stringify函数的测试数据吧，别说我是冤枉它的：
var caseDatas = [ // number { sample : NaN, result : "null" }, { sample : 0, result : "0" }, { sample : +0, result : "0" }, { sample : -0, result : "0" }, { sample : 1, result : "1" }, { sample : 012, result : "10" }, { sample : 0x12, result : "18" }, { sample : 1.2, result : "1.2" }, { sample : 1.217e2, result : "121.7" }, { sample : Infinity, result : "null" }, { sample : -1, result : "-1" }, { sample : -012, result : "-10" }, { sample : -0x12, result : "-18" }, { sample : -1.2, result : "-1.2" }, { sample : -1.217e2, result : "-121.7" }, { sample : -Infinity, result : "null" }, // string { sample : "", result : '""' }, { sample : "abc", result : '"abc"' }, { sample : "1abc", result : '"1abc"' }, { sample : "NaN", result : '"NaN"' }, { sample : "0", result : '"0"' }, { sample : "+0", result : '"+0"' }, { sample : "-0", result : '"-0"' }, { sample : "1", result : '"1"' }, { sample : "012", result : '"012"' }, { sample : "0x12", result : '"0x12"' }, { sample : "1.2", result : '"1.2"' }, { sample : "1.217e2", result : '"1.217e2"' }, { sample : "Infinity", result : '"Infinity"' }, { sample : "-1", result : '"-1"' }, { sample : "-012", result : '"-012"' }, { sample : "-0x12", result : '"-0x12"' }, { sample : "-1.2", result : '"-1.2"' }, { sample : "-1.217e2", result : '"-1.217e2"' }, { sample : "-Infinity", result : '"-Infinity"' }, // boolean { sample : true, result : "true" }, { sample : false, result : "false" }, // remain primitive { sample : null, result : "null" }, { sample : undefined, result : undefined }, // built-in function { sample : new Object(), result : "{}" }, { sample : new Array(), result : "[]" }, { sample : new Function(), result : undefined }, { sample : new RegExp(), result : "{}" }, { sample : date, result : '"2016-12-18T00:00:00.000Z"' }, { sample : new Error(), result : "{}" }, { sample : new Number(), result : "0" }, { sample : new String(), result : '""' }, { sample : new Boolean(), result : "false" }, // built-in literals { sample : [], result : "[]" }, { sample : [1], result : "[1]" }, { sample : [1,2,3], result : "[1,2,3]" }, { sample : {}, result : "{}" }, { sample : person, result : '{"name":"wgs","age":18}' }, { sample : function() {}, result : undefined }, { sample : add, result : undefined }, ];
