JavaScript基础之基于数据类型和引用数据类型

原文合集地址如下，有需要的朋友可以关注

本文地址

数据类型

JavaScript的数据类型有7中，包括6个基本类型和一个引用类型
基本数据类型：number, string, boolean, null, undefined, symbol
引用数据类型：object（数组、对象、函数、正则等）

基本数据类型和引用数据类型的区别

• 存储方式
  基本类型：基本数据类型的值直接存储在改变量所分配的内存空间中，它们是简单数据类型，占用的空间小
  引用类型：引用数据类型的值存储在堆内存中，变量存储的是对象在堆内存的地址，而不是实际的值，所以引用数据的大小不固定， 可以包含大量数据。
  • 赋值行为
    基本类型：将一个基本数据类型赋值给另一个变量，直接将该值的副本赋值给新的变量
    引用类型：而将引用数据类型的变量赋值给另一个变量，是将该引用类型的地址给另一个变量，不是直接的值，两个变量指向同一个数据，当修改另一个变量时，此变量的值也会跟着变。
  • 比较方式
    基本数据类型：基本数据类型的值通过它们的实际值进行比较。
    引用数据类型：引用数据类型的值比较的是它们在内存中的地址（引用），而不是实际的值。因此，即使两个对象具有相同的属性和值，它们在内存中是不同的对象，比较结果会是 false。

基本数据类型：

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

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

引用数据类型：

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 相同的对象

判断变量的数据类型

typeof

typeof运算符用来获取数据的类型。但是对于 null 返回的是 "object"，这是历史遗留问题，可能会导致误判。
对于函数返回的是 "function"，但函数也是对象的一种，因此不能准确区分一个变量是简单的函数还是其他类型的对象。

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

instanceof

instanceof 运算符用于检查一个对象是否属于某个特定类的实例。
但是它只能判断赋复杂数据类型，不能判断基本数据类型。

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()用于判断值是否为数组类型。

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

Object.prototype.toString.call()

使用 Object.prototype.toString.call() 方法：这是一种通用的方法，可以检测几乎所有的数据类型。

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]"

虽然上述方法在很多情况下可以满足数据类型判断的需求，但它们也有一些弊端需要注意：

1. typeof 的问题：

   • 对于 null 返回的是 "object"，这是历史遗留问题，可能会导致误判。例如，无法准确判断一个变量是 null 还是对象。
   • 对于函数返回的是 "function"，但函数也是对象的一种，因此不能准确区分一个变量是简单的函数还是其他类型的对象。

2. instanceof 的问题：

   • instanceof 只能检测对象类型，并且还要考虑原型链。如果对象是在不同的全局上下文中创建的，或者涉及多个框架，instanceof 可能会失效。
   • 不能判断基本数据类型，如字符串、数字、布尔值等。

3. Array.isArray() 的问题：

   • Array.isArray() 只能判断数组类型，不能判断其他对象类型。

4. Object.prototype.toString.call() 的问题：

   • 这种方法虽然可以准确判断大部分类型，但使用起来较为繁琐，需要额外的调用，并且不够直观。
   • 如果出现自定义类的实例，Object.prototype.toString.call() 只会返回 "[object Object]"，无法具体判断其属于哪个类。

封装判断变量的数据类型函数

这里分别用了typeof和Object.prototype.toString.call()方法。

/**
 * @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";
};