JavaScript之typeof、typeof()解说

经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. 

if(document.mylist.length != "undefined" ) {} 这个用法有误. 

正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 

或 if( !isNaN(document.mylist.length) ) {} 

typeof的运算数未定义,返回的就是 "undefined". 

运算数为数字 typeof(x) = "number" 

字符串 typeof(x) = "string" 

布尔值 typeof(x) = "boolean" 

对象,数组和null typeof(x) = "object" 

函数 typeof(x) = "function" 

typeof 运算符返回一个用来表示表达式的数据类型的字符串。 
可能的字符串有："number"、"string"、"boolean"、"object"、"function" 和 "undefined"。 
如： 
alert(typeof (123));//typeof(123)返回"number" 
alert(typeof ("123"));//typeof("123")返回"string"


typeof运算符介 绍：
typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。
它返回值是一个字符串，该字符串说明运算数的类型。

你 知道下面typeof运算的结果吗？

typeof(1);
typeof(NaN);
typeof(Number.MIN_VALUE);
typeof(Infinity);
typeof("123");
typeof(true);
typeof(window);
typeof(document);
typeof(null);
typeof(eval);
typeof(Date);
typeof(sss);
typeof(undefined);

看 看你会几个？

如果看了以后，不是很明白的话，请看下面（明白的人就不用往下看了）：
typeof是一个一元运算符，它返回的结果 始终是一个字符串，对不同的操作数，它返回不同的结果。
具体的规则如下：
一、对于数字类型的操作数而言， typeof 返回的值是 number。比如说：typeof(1)，返回的值就是number。
上面是举的常规数字，对于非常规的数字类型而言，其结果返回的也是number。比如typeof(NaN)，NaN在
JavaScript中代表的是特殊非数字值，虽然它本身是一个数字类型。
在JavaScript中，特殊的数字类型还有几种：
Infinity 表示无穷大特殊值
NaN　　　　　　　　　　　　特殊的非数字值
Number.MAX_VALUE　　　　　可表示的最大数字
Number.MIN_VALUE　　　　　可表示的最小数字（与零最接近）
Number.NaN　　　　　 　　　特殊的非数字值
Number.POSITIVE_INFINITY　表示正无穷大的特殊值
Number.NEGATIVE_INFINITY  表 示负无穷大的特殊值

以上特殊类型，在用typeof进行运算进，其结果都将是number。

二、对于字符串类型， typeof 返回的值是 string。比如typeof("123")返回的值是string。 
三、对于布尔类型， typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。
四、对于对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。
五、 对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。
六、如 果运算数是没有定义的（比如说不存在的变量、函数或者undefined），将返回undefined。比如：typeof(sss)、typeof(undefined)都返回undefined。

看完了六条规则，再回头看一下，是不是很简单了……

下面 我们将用程序代码验证一下：

<script>
document.write ("typeof(1): "+typeof(1)+"<br>");
document.write ("typeof(NaN): "+typeof(NaN)+"<br>");
document.write ("typeof(Number.MIN_VALUE): "+typeof(Number.MIN_VALUE)+"<br>")
document.write ("typeof(Infinity): "+typeof(Infinity)+"<br>")
document.write ("typeof("123"): "+typeof("123")+"<br>")
document.write ("typeof(true): "+typeof(true)+"<br>")
document.write ("typeof(window): "+typeof(window)+"<br>")
document.write ("typeof(document): "+typeof(document)+"<br>")
document.write ("typeof(null): "+typeof(null)+"<br>")
document.write ("typeof(eval): "+typeof(eval)+"<br>")
document.write ("typeof(Date): "+typeof(Date)+"<br>")
document.write ("typeof(sss): "+typeof(sss)+"<br>")
document.write ("typeof(undefined): "+typeof(undefined)+"<br>")
</script>

 

JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,而且还指出了存在的问题以及解决办法.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FOperators%2Ftypeof

    > typeof undefined
    'undefined'
    > typeof null // well-known bug
    'object'
    > typeof true
    'boolean'
    > typeof 123
    'number'
    > typeof "abc"
    'string'
    > typeof function() {}
    'function'
    > typeof {}
    'object'
    > typeof []
    'object'
    > typeof unknownVariable
    'undefined'

1.检查一个变量是否存在,是否有值.
typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候.例如:

> typeof undeclaredVariable === "undefined" true > var declaredVariable; > typeof declaredVariable 'undefined' > typeof undefined 'undefined'
还有其他办法检测某个值是否是undefined:

> var value = undefined; > value === undefined true
但这种方法如果使用在一个未声明的变量上的时候,就会抛出异常,因为只有typeof才可以正常检测未声明的变量的同时还不报错:

> undeclaredVariable === undefined ReferenceError: undeclaredVariable is not defined
注意:未初始化的变量,没有被传入参数的形参,不存在的属性,都不会出现上面的问题,因为它们总是可访问的,值总是undefined:

> var declaredVariable; > declaredVariable === undefined true > (function (x) { return x === undefined }()) true > ({}).foo === undefined true
译者注:因此,如果想检测一个可能没有被声明的全局变量是否存在,也可以使用 if(window.maybeUndeclaredVariable){}

