一篇文章弄懂js中的typeof用法

目录
  • 基础
  • 返回类型
    • string 和 boolean
    • number 和 bigint
    • symbol
    • undefined
    • function
    • object
    • 其他
  • 常见问题
    • 引用错误
    • typeof null
    • typeof 的局限性
  • 扩展:BigInt 类型
  • 总结

基础

typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式。

因此,掌握该运算符的特点,对于写出好的代码,就会起到很大的帮助作用。

typeof 返回一个字符串,表示该操作值的数据类型,基本语法:

typeof operand
typeof(operand)

可能返回的类型字符串有:string, boolean, number, bigint, symbol, undefined, function, object。

返回类型

将根据可能的返回类型,进行以下的分类介绍,对typeof的使用方法一网打尽。

string 和 boolean

字符串、布尔值分别返回 string、boolean。

包括 String() 和 Boolean()。

typeof '1' // 'string'
typeof String(1) // 'string'
typeof true // 'boolean'
typeof Boolean() // 'boolean'

number 和 bigint

数字返回 number,包括 Number()、NaN 和 Infinity 等,以及 Math 对象下的各个数学常量值。

BigInt 数字类型值返回 bigint,包括 BigInt(1)。

typeof 1 // 'number'
typeof NaN // 'number'
typeof Math.PI // 'number'
typeof 42n // 'bigint'
typeof BigInt(1) // 'bigint'

symbol

symbol 值返回 symbol,包括 Symbol()。

typeof Symbol() // 'symbol'
typeof Symbol('foo') // 'symbol'
typeof Symbol.iterator // 'symbol'

undefined

undefined 本身返回 undefined。

不存在的,或者定义了但未赋初值的变量,都会返回 undefined。

还有 document.all 等浏览器的非标准特性。

typeof undefined // 'undefined'
typeof ttttttt // 'undefined'
typeof document.all // 'undefined'

function

函数返回 function。

包括使用es6的 class 类声明的。

还有各个内置对象 String、Number、BigInt、Boolean、RegExp、Error、Object、Date、Array、Function、Symbol 本身。

以及 Function(),new Function()。

function func () {}
typeof func // 'function'
typeof class cs {} // 'function'
typeof String // 'function'
typeof RegExp // 'function'
typeof new Function() // 'function'

object

对象、数组、null、正则表达式,都返回 object。

包括 Math、JSON 对象本身。

还有使用 new 操作符的数据,除了 Function 以外。

typeof {} // 'object'
typeof [] // 'object'
typeof null // 'object'
typeof /d/ // 'object'
typeof Math // 'object'
typeof new Number(1) // 'object'

其他

关于其他大部分的 javascript关键字,得到的结果值都是 object 或 function。

注:多数小写字母开头的是对象 object,多数大写字母开头的都是方法 function。常见的明确知道的方法不算,如 alert,prompt 等方法

除此以外,还有各js环境下具体实现的宿主对象。

常见问题

引用错误

在 let 和 const 块级作用域变量定义之前,使用 typeof 会抛错 ReferenceError。

因为块级作用域变量,会在头部形成 暂存死区,直到被初始化,否则会报引用错误。

typeof t
let t = 1
// VM327:1 Uncaught ReferenceError: t is not defined
//    at <anonymous>:1:1

如果是使用 var 定义变量,不会报错,返回 undefined 。

有变量提升,不会形成暂时死区。

typeof null

对于 typeof null === 'object' ,记住即可,可能的解释:

在JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由

于null代表的是空指针(大多数平台下值为 0x00),因此,null 的类型标签是 0,typeof null 也因此返回 "object"。

typeof 的局限性

typeof 的局限性,在于无法精确判断出 null、数组、对象、正则 的类型。

所以如果要精准判断,还需要使用其他技术手段,或组合判断。

如下,判断数组类型:

Object.prototype.toString.call([]) // '[object Array]'

[] instanceof Array // true

[].constructor === Array // true

其中,Object.prototype.toString.call 是javascript中用于准确判断数据类型的通用手段。

扩展:BigInt 类型

BigInt 来自于 ES11 增加的一种最新的基础类型,可以用任意精度表示整数。

它提供了一种表示大于 2^53 - 1 整数的方法,能表示任意大的整数。

它是通过在整数末尾附加 n 或调用构造函数 BigInt() 来创建的。

IE 不支持。

10n
BigInt(99) // 99n

