JS疑惑的数据类型及类型判断方法详解

目录
  • 前言
  • 数据类型
  • 类型判断
    • 一、typeof方法
    • 二、Object.prototype.toString.call()方法
    • 小插曲
    • 三、Array.isArray()
    • 四、obj instanceof Object
  • 结语

前言

关于javascript这门语言的数据类型你了解多少呢?你有什么方法能够快速的判断数据类型呢?如果可以那如何实现类型转换呢?带着这三个问题开始我们今天的学习吧

数据类型

在javascript中数据类型我们一般分为基本数据类型(值类型) 和 引用数据类型(对象类型);

基本数据类型有:

  • number
  • String
  • boolean
  • Null
  • Undefined
  • BigInt
  • Symbol

引用数据类型有:

  • Object(对象)
  • Array(数组)
  • Function(函数)
  • Date等(内置对象)

类型判断

一、typeof方法

typeof 123 // "number"
typeof 'a'  // "string"
typeof true  // "boolean"
typeof undefined // "undefined"
typeof Symbol() // "symbol"
typeof 21n // "bigint"

通过以上这些例子我们可以总结出一个规律: typeof方法可以准确判断出除了Null之外的所有的基本数据类型(注:typeof null // "object" 是javascript这门语言的历史遗留问题,需要记忆),其他六种基本数据类型都能准确判断,所以我们可以用(typeof 变量 === “undefined”)来判断一个变量是否被声明;但是在判断引用类型时typeof智能判断出函数类型,其他的引用类型都返回'object'。 所以我们通常会使用typeof方法来判断基本数据类型。

二、Object.prototype.toString.call()方法

Object.prototype.toString.call()方法,它的返回值是"[ object , 类型]"(注:返回值前面是小写字母,后面是大写字母开头的类型)

Object.prototype.toString.call(123) // "[object Number]"
Object.prototype.toString.call('abc') // "[object String]"
Object.prototype.toString.call(Symbol()) // "[object Symbol]"
Object.prototype.toString.call(21n) // "[object BigInt]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(true) // "[object Boolean]

由此可见Object.prototype.toString.call()方法可以准确判断所有的基本数据类型,那么对引用数据类型呢?

Object.prototype.toString.call({a:1}) // "[object Object]"
Object.prototype.toString.call([1,2]) // "[object Array]"
Object.prototype.toString.call(new Date) // "[object Date]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call(new Error()) // "[object Error]"
Object.prototype.toString.call(/a/g) // "[object RegExp]"--正则表达式
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call(JSON) // "[object JSON]"

所以Object.prototype.toString.call()方法可以识别出javascript这门语言中所有的数据类型(据我所知,上述例子中Math属性和正则严格意义上也不算数据类型,因为可以识别出,所以也放在例子里)。

小插曲

如何使用上述的两种方法优雅的封装一个方法,使得我们可以传入任意数据,直接返回它的数据类型(小写字母的字符串)?

方法一:

function dataType(obj) {
    return Object.prototype.toString.call(obj).slice(8,-1)
    }

方法二:

let dataType = {}
['Boolean', 'Number', 'String', 'Array', 'Function', 'Date', 'RegExp', 'Object',
'Error', 'Undefined', 'Null'].map((item, index) => {
    dataType["[object" + item + "]"] = item.toLowerCase();
})
function type(obj) {
    return typeof obj === 'object' || typeof obj === 'function'
        ? dataTypeObject.prototype.toString.call(obj)]
        || 'object' : typeof obj
}

我们一起来解读一下方法二,首先我们先将数据类型的首字母都转化为小写字母,并在添加为我们创建的dataType对象的属性(toLowerCase() 方法将字符串转换为小写。)

当我们传入一个数据时,首先用typeof去判断是基本数据类型还是引用数据类型,因为typeof null // "object",所以我们的判定条件typeof obj === 'object' || typeof obj === 'function',就把特殊的null当做引用类型,使用Object.prototype.toString.call()方法也能识别出,实现我们想要的效果。

(在学习过程中我们尽可能多去复杂化问题,使得理解更加深刻,方法一实用性较大)

三、Array.isArray()

在数组身上有一种isArray方法可以判断是否为数组类型数据,返回值是布尔类型(true || false)(在其他语言中arr2 = [1, 'abc', true]严格意义上不算数组,但是在javascript中属于数组 )

四、obj instanceof Object

左边放你要判断的内容,右边放类型来进行JS类型判断,只能用来判断复杂数据类型,因为instanceof 是用于检测构造函数(右边)的 prototype 属性是否出现在某个实例对象(左边)的原型链上。