问题: typeof在完成这样的任务时显得很繁杂.

解决办法: 这样的操作不是很常见,所以有人觉的没必要再找更好的解决办法了.不过也许有人会提出一个专门的操作符:

> defined undeclaredVariable false > var declaredVariable; > defined declaredVariable false
或者,也许有人还需要一个检测变量是否被声明的操作符:

> declared undeclaredVariable false > var declaredVariable; > declared declaredVariable true
译者注:在perl里,上面的defined操作符相当于defined(),上面的declared操作符相当于exists(),

2.判断一个值不等于undefined也不等于null
问题:如果你想检测一个值是否被定义过(值不是undefined也不是null),那么你就遇到了typeof最有名的一个怪异表现(被认为是一个bug):typeof null返回了"object":

> typeof null 'object'
译者注:这只能说是最初的JavaScript实现的bug,而现在标准就是这样规范的.V8曾经修正并实现过typeof null === "null",但最终证明不可行.http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null

解决办法: 不要使用typeof来做这项任务,用下面这样的函数来代替:

function isDefined(x) { return x !== null && x !== undefined; }
另一个可能性是引入一个“默认值运算符”,在myValue未定义的情况下,下面的表达式会返回defaultValue:

myValue ?? defaultValue
上面的表达式等价于:

(myValue !== undefined && myValue !== null) ? myValue : defaultValue
又或者:

myValue ??= defaultValue
其实是下面这条语句的简化:

myValue = myValue ?? defaultValue
当你访问一个嵌套的属性时,比如bar,你或许会需要这个运算符的帮助:

obj.foo.bar
如果obj或者obj.foo是未定义的,上面的表达式会抛出异常.一个运算符.??可以让上面的表达式在遍历一层一层的属性时,返回第一个遇到的值为undefined或null的属性:

obj.??foo.??bar
上面的表达式等价于:

(obj === undefined || obj === null) ? obj : (obj.foo === undefined || obj.foo === null) ? obj.foo : obj.foo.bar

3.区分对象值和原始值
下面的函数用来检测x是否是一个对象值:

function isObject(x) { return (typeof x === "function" || (typeof x === "object" && x !== null)); }
问题: 上面的检测比较复杂,是因为typeof把函数和对象看成是不同的类型,而且typeof null返回"object".

解决办法: 下面的方法也经常用于检测对象值：

function isObject2(x) { return x === Object(x); }
警告:你也许认为这里可以使用instanceof Object来检测,但是instanceof是通过使用使用一个对象的原型来判断实例关系的,那么没有原型的对象怎么办呢:

> var obj = Object.create(null); > Object.getPrototypeOf(obj) null
obj确实是一个对象,但它不是任何值的实例:

> typeof obj 'object' > obj instanceof Object false
在实际中,你可能很少遇到这样的对象,但它的确存在,而且有它的用途.

译者注:Object.prototype就是一个默认存在的,没有原型的对象

>Object.getPrototypeOf(Object.prototype)null>typeof Object.prototype'object'>Object.prototype instanceof Object false

4.原始值的类型是什么?
typeof是最好的用来查看某个原始值的类型的方式.

> typeof "abc" 'string' > typeof undefined 'undefined'
问题: 你必须知道typeof null的怪异表现.

> typeof null // 要小心! 'object'
解决办法: 下面的函数可以修复这个问题(只针对这个用例).

function getPrimitiveTypeName(x) { var typeName = typeof x; switch(typeName) { case "undefined": case "boolean": case "number": case "string": return typeName; case "object": if (x === null) { return "null"; } default: // 前面的判断都没通过 throw new TypeError("参数不是一个原始值: "+x); } }

更好的解决办法: 实现一个函数getTypeName(),除了可以返回原始值的的类型,还可以返回对象值的内部[[Class]]属性.这里讲了如何实现这个函数(译者注:jQuery中的$.type就是这样的实现)

5.某个值是否是函数
typeof可以用来检测一个值是否是函数.> typeof function () {} 'function' >  typeof Object.prototype.toString 'function'

原则上说,instanceof Function也可以进行这种需求的检测.乍一看,貌似写法还更加优雅.但是,浏览器有一个怪癖:每一个框架和窗口都有它自己的全局变量.因此,如果你将某个框架中的对象传到另一个框架中,instanceof就不能正常工作了,因为这两个框架有着不同的构造函数.这就是为什么ECMAScript5中会有Array.isArray()方法的原因.如果有一个能够跨框架的,用于检查一个对象是否是给定的构造函数的实例的方法的话,那会很好.上述的getTypeName()是一个可用的变通方法,但也许还有一个更根本的解决方案.

6.综述
下面提到的,应该是目前JavaScript中最迫切需要的,可以代替一些typeof目前职责的功能特性:

isDefined() (比如Object.isDefined()): 可以作为一个函数或者一个运算符
isObject()
getTypeName()
能够跨框架的,检测一个对象是否是指定的构造函数的实例的机制
检查某个变量是否已经被声明这样的需求,可能没那么必要有自己的运算符.