注意点:

  • BigInt 能使用运算符 +、*、-、**和%。
  • 除 >>> (无符号右移) 之外的 位操作 也可以支持。因为BigInt 都是有符号的。
  • BigInt 不支持单目 (+) 运算符,会报类型错误。
  • 不能对 BigInt 使用 Math 对象中的方法。
  • BigInt 不能与 Number数字 进行混合计算,否则,将抛出 TypeError。
  • 在将 BigInt 转换为 Boolean 时,它的行为类似 Number数字 。
  • BigInt 变量在转换成 Number 变量时可能会丢失精度。
  • typeof 操作时返回 bigint。
  • 使用 Object、String 等内置对象转换时,类似于 Number数字。
  • BigInt 使用 / 除操作时,带小数的运算会被取整。
  • Number 和 BigInt 可以进行比较,非严格相等。
  • JSON.stringify 处理 BigInt 会引发类型错误。

总结

到此这篇关于js中typeof用法的文章就介绍到这了,更多相关js中typeof用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript中instanceof与typeof运算符的用法及区别详细解析

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符返回一个用来表示表达式的数据类型的字符串. typeof expression ; expression 参数是需要查找类型信息的任意表达式. 说明typeof 是一个一元运算符,放在一个运算数之前. typeof 运算符把类型信息当作字符串返回.typeof 返回值有六种可能: "number" ,"string",

  • Javascript中typeof 用法小结

    在js里用到数组,比如 多个名字相同(的)input, 若是动态生成(的), 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确(的)是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof(的)运算数未定义,返回(的)就

  • js中typeof的用法汇总

    JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,而且还指出了存在的问题以及解决办法. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FOperators%2Ftypeof > type

  • Javascript typeof 用法

    if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof的运算数未定义,返回的就是 "undefined". 运算数为数字 typeof(x) = "number"

  • js判断是否为空和typeof的用法(详解)

    (1)typeof用法 typeof的运算数未定义,返回的就是 "undefined". 运算数为数字 typeof(x) = "number" 字符串 typeof(x) = "string" 布尔值 typeof(x) = "boolean" 对象,数组和null typeof(x) = "object" 函数 typeof(x) = "function" (2)js判断是否为空 v

  • 详解JavaScript中typeof与instanceof用法

    今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefined") 以前用得少,就顺便查了一下关于typeof的那些事 typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: number,boolean,string,function(函数),object(NULL,数组,对象),undefined. 如: alert(ty

  • js中判断变量类型函数typeof的用法总结

    1.作用: typeof 运算符返回一个用来表示表达式的数据类型的字符串. 可能的字符串有:"number"."string"."boolean"."object"."function" 和 "undefined". 2.常用返回值说明 表达式 返回值 typeof undefined 'undefined' typeof null 'object' typeof true 'boole

  • JavaScript中的typeof操作符用法实例

    对一个值使用typeof操作符可能返回下列某个字符串:"undefined"--如果这个值未定义"boolean"--如果这个值是布尔值"string"--如果这个值是字符串"number"--如果这个值是数值"object"--如果这个是对象或null"function"--如果这个值是函数 常用的typeof操作符的返回值包括number.string.boolean.undefin

  • javascript typeof的用法与typeof运算符介绍[详细]第1/2页

    经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof的运算数未定义,返回的就是 "

  • 一篇文章弄懂js中的typeof用法

    目录 基础 返回类型 string 和 boolean number 和 bigint symbol undefined function object 其他 常见问题 引用错误 typeof null typeof 的局限性 扩展:BigInt 类型 总结 基础 typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式. 因此,掌握该运算符的特点,对于写出好的代码,就会起到很大的帮助作用. typ

  • 一篇文章弄懂javascript中的执行栈与执行上下文

    前言 作为一个前端开发人员,弄清楚JavaScript的执行上下文有助于我们理解js中一些晦涩的概念,比如闭包,作用域,变量提升等等. 执行栈 执行栈用于存储代码执行期间创建的所有执行上下文.具有FILO接口,也被称为调用栈. 当JavaScript代码被运行的时候,会创建一个全局上下文,并push到当前执行栈.之后当发生函数调用的时候,引擎会为函数创建一个函数执行上下文并push到栈顶.引擎会先执行调用栈顶部的函数,当函数执行完成后,当前函数的执行上下文会被移除当前执行栈.并移动到下一个上下文

  • 一篇文章弄懂C#中的async和await

    目录 前言 async await 从以往知识推导 创建异步任务 创建异步任务并返回Task 异步改同步 说说 await Task 说说 async Task<TResult> 同步异步? Task封装异步任务 关于跳到 await 变异步 为什么出现一层层的 await 总结 前言 本文介绍async/Task.在学习该知识点过程中,一定要按照每一个示例,去写代码.执行.输出结果,自己尝试分析思路. async 微软文档:使用 async 修饰符可将方法.lambda 表达式或匿名方法指定

  • 一篇文章弄懂Python中所有数组数据类型

    前言 数组类型是各种编程语言中基本的数组结构了,本文来盘点下Python中各种"数组"类型的实现. list tuple array.array str bytes bytearray 其实把以上类型都说成是数组是不准确的.这里把数组当作一个广义的概念,即把列表.序列.数组都当作array-like数据类型来理解. 注意本文所有代码都是在Python3.7中跑的^_^ 0x00 可变的动态列表list list应该是Python最常用到的数组类型了.它的特点是可变的.能动态扩容,可存储

  • 一篇文章弄懂Python中的可迭代对象、迭代器和生成器

    我们都知道,序列可以迭代.但是,你知道为什么吗? 本文来探讨一下迭代背后的原理. 序列可以迭代的原因:iter 函数.解释器需要迭代对象 x 时,会自动调用 iter(x).内置的 iter 函数有以下作用: (1) 检查对象是否实现了 iter 方法,如果实现了就调用它,获取一个迭代器. (2) 如果没有实现 iter 方法,但是实现了 getitem 方法,而且其参数是从零开始的索引,Python 会创建一个迭代器,尝试按顺序(从索引 0 开始)获取元素. (3) 如果前面两步都失败,Pyt

  • 一篇文章弄懂ECMAScript中的操作符

    目录 一元操作符 布尔操作符 乘性操作符 加性操作符 关系操作符 相等操作符 条件操作符 赋值操作符 逗号操作符 总结 一元操作符 只能操作一个值的操作符叫做一元操作符 递增和递减.递增和递减操作符借鉴自C,而且有两个版本:前置型和后置型 前置型:操作符位于要操作的变量之前.执行前置型递增和递减操作时,变量的值都是在语句被求值以前改变的 var age = 29; var anotherAge = --age + 2 console.log(age) // 28 console.log(anot

  • 一篇文章弄懂Python中的内建函数

    目录 前言 A类 B类 C类 D类 E类 F类 G类 H类 I类 L类 M类 R类 S类 T类 总结 前言 python内建函数指的是python自带的函数,这种函数不需要定义,并且不同的内建函数具有不同的功能,可以直接使用. A类 abs() 函数,返回数字的绝对值. 语法:abs(x) 参数 x - 数值表达式 函数返回 x(数字)的绝对值; 例子1: all() 函数,判断给定的可迭代参数 ble 中的元素是否都为 True,若是返回 True,反之返回 False; 元素除了是 0.空.

  • 一篇文章弄懂Mybatis中#和$的区别

    目录 前言 一:下面我们写个关于"#"的个sql,看能不能注入. 1.正常传参 2.拼接传参 二:下面我们写个关于"$"的个sql,看能不能注入. 1.正常传参 2.拼接传参 总结 前言 在学校的时候,想必大家肯定听老师讲过,在mybatis中,配置参数要用#,不要用$符号.因为$不安全,容易被sql注入.讲是这么讲,但是如何注入的,大家一起来看看吧. 一:下面我们写个关于"#"的个sql,看能不能注入. <select id="

  • 一篇文章弄懂Java8中的时间处理

    目录 前言 LocalDateTime ZonedDateTime Instant 总结 前言 java8借鉴了第三方日期库joda很多的优点 java.time包 类名 描述 Instant 时间戳 Duration 持续时间,时间差 LocalDate 只包含日期,比如:2020-05-20 LocalTime 只包含时间,比如:13:14:00 LocalDateTime 包含日期和时间,比如:2020-05-20 13:14:00 Period 时间段 ZoneOffset 时区偏移量,

  • 一篇文章弄懂MySQL查询语句的执行过程

    前言 需要从数据库检索某些符合要求的数据,我们很容易写出 Select A B C FROM T WHERE ID = XX  这样的SQL,那么当我们向数据库发送这样一个请求时,数据库到底做了什么? 我们今天以MYSQL为例,揭示一下MySQL数据库的查询过程,并让大家对数据库里的一些零件有所了解. MYSQL架构 mysql架构 MySQL 主要可以分为 Server 层和存储引擎层. Server层 包括连接器.查询缓存.分析器.优化器.执行器等,所有跨存储引擎的功能都在这一层实现,比如存

随机推荐