How does JavaScript determine data type? 8 ways to share

How does JavaScript determine the data type? This article will share with you 8 ways to use JS to determine data type, which can effectively help work and interviews. The interviewer smiled slightly after reading it.

1. typeof

• can only recognize basic types and reference types

Note: null , NaN, document.all Judgment

console.log(typeof null); // object
console.log(typeof NaN); // number
console.log(typeof document.all); // undefined

---

2, constructor

• constuctor Points to the constructor that created the instance object

Note that null and undefined do not have constructor, and constructor Can be rewritten

String.prototype.constructor = function fn() {
  return {};
};

console.log("云牧".constructor); // [Function: fn]

---

3, instanceof

• Syntax: obj instanceof Type
• Function: Judgment Whether obj is an instance of the Type class, it can only be used to determine whether the reference data
• is implemented: whether the prototype object of Type is obj An object on the prototype chain
• Note: The right operand must be a function or class

Handwritteninstanceof:

function myInstanceof(Fn, obj) {
  // 获取该函数显示原型
  const prototype = Fn.prototype;
  // 获取obj的隐式原型
  let proto = obj.__proto__;
  // 遍历原型链
  while (proto) {
    // 检测原型是否相等
    if (proto === prototype) {
      return true;
    }
    // 如果不等于则继续往深处查找
    proto = proto.__proto__;
  }
  return false;
}

---

4. Is isPrototypeof

• on the prototype chain of the instance object?
• is basically equivalent to instanceof

console.log(Object.isPrototypeOf({})); // false
console.log(Object.prototype.isPrototypeOf({})); // true  期望左操作数是一个原型，{} 原型链能找到 Object.prototype

---

5. Object.prototype.toString

• Use the feature of function dynamic this

function typeOf(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

// 测试
console.log(typeOf(1)); // Number
console.log(typeOf("1")); // String
console.log(typeOf(true)); // Boolean
console.log(typeOf(null)); // Null
console.log(typeOf(undefined)); // Undefined
console.log(typeOf(Symbol(1))); // Symbol
console.log(typeOf({})); // Object
console.log(typeOf([])); // Array
console.log(typeOf(function () {})); // Function
console.log(typeOf(new Date())); // Date
console.log(typeOf(new RegExp())); // RegExp

---

6. Duck type detection

• Check the type of its own attributes or the type of the execution result
• Usually used as a candidate solution
• Example: kindof and p-is-promise

p-is-promise：

const isObject = value =>
  value !== null && (typeof value === "object" || typeof value === "function");

export default function isPromise(value) {
  return (
    value instanceof Promise ||
    (isObject(value) && typeof value.then === "function" && typeof value.catch === "function")
  );
}

kindof：

function kindof(obj) {
  var type;
  if (obj === undefined) return "undefined";
  if (obj === null) return "null";

  switch ((type = typeof obj)) {
    case "object":
      switch (Object.prototype.toString.call(obj)) {
        case "[object RegExp]":
          return "regexp";
        case "[object Date]":
          return "date";
        case "[object Array]":
          return "array";
      }

    default:
      return type;
  }
}

---

7、Symbol.toStringTag

• Principle: Object.prototype.toString will read the value
• Applicable scenarios: custom type required
• Notes: Compatibility

class MyArray {
  get [Symbol.toStringTag]() {
    return "MyArray";
  }
}

const arr = new MyArray();
console.log(Object.prototype.toString.call(arr)); // [object MyArray]

---

8. Waiting comparison

• Principle: Compare with a fixed value
• Applicable scenarios: undefined, window, document, null, etc.

underscore.js:

##Summary

MethodBasic data typeReference typeNotestypeof√×NaN、object、document.all##constructorinstanceofisPrototypeoftoStringDuck typingSymbol.toString TagEtc. CompareAdditional food: ES6 enhanced NaN

√ Part	√	can be rewritten
×	√	Multi-window, right constructor or class
×	√	Be careful with null and undefined
√	√	Be careful with built-in prototypes
-	√	Compatible as a last resort
×	√	Identify custom objects
√	√	Special objects

NaN and Number.NaN features

• typeof

  is followed by a number

I am not equal to myself
• delete

  cannot be deleted

isNaN

If it is not a number, if the incoming result of implicit conversion is

NaN
• , it will return true, otherwise it will return false

  console.log(isNaN(NaN)); // true
  console.log(isNaN({})); // true

Number.isNaN

Determine whether a value is a number and whether the value is equal to

NaN

• console.log(Number.isNaN(NaN)); // true
  console.log(Number.isNaN({})); // false

Other judgments Whether

NaN

's methods <pre class='brush:php;toolbar:false;'>function isNaNVal(val) { return Object.is(val, NaN); } function isNaNVal(val) { return val !== val; } function isNaNVal(val) { return typeof val === &quot;number&quot; &amp;&amp; isNaN(val); } // 综合垫片 if (!(&quot;isNaN&quot; in Number)) { Number.isNaN = function (val) { return typeof val === &quot;number&quot; &amp;&amp; isNaN(val); }; }</pre>

indexOf and includes

---

indexOf
• are not searchableNaN,includes then you can

  const arr = [NaN];
  
  console.log(arr.indexOf(NaN)); // -1
  console.log(arr.includes(NaN)); // true

[Recommended learning:

javascript advanced tutorial

】

The above is the detailed content of How does JavaScript determine data type? 8 ways to share. For more information, please follow other related articles on the PHP Chinese website!