重学JS: 数据类型及类型检测

why_rookie 发布于2019-08-23 18:14 / 2325人阅读

摘要：数据类型七种内置类型空值未定义布尔值数字字符串对象符号除对象之外，其他统称为基本类型类型检测运算符后面跟操作数，或者，返回一个类型的字符串值。运算符用于测试构造函数的属性是否出现在对象的原型链中的任何位置。

数据类型

JavaScript七种内置类型：

空值（null）

未定义（undefined）

布尔值（boolean）

数字（number）

字符串（string）

对象（object）

符号（symbol）

除对象之外，其他统称为基本类型

类型检测 typeof

typeof运算符后面跟操作数，typeof operand 或者 typeof (operand)，返回一个类型的字符串值。

示例:

typeof undefined === "undefined" // true
typeof true === "boolean" // true
typeof 1 === "number" // true
typeof "test" === "string" // true
typeof {} === "object" // true
typeof Symbol() === "symbol" // true

特殊示例：

typeof null === "object"
typeof function () {} === "function"
typeof [1] === "object"

typeof 对null的处理有问题，正确的结果应该是"null"，但是实际返回的是"object"，这个bug由来已久，也许以后也不会修复。

typeof function() {}返回的是一个"function"，似乎function也是JavaScript的一个内置对象，实际上函数是一个可调用对象，它有一个内部属性[[Call]]，该属性使其可以被调用。

typeof [1]返回"object"，说明数组也是object类型，实际上它是object的一个子类型，和普通对象通过字符串键索引不同，数组通过数字按顺进行索引。

总结表格：

instance

typeof是检测基本数据类型的最佳工具，但是检测引用类型的值时作用不大，都会返回"object"，这时候就需要instance操作符了。instance运算符用于测试构造函数的protytpe属性是否出现在对象的原型链中的任何位置。

用法：object instanceof constructor，object: 要检测的对象，constructor某个构造函数

示例:

function A() {}
function B() {}
function C() {}
A.prototype = new C()
const a = new A()
console.log(a instanceof A) // a是A类的实例 true
console.log(a instanceof C) // A继承C true
console.log(a instanceof B) // a不是A类的实例 false
console.log(a instanceof Object) // Object实所有引用类型的父类 true
console.log(A.prototype instanceof Object) // true
A.prototype = {}
a1 = new A()
console.log(a1 instanceof A) // true
console.log(a instanceof A) // false
const date = new Date()
console.log(date instanceof Date) // true

原理

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
 var O = R.prototype;// 取 R 的显示原型
 L = L.__proto__;// 取 L 的隐式原型
 while (true) { 
   if (L === null) 
     return false; 
   if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true 
     return true; 
   L = L.__proto__; 
 } 
}

想要对instanceof运算符有更加深入的了解车票

toString

toString()方法返回一个表示该对象的字符串，每个对象都有一个toString()方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString()方法被每个Object对象继承。如果此方法在自定义对象中未被覆盖，toString()返回"[object type]"，其中type是对象的类型

示例

const toString = Object.prototype.toString
console.log(toString.call(null)) // [object Null]
console.log(toString.call(undefined)) // [object Undefined]
console.log(toString.call(new String)) // [object String]
console.log(toString.call(Function)) // [object Function]
console.log(toString.call(new Date)) // [object Date]
console.log(toString.call("new Date")) // [object String]
console.log(toString.call(["a"])) // [object Array]

从示例可以看出，Object.prototype.toString.call()可以准确表示数值的类型

总结

typeof运算符适合检测基本数据类型，且返回类型的字符串

instanceof运算符适合检测引用类型值

toString()返回对象的类型，可以准确判断数值的类型

海外云主机私有云 js检测数据类型 js 检测数据类型 js检测测数据类型 Linux硬盘类型及容量

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104902.html

1. 重新认识 JavaScript 类型

摘要：重新认识类型数据类型重学前端系列笔记前言最新在看大神的专栏重学前端，感慨颇多，收益也颇多。实际上是能够表示的最小精度。也可以是对象类型这个类型是新增的一个类型。主要用于解释字符集等。 title: 1. 重新认识 JavaScript 类型date: 2019-03-27 11:12:47 +0800tags: [JavaScript数据类型]categories: 重学前端系列笔记...

Drinkey 2019-08-23 17:58 评论0 收藏0
【重学前端专栏学习笔记】建立系统的知识架构体系

摘要：首先一上来就分享了两个学习方法建立知识架构追本溯源。列一份前端知识架构图在这章节中，分享了本专栏要学习的知识架构浏览器的实现原理和前端工程实践四个模块。最后一个是前端工程实践，从性能工具链持续集成搭建系统架构与基础库五个方面讲起。明确你的前端学习路线自己特别喜欢屯课，看着自己买的课，有种满足感，仿佛知识都是我的了，翻看极客时间买的课，决定这段时间把重学前端专栏学习一遍。从周六到今...

shaonbean 2019-08-26 10:49 评论0 收藏0
重学JS: 隐式强制类型转换

摘要：隐式强制类型转换指的是那些隐藏的强制类型转换，副作用也不是很明显，事实上，只要自己觉得不够明显的强制类型转换都可以算作隐式强制类型转换，接下来，此文将会介绍几种常见的隐式类型转换。隐式强制类型转换指的是那些隐藏的强制类型转换，副作用也不是很明显，事实上，只要自己觉得不够明显的强制类型转换都可以算作隐式强制类型转换，接下来，此文将会介绍几种常见的隐式类型转换。加法操作符转换规则： ...

Fourierr 2019-08-23 18:31 评论0 收藏0
重学前端学习笔记（六）--JavaScript类型有哪些你不知道的细节？

摘要：的码点被称为基本字符区域。关于的介绍，我准备用文档阮一峰来做一些介绍，具体的可以参考文档引入的原因的对象属性名都是字符串，这容易造成属性名的冲突。其他的一些属性可以去看文档阮一峰注意函数前不能使用命令，否则会报错。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完...

Lsnsh 2019-08-02 16:15 评论0 收藏0
重学前端学习笔记（六）--JavaScript类型有哪些你不知道的细节？

摘要：的码点被称为基本字符区域。关于的介绍，我准备用文档阮一峰来做一些介绍，具体的可以参考文档引入的原因的对象属性名都是字符串，这容易造成属性名的冲突。其他的一些属性可以去看文档阮一峰注意函数前不能使用命令，否则会报错。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完...

joyvw 2019-08-23 17:13 评论0 收藏0