javascript Column detection method and tool method written based on jquery.

Introduction

Today we are mainly studying the four type detection methods of js. When it comes to js type detection, we have to mention js There are several data types. The types will not be explained in detail. After all, the documents are clear, so we will just list them:

Document address:

Basic data type: String , Boolean, undefined, null, Number, Symbol, BigInt
Reference data types: Object, Array, RegExp...

The detection types we are talking about today include the following four types and Finally, a more convenient tool method written based on jquery:

• typeof [Key point]

• instanceof

• constructor

• Object.prototype.toString.call [Key]

typeof

1 . Basic content

• Definition

  : Operator that can detect basic types

• Syntax

  : typeof [value]

• Return value

  : ["string", "number", "boolean", "undefined", "object", "function", " symbol", "bigint"]

The result is as shown in the figure:

2. Defects and deficiencies

Although it seems that typeof is very easy to use, we generally know that useful things always have certain flaws, just like people can't be very useful. Perfect

• 1. Typeof detects basic types perfectly, but reference types can explode in place, such as

  array objects, regular objects, and new digital objects.. .... All returned are Object

• 2 in the form of strings. For example,

  NaN / Infinity

  are both "number"
• 3.

  typeof null is "object"

The result is as shown in the figure:

##3. Common scenarios

let x = {};
if（x != null && typeof x === "object"）{
	判断是否是对象，由于typeof null也是返回object，因此要排除它
}复制代码

instanceof

1. Basic content

• Definition

  : Used to detect whether the prototype attribute of the constructor appears in an instance object On the prototype chain.

• Syntax

  : object instanceof constructor

• Return value

  : Boolean value

The result is as shown in the figure Display:

[Note] {} will be treated as a code block here, so the first line will report an error

2 . 缺陷与不足

• 1 . 无法检测基本类型，返回的都是false ，只能检测引用类型
• 2 . 由于instanceof是根据原型来检测类型的，返回值也是布尔类型，因此无法直观的看出数据类型
• 3 . 因为原型可以更改，有时候利用instanceof来判断不一定十分准确

结果如图所示 ：

constructor

1 . 基本内容

• 定义

  : 通过构造器来判断类型。

• 语法

  : target.constructor == "类型名字"

结果如图所示 :

2 . 缺陷与不足

• 1 . 原理基本和instanceof一样，都是根据原型判断

Object.prototype.toString.call()

1 . 基本内容

• 定义

  : 返回一个表示该对象的字符串。

• 语法

  : Object.prototype.toString.call(params)

• 返回值

  : "[object 类型]"

结果如图所示 :

2 . 基本原理

Object.prototype.toString.call()中“[object 类型]”返回的值是由Symbol.toStringTag决定

如图所示：

根据jquery写出的判断方法

1.代码实现

var class2type = {};
["Boolean","Number","String","Function","Array","Date","RegExp","Object","Error","Symbol","BigInt","GeneratorFunction"].forEach(item=>{
    class2type["[object "+item+"]"] = item.toLowerCase();
})
function toType(obj){
      if(obj==null){
        return obj+'';
      }
      return typeof obj === "object" || typeof obj === "function" ?
              class2type[toString.call(obj)] || "object" : typeof obj;
}复制代码

最后，由于第一次写文章，有些紧张，如有写的不好之处请指出来，作者会继续努力写文章总结，一起加油！打工人！！！

相关免费学习推荐：JavaScript（视频）

The above is the detailed content of Introducing four types of js detection methods and tool methods written based on jquery. For more information, please follow other related articles on the PHP Chinese website!