JavaScript --- 数据类型的判断

简介

• 基本数据类型： undefined 、null 、Boolean、number、String 、symbol [ ES6 新增 ]
• 引用数据类型： Object 、function、Array
• 判断数据类型的方法：Array.isArray()、Object.prototype.toString.call()、typeof()、instanceof()、constructor

判断数据类型的方法

---

• typeof

  typeof 可以准确地判断 undefined 、Boolean、number、String 、symbol 、function类型。但不能分辨 null、Object、Array。

  【机器码000表示为对象 ；typeof null 也是全零】

  • undefined 类型

  let a = undefined;
  console.log(typeof a); //undefined
  
  let b;
  console.log(typeof b); //undefined
  

  • null 类型

  let a = null;
  console.log(typeof a); //object
  

  • Boolean 类型

  let a = Boolean(true);
  console.log(typeof a); //boolean
  
  let b = true;
  console.log(typeof b); //boolean
  

  • number类型

  let a = Number(3);
  console.log(typeof a); //number
  
  let b = 6;
  console.log(typeof b); //number
  

  • String 类型

  let a = String("str");
  console.log(typeof a); //string
  
  let b = "peach";
  console.log(typeof b); //string
  

  • symbol

  let a = Symbol(1);
  console.log(typeof a); //symbol
  

  • Object

  let b = {
      name: "lily",
      age: "18"
  }
  console.log(typeof b); //object
  

  • function

  let c = function () {
      console.log("aaa");
  }
  console.log(typeof c); //function
  
  function c() {
      console.log("aaa");
  }
  console.log(typeof c); //function
  

  • Array

  let a = [1, 2, 3, 4];
  console.log(typeof a); //object
  
  let b = new Array(1, 1, 2);
  console.log(typeof b); //object
  

• instanceof

  instanceof 只能用于检验引用数据类型，不能判断基本类型

  是基于原型链的判断：查找被检测对象的原型链上是否有与检验类型匹配的原型

  • Object

  // 例1
  let a = new Object();
  a.name = "hary";
  a.age = "16";
  console.log(a instanceof Object); //true
  
  let b = {
      name: "lily",
      age: "18"
  }
  console.log(b instanceof Object); //true
  

  ​ 如例1，被检测的对象是a，instanceof会向上查找a的原型，查找到a.__proto__ === Object.prototype，所以符合条件，为true。

  • function

  function c() {
      console.log("aaa");
  }
  console.log(c instanceof Function); //true
  

  • Array

  let a = [1, 2, 3, 4];
  console.log(a instanceof Array); //true
  
  let b = new Array(1, 1, 2);
  console.log(b instanceof Array); //true
  

• constructor

  constructor同样可以理解为基于原型链，但修改原型会使结果不准确，比如在跨框架iframe的时候，使用页面中的对象会失败，因为在不同的框架iframe中，创建的对象不会相互共享其prototype属性；【constructor 属性返回对创建此对象的函数的引用。】

  • Object

  let a = new Object();
  a.name = "hary";
  a.age = "16";
  console.log(a.constructor === Object); //true
  
  let b = {
      name: "lily",
      age: "18"
  }
  console.log(b.constructor === Object); //true
  

  • function

  function c() {
      console.log("aaa");
  }
  console.log(b.constructor === Function); //true
  

  • Array

  let a = [1, 2, 3, 4];
  console.log(a.constructor === Array); //true
  
  let b = new Array(1, 1, 2);
  console.log(b.constructor === Array); //true
  

  • 扩展介绍：constructor 属性返回对创建此对象的函数的引用

  function employee(name,job,born)
  {
      this.name=name;
      this.job=job;
      this.born=born;
  }
  
  var bill=new employee("Bill Gates","Engineer",1985);
  
  console.log(bill.constructor);
  /* 输出结果：
      function employee(name, job, born)
      {this.name = name; this.job = job; this.born = born;}
  */
  

• Array.isArray

  Array.isArray() 用于确定传递的值是否是一个 Array。

  Array.isArray([1, 2, 3]);  
  // true
  Array.isArray({foo: 123}); 
  // false
  Array.isArray("foobar");   
  // false
  Array.isArray(undefined);  
  // false
  

• Object.prototype.toString.call()

  最准确

  // 参考链接 5中的代码直接复制过来的，偷个懒嘻嘻
  console.log(Object.prototype.toString.call("jerry"));//[object String]
  
  console.log(Object.prototype.toString.call(12));//[object Number]
  
  console.log(Object.prototype.toString.call(true));//[object Boolean]
  
  console.log(Object.prototype.toString.call(undefined));//[object Undefined]
  
  console.log(Object.prototype.toString.call(null));//[object Null]
  
  console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
  
  console.log(Object.prototype.toString.call(function(){}));//[object Function]
  
  console.log(Object.prototype.toString.call([]));//[object Array]
  
  console.log(Object.prototype.toString.call(new Date));//[object Date]
  
  console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
  
  function Person(){};
  
  console.log(Object.prototype.toString.call(new Person));//[object Object]
  

参考链接

1. JavaScript 判断该对象是否为数组：https://www.runoob.com/w3cnote/javascript-check-arrayisobject.html

2. js 判断数组：https://www.cnblogs.com/yelongsan/p/6548123.html

3. 如何理解JavaScript的原型和原型链 （扣丁学堂）（微信公众号）【不知道为啥微信文章的链接老是失效，这里就不贴链接了】

4. Array.isArray()|MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

5. Object.prototype.toString.call(obj)精确判断对象的类型：https://blog.csdn.net/qq_39408204/article/details/91492061?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param