[1,2] instanceof Array  // true
(function(){}) instanceof Function // true
({a:1}) instanceof Object // true
(new Date) instanceof Date // true
实现原理:
function instance_of(L,R){
    let O = R.prototype
    let L = L.__proto__
    while(L !== null){
        if(L === O) return true
        L = L.__proto__
    }
    return false
}
obj instanceof Object方法也可以判断内置对象。

结语

以上就是本期的所有内容,相信此时,判断javascript中的数据类型已经没有什么可以难倒你了,当然判断数据类型的方法不仅这些,但是以上的几种方法(应该)可以解决所有的数据类型判断的问题。

以上就是JS疑惑的数据类型及类型判断方法详解的详细内容,更多关于JS数据类型判断的资料请关注我们其它相关文章!

(0)

相关推荐

  • javaScript中一些常见的数据类型检查校验

    目录 前言 常见的几种数据校验方式 typeof操作符 instanceof constructor call && apply Object.prototype.toString结合Function.prototype.call && apply 其他校验数据类型的方法: 总结 源码地址 前言 在JavaScript中,数据类型分为两大类,一种是基础数据类型,另一种则是复杂数据类型,又叫引用数据类型 基础数据类型:数字Number 字符串String 布尔Boolean

  • JavaScript的引用数据类型你了解多少

    目录 三种传递 1.Object 1.创建对象语法 2.普通对象在内存中的存储方式 2.Array 1.创建数组语法 2.数组的在内存中的存储方式 3.数组常用方法 1. concat:用于拼接为新数组 2. join():用于连接数组的每个元素成为字符串 3. reverse:翻转数组顺序 4. indexOf:查找某个元素在数组中首次出现的索引位置,找不到就是返回-1 5. lastIndexOf:查找某个元素在数组中尾次出现的索引位置,找不到就返回-1 6. sort正序排列 7. sor

  • JavaScript新增的两个原始数据类型详解(Record和Tuple)

    目录 前言 基础写法 可读特性 非唯一性 普通对象和数组的转换 支持扩展运算符 JSON方法扩展 提前体验 应用场景 总结 前言 JavaScript即将推出两个新的数据类型:Record 和 Tuple ,这俩是啥呢?其实就是一个只读的 Object 和 Array,其实在其它语言中已经有类似的数据类型了,例如 Python 中也有 Tuple(元祖)这一类型,作用也是一个只读的数组(在Python里叫只读的列表),一起来了解一下,这个特性是一个第2阶段提案(即差不多稳了),想要提前体验的,文

  • MySQL中JSON字段数据类型详解

    目录 前言 创建JSON值 搜索JSON类型数据 在 JSON 和非 JSON 值之间转换 JSON 值的汇总 总结 前言 JSON 类型是从 MySQL 5.7 版本开始支持的功能,MySQL 支持由RFC 7159定义的本机JSON数据类型,该类型可有效访问 JSON(JavaScript 对象 table 示法)文档中的数据.与将 JSON 格式的字符串存储在字符串列中相比,JSON数据类型具有以下优点: 自动验证存储在JSON列中的 JSON 文档.无效的文档会产生错误. 优化的存储格式

  • JavaScript 中的数据类型Number

    目录 前言 1.浮点数 2.值的范围 3.NaN 4.数值转换 前言 Number 类型使用 IEEE 754 格式表示整数和浮点值(在某些语言中也叫双精度值). IEEE二进制浮点数算术标准; IEEE 754规定了四种表示浮点数值的方式:单精确度(32位).双精确度(64位).延伸单精确度(43比特以上,很少使用)与延伸双精确度(79比特以上,通常以80位实现). js中用的就是双精确度(64位) 不同数值类型有不同的数值字面量格式: 十进制整数 八进制(以 8 为基数) 十六进制(以 16

  • JavaScript那些不经意间发生的数据类型自动转换

    目录 数据类型 自动转换 什么时候会发生自动转换? 对数据类型有期待的表达式和运算符 对象包装 自动转换规则 any->boolean any->number any->string 总结 JavaScript可以自由的进行数据类型转换,也提供了多种显式转换的方式.但是更多的情况下,是由JavaScript自动转换的,当然这些转换遵循着一定的规则,了解数据类型自由转换的规则是非常必要的. 数据类型 聊到数据类型转换,就不得不提到 JavaScript 的数据类型:原始类型( Number

  • JS疑惑的数据类型及类型判断方法详解

    目录 前言 数据类型 类型判断 一.typeof方法 二.Object.prototype.toString.call()方法 小插曲 三.Array.isArray() 四.obj instanceof Object 结语 前言 关于javascript这门语言的数据类型你了解多少呢?你有什么方法能够快速的判断数据类型呢?如果可以那如何实现类型转换呢?带着这三个问题开始我们今天的学习吧 数据类型 在javascript中数据类型我们一般分为基本数据类型(值类型) 和 引用数据类型(对象类型):

  • JS前端常见的竞态问题解决方法详解

    目录 什么是竞态问题 取消过期请求 XMLHttpRequest 取消请求 fetch API 取消请求 axios 取消请求 可取消的 promise 忽略过期请求 封装指令式 promise 使用唯一 id 标识每次请求 「取消」和「忽略」的比较 「取消」更实际 「忽略」更通用 总结 什么是竞态问题 竞态问题,又叫竞态条件(race condition),它旨在描述一个系统或者进程的输出依赖于不受控制的事件出现顺序或者出现时机. 此词源自于两个信号试着彼此竞争,来影响谁先输出. 简单来说,竞

  • C# 为String类型增加方法详解

    namespace MyExtensionMethods { public static class MyExtensions { public static int MyGetLength(this System.String target) { return target.Length; } } } 使用时,需要引入这个名字空间,引用如下: string str = "dafasdf"; int len = str.MyGetLength(); 以上这篇C# 为String类型增加

  • Java postgresql数组字段类型处理方法详解

    在实际开发中遇到postgresql中定义的数组字段,下面解决两个问题,如何定义数组字段的默认值为空格数组,以及如何再java实体类中直接使用数组对象接受数据或把数据存入数据库. 1.在postgresql中定义数组对象及默认值 以字符串你数组为例: 比如一个字段用于存储多张图片的url,可以使用一下sql定义 pictures _varchar NOT NUll default ARRAY[]::character varying[] 2.实体类存入数组到数据库并接受数据库的数组数据 直接定义

  • Java单测void类型的方法详解

    前言 我们在学Java的时候,老师或者一般的书上都写着,Java的基本类型有八种.分别是:byte.int.short.long.float.double.char.boolean.但是,今早我在看Java的圣经--<Thinking in Java>的时候,发现作者在说明数据类型的时候,把void也放上去了.这样就有九种了.百度了一下,有些书也是写的Java有九种基本类型. Java的Sevice层会有很多void类型的方法,比如save*.update*,这类方法只是做一些更新,不会有返回

  • JS查找数组中重复元素的方法详解

    本文实例讲述了JS查找数组中重复元素的方法.分享给大家供大家参考,具体如下: JS的数据类型有一个数组.今天我们就来谈谈对数组的一种处理.相信很多人都遇到过从数组中查找出不重复的元素,但是我遇到的却是从数组中查找出重复的元素. 从js数组中查找出不重复的元素的方法有很多,下面就给大家列举一个: <!DOCTYPE html> <html> <body> <script> Array.prototype.deleteEle=function(){ var ne

  • 解决无法在unicode和非unicode字符串数据类型之间转换的方法详解

    今天用excel导入数据又遇到了-- 错误 0xc02020f6:数据流任务:列"column"无法在 unicode和非unicode字符串数据类型之间转换. 原因:仔细看了一下,发现有些字段是varchar的,而excel中估计都是nvarchar类型. 方法: 1.修改表字段类型为nvarchar. 2.导入一个临时表,再insert*** into *** select ***. 3.直接通过应用程序读入记录集,然后再一条一条insert into --.

  • js 实现一些跨浏览器的事件方法详解及实例

    js实现一些跨浏览器的事件方法 用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: function(element, type, handler) {/* 添加事件 */ if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (ele

  • Swift中非可选的可选值类型处理方法详解

    前言 在我们使用objective-c表示字符串信息的时候,可以用下面方法书写. NSString *str = @"秋恨雪"; str = nil; 因为objective-c是弱类型语言,所以这里的str既可以是具体的字符串也可以是nil.但到了Swift中就不可以了,因为Swift是类型安全的语言,一个String类型的变量不可能既能是具体的字符串,又可以为nil(更严格的说String类型的内容只能是字符串).所以,在Swift中有了可选类型的概念.(其实这一概念也是"

  • JS实现导出Excel的五种方法详解【附源码下载】

    本文实例讲述了JS实现导出Excel的五种方法.分享给大家供大家参考,具体如下: 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <sc

随机推荐