JS数据类型与类型检测

78 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第19天,点击查看活动详情

了解JS往往是从它的数据类型开始,面试题中也经常会考察到关于数据类型的操作。

数据类型

JS 中 数据类型有8种:

  • 7种基本类型
    • string(字符串)
    • number(数字)
    • boolean(布尔)
    • undefined(未定义)
    • null(空)
    • Symbol(符号)
    • BigInt
  • 1种引用类型
    • Object 对象
      • Array(数组)
      • Function(函数)
      • Date(时间)

基本类型与引用类型的区别

比较基本数据类型引用数据类型
数据存放位置基本数据类型存放在引用数据类型存放在
变量存储内容值本身地址
赋值把变量的复制一份去赋值把变量的内存地址复制一份去赋值

数据类型检测

数据类型检测有如下几种方法:

  • typeof
  • instanceof
  • constructor
  • Object.prototype.toString.call()

有些方法并不能非常精准的判断出类型,接下来看看它的各自执行后的效果:

typeof

执行如下代码:

console.log(typeof 1)
console.log(typeof true)
console.log(typeof "")
console.log(typeof function (){})
console.log(typeof undefined)
console.log(typeof null)
console.log(typeof [])
console.log(typeof {})

运行结果:

  • null、数组、对象 都为 Object 类型

image.png

instanceof

  • instanceof只能判断引用数据类型,而不能判断基本数据类型。
  • 它可以用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性。

执行如下代码:

console.log(1 instanceof Number)
console.log('' instanceof String)
console.log(true instanceof Boolean)
console.log([] instanceof Array)
console.log({} instanceof Object)
console.log(function (){} instanceof Function)

运行结果:

数组、函数都属于引用类型,所以由运行结果可以看出:instanceof 只能判断出引用类型

image.png

注:

  • Array instanceof Array 的值为 false
  • Object instanceof Object 的值为 true
console.log([] instanceof Array) // true
console.log(Array instanceof Array) // false

constructor

  • constructor可以判断数据的类型
  • 对象实例通过 constrcutor 对象访问它的构造函数(注:如果创建一个对象来改变它的原型,constructor就不能用来判断数据类型,因为原有的 constructor 引用会丢失,默认值会变为 Object )

执行如下代码:

console.log("".constructor === String);
let num = 1;
console.log(num.constructor === Number);
console.log(true.constructor === Boolean);
console.log([].constructor === Array);
let obj = {};
console.log(obj.constructor === Object);

运行结果:

image.png

Object.prototype.toString.call()

使用Object对象的原型方法toString来判断数据类型

image.png