JavaScript based on data type and reference data type

type of data

There are 7 data types in JavaScript, including 6 basic types and a reference type
Basic data types: number, string, boolean, null, undefined, symbol
Reference data types: object (arrays, objects, functions, regular expressions, etc.)

The difference between primitive data types and reference data types

Storage method
Basic type: The value of the basic data type is directly stored in the memory space allocated by the variable. They are simple data types and occupy a small space Reference type: The value of the reference data type is stored in the heap memory, and the variable stores
the The address of the object in the heap memory, rather than the actual value, so the size of the reference data is not fixed and can contain a large amount of data.
Assignment behavior
Basic type: assign a basic data type to another variable, and directly assign a copy of the value to a new variable
reference type: while assigning a variable of a reference data type to another variable is the address of the reference type Give another variable, not a direct value. The two variables point to the same data. When another variable is modified, the value of this variable will also change.
Comparison methods
Primitive data types: Values of primitive data types are compared by their actual values.
Reference data types: Values of reference data types are compared by their addresses in memory (references), not their actual values. So even though two objects have the same properties and values, they are different objects in memory and the comparison will be false.

Basic data types:

let num1 = 42;
let num2 = num1; // 复制值，num2 现在是 42 的副本
num1 = 100; // 修改 num1 的值不会影响 num2

console.log(num1); // 输出 100
console.log(num2); // 输出 42

Reference data type:

const obj1 = {
    
     name: "John" };
const obj2 = obj1; // 复制引用，obj2 指向 obj1 引用的对象

obj1.name = "Alice"; // 修改 obj1 的属性，也会影响 obj2

console.log(obj1.name); // 输出 "Alice"
console.log(obj2.name); // 输出 "Alice"，因为 obj2 指向与 obj1 相同的对象

Determine the data type of the variable

typeof

The typeof operator is used to get the type of data. However, "object" is returned for null, which is a historical problem and may lead to misjudgment.
For functions, "function" is returned, but functions are also a type of object, so it is not possible to accurately distinguish whether a variable is a simple function or another type of object.

typeof "hello" // 返回 "string"
typeof 42 // 返回 "number"
typeof true // 返回 "boolean"
typeof undefined // 返回 "undefined"
typeof null // 返回 "object"
typeof [] // 返回 "object"
typeof {
    
    } // 返回 "object"
typeof function(){
    
    } // 返回 "function"

instanceof

The instanceof operator is used to check whether an object is an instance of a particular class.
But it can only judge complex data types, not basic data types.

const myArray = [];
const myDate = new Date();

console.log(myArray instanceof Array); // 输出 true
console.log(myArray instanceof Object); // 输出 true，因为 Array 是 Object 的子类
console.log(myDate instanceof Date); // 输出 true
console.log(myDate instanceof Object); // 输出 true，因为 Date 是 Object 的子类

Array.isArray()

Array.isArray() is used to determine whether the value is an array type.

console.log(Array.isArray([])); // 输出 true
console.log(Array.isArray({
    
    })); // 输出 false

Object.prototype.toString.call()

Use Object.prototype.toString.call() method: This is a generic method that can detect almost all data types.

console.log(Object.prototype.toString.call("hello")); // 输出 "[object String]"
console.log(Object.prototype.toString.call(42)); // 输出 "[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([])); // 输出 "[object Array]"
console.log(Object.prototype.toString.call({
    
    })); // 输出 "[object Object]"
console.log(Object.prototype.toString.call(function () {
    
    })); // 输出 "[object Function]"
console.log(Object.prototype.toString.call(new Date())); // 输出 "[object Date]"

Although the above methods can meet the needs of data type judgment in many cases, they also have some disadvantages that need attention:

typeofThe problem:
- For nullthe returned yes "object", this is a legacy problem that may lead to misjudgment. For example, it is impossible to tell exactly whether a variable is nullan object or not.
- For functions, yes "function", but functions are also a type of object, so it is not possible to accurately distinguish whether a variable is a simple function or another type of object.
instanceofThe problem:
- instanceofOnly object types can be detected, and the prototype chain is also considered. instanceofMay fail if the object was created in a different global context, or if multiple frames are involved .
- Cannot judge basic data types, such as strings, numbers, Boolean values, etc.
Array.isArray()The problem:
- Array.isArray()Only the array type can be judged, and other object types cannot be judged.
Object.prototype.toString.call()The problem:
- Although this method can accurately judge most types, it is cumbersome to use, requires additional calls, and is not intuitive enough.
- If there is an instance of a custom class, Object.prototype.toString.call()it will only be returned "[object Object]", and it is impossible to specifically determine which class it belongs to.

Encapsulate the data type function of the judgment variable

The typeof and Object.prototype.toString.call() methods are used here respectively.

/**
 * @param 要判断类型的值
 * @returns 数据类型
 */
export const getDataType = (value: any) => {
    
    
  if (typeof value === "object") {
    
    
    if (value === null) return "null";
    if (Array.isArray(value)) return "array";
    return "object";
  }
  return typeof value;
};

export const getDataType2 = (value: any) => {
    
    
  const type = Object.prototype.toString.call(value);
  if (type === "[object String]") return "string";
  if (type === "[object Number]") return "number";
  if (type === "[object Boolean]") return "boolean";
  if (type === "[object Undefined]") return "undefined";
  if (type === "[object Null]") return "null";
  if (type === "[object Array]") return "array";
  if (type === "[object Object]") return "object";
  if (type === "[object Function]") return "function";
  if (type === "[Object Date]") return "date";
};