一文带你了解 JavaScript 的数据类型

前言

学习一门语言，当然要从数据类型开始。正确判断数据类型是我们写好程序的第一步。

结合之前所学的一些知识，对数据类型进行了总结。

如有错误，还望指正。

分类

基本（值）类型

• String：任意字符串

• Number：任意的数字

• boolean：true / false

• undefined：undefined

• null：null

• bigInt：可以用任意精度表示整数

• symbol：符号类型是唯一的并且是不可修改的，通常用来作为 object 的 key

引用（对象）类型

• Object：任意对象

• Function：一种特别的对象（可以执行）

• Array：一种特别的对象（数值下标，内部数据是有序的）

如何判断数据类型

三种方法：

• typeof

• typeof 返回数据类型的字符串表达

  注：可以判断 undefined、数值、boolean、字符串，不能判断 null 与 object object 与 array

• instanceof

• 判断对象的具体类型

• ===

• 注：可以判断 undefined，null

判断基本类型

var aconsole.log(a,typeof a,typeof a === 'undefined',a === undefined) // undefined 'undefined' true trueconsole.log(undefined === 'undefined') // false

var aa = 3console.log(typeof a === 'number') // truea = 'Ned'console.log(typeof a === 'string') // truea = trueconsole.log(typeof a === 'boolean') // true a = nullconsole.log(typeof a, a=== null) // object

请注意：这里 string，s 一定要小写，否则会是 false，这是因为人家已经设计好的，是固定的。

判断对象类型

var b1 = {    b2: [a,'abc',console.log]    b3: function (){        console.log('b3')    }}

整体的 b1 是个对象，b2 是数组， b3 是函数。

console.log(b1 instanceof Object, b1 instanceof Array) // true falseconsole.log(b1.b2 instanceof Array, b1.b2 instanceof Object) // true trueconsole.log(b1.b3 instanceof Function, b1.b3 instanceof Object) // true true

标注一下 instance of 的用法

[实例] instanceof [类]

如果这个实例是类的实例，就返回 true，反之返回 false

也就是说，我们判断对象类型，要用 instanceof。

另：判断function还可以用typeof

console.log(typeof b1.b3 === 'function' // true

不知道大家有没有注意，b2 的第三个值我们写了个 console.log，下面我们也来判断一下它，应该是个 function 的。

console.log(typeof b1.b2[2] === 'function') // true

所以我们要调用这个函数的时候可以直接b1.b2[2]()，这里提醒大家，我们千万不要被b1.b2[2]所迷惑，我们要清楚它的数据类型到底是什么。

就此情况，我们上面 b1 中的 b3 改写一下。

var b1 = {    b3: function (){        console.log(b3)        return function (){            return 'Ned'        }    }}

我们想要得到'Ned'，应该怎么做？

只需要调用这个返回过来的函数即可：b1.b3()()，输出一下：

console.log(b1.b3()())

所以不要拘泥于表面现象，一定要看清楚得到的是什么类型的数据，才能进行下一步的操作！

补充

手写 instanceof

想要手写，我们首要的就是要了解它的原理。

原理：验证当前类的原型 prototype 是否会出现在实例的原型链 proto 上，只要在它的原型链上，则结果都为 true。因此，instanceof在查找的过程中会遍历左边变量的原型链，直到找到右边变量的prototype，找到返回 true，找不到返回 false。

function myinstanceOf(left,right){  let proto = left.__proto__    let prototype = right.prototype    while(true){        if(proto == null){            return false        }        if(proto == prototype){            return true        }        proto = proto.__proto__    }}

constructor（用于引用数据类型）

• 语法： 被检测数据.constructor === class

• 特点：

• 适合使用在引用数据类型上

• 原型链不会干扰

• 原理：构造函数原型上有一个 constructor 属性指向构造函数自身的，如果在实例上使用 construtor 时，就会直接使用其构造函数原型的上的该属性，并指向其构造函数。

Object.prototype.toString.call()（对象原型链判断方法）

• 语法：Object.prototype.toString.call(被检测数据)

• 特点：适用于所有类型的判断检测

• 原理：Object.prototype.toString 表示一个返回对象类型的字符串，call()方法可以改变 this 的指向，那么把 Object.prototype.toString()方法指向不同的数据类型上面，返回不同的结果

补充，相关问题

undefined 与 null 的区别？

• undefined 表示定义未赋值

• null 表示定义并赋值了，只是值为 null

var aconsole.log(a) // undefineda = nullconsole.log(a) // null

什么时候给变量赋值为 null 呢？

• 初始赋值，表明将要赋值为对象

• 结束前，让对象成为垃圾对象，被回收掉。

不知道大家是否还记得，typeof 一个 null 的时候，返回的是什么？

var a = nullconsole.log(typeof a) // object

没错，是 object。

所以当我们将一个变量的初始值赋值为 null 的时候，我们是向其他程序员表明，这个变量将会被赋值为对象。

不这么做行不行？ 当然可以。

那为什么还要这么做？

当然是因为，编程也是很严谨的。

var b = null // 初始赋值为null，表明将要赋值为对象b = ['Ned',20] // 确定对象就赋值b = null // 最后，让b指向的对象成为垃圾对象（被垃圾回收器回收）

严格区别变量类型与数据类型

• 数据的类型

• 基本类型

• 对象类型

• 变量的类型（变量内存值的类型）

• 基本类型：保存就是基本类型的数据

• 引用类型：保存的是地址值

平时的时候我们不会去区分这个概念。

简单的了解到这个概念就行吧~。