JavaScript4种判断变量类型的方法

王靓靓

于 2023-08-08 17:22:40 发布

阅读量142

点赞数

文章标签： chrome javascript 前端

本文链接：https://blog.csdn.net/s_unny_wang/article/details/132171719

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>判断数据类型的四种方法</title>
  </head>
  <body>
    <script>
      // 判断数据类型的四种方法
      const tempStr = "test";
      const tempStr1 = "222";
      const tempNum = 1;
      const tempNull = null;
      const tempUnd = undefined;
      const tempSym = Symbol(1);
      const tempBigInt = BigInt(647326483767797);
      const tempBoolean = true;
      const tempArr = ["one", "two", "three"];
      const tempObj = { name: "demo" };

      // typeof常用于判断基本数据类型，
      // 对于引用数据类型除了function返回function，其余全部返回object，null也会返回object
      console.log(typeof tempStr);
      console.log(typeof tempNum);
      console.log(typeof tempNull);
      console.log(typeof tempUnd);
      console.log(typeof tempSym);
      console.log(typeof tempBigInt);
      console.log(typeof tempBoolean);
      console.log(typeof tempArr);
      console.log(typeof tempObj);

      // instanceof主要用于区分引用数据类型
      // 检测方法是检测的类型在当前实例的原型链上，不太适合用于简单数据类型的检测
      // 对于简单数据类型中的undefined, null, symbol检测不出来
      console.log(tempStr instanceof Array);
      console.log(tempStr instanceof Object);
      console.log(tempNum instanceof Array);
      console.log(tempNum instanceof Object);
      console.log(tempNull instanceof Array);
      console.log(tempNull instanceof Object);
      console.log(tempUnd instanceof Array);
      console.log(tempUnd instanceof Object);
      console.log(tempSym instanceof Array);
      console.log(tempSym instanceof Object);
      console.log(tempBigInt instanceof Array);
      console.log(tempBigInt instanceof Object);
      console.log(tempBoolean instanceof Array);
      console.log(tempBoolean instanceof Object);
      console.log(tempArr instanceof Array);
      console.log(tempArr instanceof Object);
      console.log(tempObj instanceof Array);
      console.log(tempObj instanceof Object);

      // Object.prototype.toString.call()适用于所有类型的判断检测
      // 检测方法是Object.prototype.toString.call(数据) 返回的是该数据类型的字符串
      console.log(Object.prototype.toString.call(tempStr));
      console.log(Object.prototype.toString.call(tempNum));
      console.log(Object.prototype.toString.call(tempNull));
      console.log(Object.prototype.toString.call(tempUnd));
      console.log(Object.prototype.toString.call(tempSym));
      console.log(Object.prototype.toString.call(tempBigInt));
      console.log(Object.prototype.toString.call(tempBoolean));
      console.log(Object.prototype.toString.call(tempArr));
      console.log(Object.prototype.toString.call(tempObj));

      // constructor用于检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同
      // 如果相同就说明该数据是符合那个数据类型的，这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰
      console.log(tempStr.constructor === tempStr1.constructor);
      console.log(tempStr.constructor);
      console.log(tempNum.constructor);
      // console.log(tempNull.constructor);
      // console.log(tempUnd.constructor);
      console.log(tempSym.constructor);
      console.log(tempBigInt.constructor);
      console.log(tempBoolean.constructor);
      console.log(tempArr.constructor);
      console.log(tempObj.constructor);
    </script>
  </body>
</html>