首页 / JAVASCRIPT / js中typeof的用法汇总

js中typeof的用法汇总

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js中typeof的用法汇总，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5645字，纯文字阅读大概需要9分钟。

内容图文

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'
解决办法: 下面的函数可以修复这个问题(只针对这个用例).

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()
能够跨框架的,检测一个对象是否是指定的构造函数的实例的机制
检查某个变量是否已经被声明这样的需求,可能没那么必要有自己的运算符.

内容总结

以上是互联网集市为您收集整理的js中typeof的用法汇总全部内容，希望文章能够帮你解决js中typeof的用法汇总所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/364278.html

来源：【匿名】

【上一篇】关于js内存泄露的一个好例子【下一篇】javascript 怎么调用php方法

更多 ►

【js中typeof的用法汇总】教程文章相关的互联网学习教程文章

QML中的JavaScript用法详解

熟悉JavaScript的应该都了解Netscape公司，一代骄子虽然倒下了，却给后人留下了最为珍贵的产品和经验，在互联网发展史上享有举足轻重的地位，这里就不讲故事了，虽然很精彩，从未被磨灭。QML是对JavaScript的扩展，提供了JS主机环境，用法相似，但有些地方与浏览器/服务器端提供的JS主机环境（如Node.js）是不同的，用起来又有一些限制，下面列举一些常用的方法。1、QML文件中的JS表达式初始化时属性绑定——// Property.qmlimport...

JavaScript键盘事件常见用法实例分析

JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。keyup键盘按键弹起，可以捕获组合键。全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。event.altKey功能键”alt”键是否按下。event.shiftKey功能键”shift”键是否按下。event.keyCode键盘按键键码。event.char...

javascript中闭包的2种经典用法

闭包这个东西，网上有很多介绍资料。个人看了很多，还是一知半解。这里不做理论介绍，直接给出2个例子。代码1：记录函数被调用的次数function a() {var i = 0;function b(){return ++i;}return b; }var c = a(); c();//1 c();//2这种方式类似C语言中的private static变量，能够保持局部变量的内存不释放。代码2：正确给DOM注册事件处理函数<body><input type="button" id="b1" value="1"><input type="button" id="b2" value="2"...

JS中的call()方法和apply()方法用法总结

JS中的call()方法和apply()方法用法总结 : 参考： https://blog.csdn.net/ganyingxie123456/article/details/70855586原文：https://www.cnblogs.com/wfblog/p/9169026.html

JavaScript toFixed 用法【代码】【图】

在JS中进行乘法运算时我们又是会遇到一下情况<input type="text" id="num1" value="" /> * <input type="text" id="num2" value="" /><input type="button" id="tt" value="="/><input id="result" type="text" value="" /> $(function(){$("#tt").click(function(){var num1=$("#num1").val();var num2=$("#num2").val();var result=num1*num2;$("#result").val(result);});});结果：正确的结果是 30.8 此时我们应该用toFixed(...

javascript call apply bind caller callee 的用法

在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。那么他们的区别在哪里的，先看一个例子。 var xw = { name : "小王", gender : "男", age : 24, ...

JavaScript BOM Cookie 的用法【代码】

JavaScript CookieCookie是计算机上存储在小文本文件中的数据。当Web服务器将网页发送到浏览器时，连接将关闭，服务器将忘记用户的所有内容。发明Cookie是为了解决“如何记住用户信息”的问题：当用户访问网页时，他/她的名字可以存储在cookie中。下次用户访问该页面时，cookie会“记住”他/她的名字。Cookie以键值对形式保存，如：username = John Doe当浏览器从服务器请求网页时，属于该页面的cookie将添加到请求中。这样，服务器...

javascript中函数定义调用及封闭，闭包用法总结

1， javascript函数定义调用 function test(){ alert("aaa"); } var a=function(){ alert(‘aa‘); } 2，javascript函数参数 function test(a,b){ return a+b; } 3,javascript封闭函数 (function (){ alert(‘www.96net.com.cn‘); })(); 4, javascript 闭包函数函数里面嵌套函数 function a{ function b(){ } return b; } 原文：https://www.cnblogs.com/96net/...

JavaScript中return的用法详解

1、定义：return 从字面上的看就是返回，官方定义return语句将终止当前函数并返回当前函数的值，可以看下下面的示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function func1(){ while (true){ return 1; } }; alert(func1()); </script></head><body></body></html>可以看到我在函数里面写了个死循环，然后在下...

JS Replace 详细用法讲解

javascript 之 this 用法【代码】

参考视频：http://www.imooc.com/video/6430JavaScript中的this比较灵活，也是让很多初学者摸不到头脑，那么根据在不同的环境下，在同一个函数，不同的调用方式下，那么这个this也有可能是不同的。我们先来看，全局作用于下的this。全局的this(浏览器)console.log(this.document===documet);//trueconsole.log(this===window);//truethis.a=37;console.log(window.a);//37全局作用域下的this一般指的是全局对象，在浏览器里面一般指...

JavaScript随笔之——函数用法【代码】

1、reduce函数用法：$(function(){// arrowMouseOver();Array.prototype.reduce=null; //将内置reduce函数设置为nullvar eleResult=document.getElementById("result");console.log=function(result){var text=document.createTextNode(result);var br=document.createElement("br");//var name=document.createAttribute("data-name"); eleResult.appendChild(text);eleResult.appendChild(br);//br.setAttribute(name,"z...

JavaScript 用法

JavaScript 用法HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<script> 标签如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。<script> 和 </script> 之间的代码行包含了 JavaScript:<script>alert("我的第一个 JavaScript");</script>您无需理解上面的代码。只需明白，浏览器会解释并执行位...

IFE_part2_JavaScript_DOM的具体用法【代码】

// DOM// 为element增加一个样式名为newClassName的新样式 // 另一种方法，element.classList.add(‘newClassName‘),但是存在兼容性问题（不兼容IE10以下） function addClass(element, newClassName) {if (!hasClass(element, newClassName)) {element.className += " " + newClassName;// element.className += " "// element.className += newClassName} }// 移除element中的样式oldClassName // 也可以这样子写 // function r...

javascript中的location.href有很多种用法【代码】

javascript中的location.href有很多种用法，主要如下。self.location.href="/url" 当前页面打开URL页面 location.href="/url" 当前页面打开URL页面 windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。 this.location.href="/url" 当前页面打开URL页面 parent.location.href="/url" 在父页面打开新页面 top.location.href="/url" 在顶层页面打开新页面如果页面中自定义了frame，那么可将parent self top换为自定...

首页 / JAVASCRIPT / js中typeof的用法汇总

js中typeof的用法汇总

内容导读

内容图文

内容总结

内容备注

内容手机端

【js中typeof的用法汇总】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程