美文网首页
JavaScript基础(三)typeof操作符

JavaScript基础(三)typeof操作符

作者: 前端开发爱好者 | 来源:发表于2019-02-28 19:25 被阅读0次

    typeof操作符

    typeof操作符返回一个字符串,表示未经计算的操作数的类型

    typeof operand
    typeof (operand)
    
    类型 结果
    undefined "undefined"
    null "object"
    Boolean "boolean"
    Number "number"
    String "string"
    Symbol "symbol"
    宿主对象(Js环境提供) Implementation-dependent
    函数对象 "function"
    其他对象 "object"
    // Numbers
    typeof 37 === 'number';
    typeof 3.14 === 'number';
    typeof Math.LN2 === 'number';
    typeof Infinity === 'number';
    typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写
    typeof Number(1) === 'number'; // 但不要使用这种形式!
    
    // Strings
    typeof "" === 'string';
    typeof "bla" === 'string';
    typeof (typeof 1) === 'string'; // typeof总是返回一个字符串
    typeof String("abc") === 'string'; // 但不要使用这种形式!
    
    // Booleans
    typeof true === 'boolean';
    typeof false === 'boolean';
    typeof Boolean(true) === 'boolean'; // 但不要使用这种形式!
    
    // Symbols
    typeof Symbol() === 'symbol';
    typeof Symbol('foo') === 'symbol';
    typeof Symbol.iterator === 'symbol';
    
    // Undefined
    typeof undefined === 'undefined';
    typeof declaredButUndefinedVariable === 'undefined';
    typeof undeclaredVariable === 'undefined'; 
    
    // Objects
    typeof {a:1} === 'object';
    
    // 使用Array.isArray 或者 Object.prototype.toString.call
    // 区分数组,普通对象
    typeof [1, 2, 4] === 'object';
    
    typeof new Date() === 'object';
    
    // 下面的容易令人迷惑,不要使用!
    typeof new Boolean(true) === 'object';
    typeof new Number(1) === 'object';
    typeof new String("abc") === 'object';
    
    // 函数
    typeof function(){} === 'function';
    typeof class C{} === 'function'
    typeof Math.sin === 'function';
    typeof new Function() === 'function';
    

    null

    在 JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针(大多数平台下值为 0x00),因此,null的类型标签也成为了 0,typeof null就错误的返回了"object"。(reference)

    使用new操作符

    // All constructor functions while instantiated with 'new' keyword will always be typeof 'object'
    var str = new String('String');
    var num = new Number(100);
    
    typeof str; // It will return 'object'
    typeof num; // It will return 'object'
    
    // But there is a exception in case of Function constructor of Javascript
    
    var func = new Function();
    
    typeof func; // It will return 'function'
    

    语法中的括号

    // Parentheses will be very much useful to determine the data type for expressions.
    var iData = 99;
    
    typeof iData + ' Wisen'; // It will return 'number Wisen'
    typeof (iData + ' Wisen'); // It will return 'string'
    

    正则表达式

    对正则表达式字面量的类型判断在某些浏览器中不符合标准:

    typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1
    typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAScript 5.1
    

    暂存死区

    块级作用域 let const,在声明之前进行typeof操作会抛出一个ReferenceError。块级作用域在块的头部处于"暂时性死区“,知道被初始化,在这期间访问变量会引发错误。

    例外

    typeof document.all === 'undefined'
    

    IE

    在IE 6,7和8上,很多宿主对象是对象而不是函数。例如:

    typeof alert === 'object'
    

    常见问题

    1. typeof 的返回值总共有多少个?

    答:"number","string","boolean","undefined","object","function","symbol"这7个返回值

    2. typeof 为什么要区分object和function?

    答:函数在ECMAScript中是对象,不是一种数据类型,函数还包含一些特殊属性,因此有必要使用typeof来区分。实际使用过程中有这个需求。

    3.typeof的不足之处有哪些

    答:typeof操作符不能准确的区分对象,数组,正则。返回值为"object"。部分早期浏览器版本对正则对象返回"function"。IE67中typeof alert //object,其他浏览器type alert //function

    4.判断下列表达式的值

    typeof 1/0   //NaN
    typeof (1/0)  //number
    typeof typeof 1/0 // NaN
    typeof typeof (1/0) // string
    typeof (typeof 1/0) // number
    

    5.用typeof来判断对象的潜在陷阱是什么

    答:JavaScript对于typeof []==='object',typeof null === 'object',typeof function(){}==='function',所以在使用typeof来做判断时需要考虑这些情况。当然也可以选择替代方法,Object.prototype.toString.call([])来进行判断,返回值类似于[object Array],可以加上正则处理为 Object.prototype.toString.call([]]).replace(/\[object\s|\]/g,'')

    参考资料:

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof

    相关文章

      网友评论

          本文标题:JavaScript基础(三)typeof操作符

          本文链接:https://www.haomeiwen.com/subject/kopkuqtx.html