判断数据类型的六种方法

2024-01-23  本文已影响0人  简单tao的简单
1. typeof
let a;
console.log(typeof a) //undefined 
console.log(typeof b) //undefined 
console.log(typeof undefined) //undefined
console.log(typeof null) //object
console.log(typeof []) //object
console.log(typeof {}) //object
console.log(typeof function () { }) //function
console.log(typeof Symbol()) //symbol
console.log(typeof BigInt(1)) //bigint
console.log(typeof 1) //number
console.log(typeof 'a') //string
console.log(typeof true) //boolean
console.log(typeof false) //boolean
console.log(typeof arr) //undefined 
console.log(arr instanceof Array) //报错 Uncaught ReferenceError: arr is not defined 
2. Array.isArray
Array.isArray(val) // true 代表为数组
var arr = [];
var arr2 = {};
function isArrayFn(value) {
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);
    } else {
        return Object.prototype.toString.call(value) === "[object Array]";
    }
}
console.log(isArrayFn(arr));// true
console.log(isArrayFn(arr2));// false
3. Array.prototype.isPrototypeOf()
Array.prototype.isPrototypeOf(arr) //true表示是数组,false不是数组
4. Object.getPrototypeOf(obj)
let arr = [];
let obj = {};
Object.getPrototypeOf(obj) === Object.prototype  // true 代表为对象
Object.getPrototypeOf(arr) === Array.prototype  // true 代表为数组
5. constructor
// 用字面量定义的 arr 和 obj 本身没有constructor属性,但它的原型上有
var obj = {}
var arr = [];
console.log(obj.constructor === Object); //true
console.log(arr.constructor === Array)  //true
console.log([].constructor == Array);  //true
console.log([].constructor == Object);  //false
console.log({}.constructor == Object);  //true
console.log("string".constructor == String); //true
console.log((123).constructor == Number);  //true
console.log(true.constructor == Boolean);  //true
const a = [];
a.constructor = Object;
console.log(a.constructor === Array); // false  不靠谱
console.log(a.constructor === Object); // true
console.log(a instanceof Array); // true
console.log(Object.prototype.toString.call(a)); // "[object Array]"
console.log(Object.getPrototypeOf(a) === Array.prototype) //true
console.log(Object.getPrototypeOf(a) === Object.prototype) //false
console.log(Array.prototype.isPrototypeOf(a)) //true
console.log(Object.prototype.isPrototypeOf(a)) //true
6. instanceof
const a = [];
const b = {};
console.log(a instanceof Array);       true
console.log(a instanceof Object);      true
console.log(b instanceof Array);       false
7. 通用检测数据类型 Object.prototype.toString
Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // 同上结果,加上call也ok
Object.prototype.toString.call(1)    // "[object Number]"
Object.prototype.toString.call('1')  // "[object String]"
Object.prototype.toString.call(true)  // "[object Boolean]"
Object.prototype.toString.call(function () { })  // "[object Function]"
Object.prototype.toString.call(null)   //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([])       //"[object Array]"
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
Object.prototype.toString.call(window)   //"[object Window]"

Object.prototype.toString.call([]) === '[object Array]' // true
Object.prototype.toString.call([]) === '[object Object]' // false 
Object.prototype.toString.call({}) === '[object Array]' // false 
Object.prototype.toString.call({}) === '[object Object]' // true 

了解了toString的基本用法,下面就实现一个全局通用的数据类型判断方法

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先进行typeof判断,如果是基础数据类型,直接返回
    return type;
  }
  // 对于typeof返回结果是object的,再进行如下的判断,正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

使用如下

getType([])     // "Array" typeof []是object,因此toString返回
getType('123')  // "string" typeof 直接返回
getType(window) // "Window" toString返回
getType(null)   // "Null"首字母大写,typeof null是object,需toString来判断
getType(undefined)   // "undefined" typeof 直接返回
getType()            // "undefined" typeof 直接返回
getType(function(){}) // "function" typeof能判断,因此首字母小写
getType(/123/g)      //"RegExp" toString返回

typeof 和 instanceof 的区别

  1. typeof返回值是一个字符串,instanceof 返回值为布尔值
  2. typeof判断基础数据类型(null 除外),instanceof判断引用数据类型
  3. typeof 无法分清一个变量是 null、数组、对象,因为这三种数据类型都返回 object
  4. 判断一个未声明的变量用 typeof 不会报错,用其他方式会报错

constructor 和 instanceof 的区别

[] instanceof Array //true
[] instanceof Object  //true
[].constructor === Array //true
[].constructor === Object //false

js 如何判断 null

在JavaScript中,可以使用以下几种方式判断一个值是否为null:

  1. 使用严格相等运算符(===)判断:
if (value === null) {
  // 值为null时的逻辑
}

这种方式通过比较值和类型来进行判断,只有当值为null时才会返回true。

  1. 使用typeof运算符判断:
if (typeof value === 'object' && !value) {
  // 值为null时的逻辑
}

当value的类型为object且值为null时,typeof运算符会返回"object",可以利用这一特性进行判断。

  1. 使用Object.is()方法判断:
if (Object.is(value, null)) {
  // 值为null时的逻辑
}

Object.is()方法会比较两个值是否严格相等,与严格相等运算符(===)类似,当值为null时返回true。

上一篇下一篇

猜你喜欢

热点阅读