【前端面试题】如何判断数据类型？

最新推荐文章于 2024-06-07 14:56:47 发布
最新推荐文章于 2024-06-07 14:56:47 发布
阅读量1.8k 收藏 21
点赞数 8
分类专栏： 前端复习 文章标签： 前端 es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45906196/article/details/121195907
版权

目录

判断数据类型有几种方法？

typeof

代码

效果

instanceof

代码

效果

constructor

代码

效果

Obeject.prototype.toString.call

代码

 效果

编写一个函数判断所有数据类型

代码

 效果

判断数据类型有几种方法？

typeof

使用typeof可以准确检测出number、string、boolean、undefined、function，

使用typeof检测null、数组Array、对象Object都只能检测出Object，而不能进一步判断它们的类型。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //判断数据类型方法一：typeof
        console.log(typeof 123);
        console.log(typeof "123");
        console.log(typeof true);
        console.log(typeof undefined);
        console.log(typeof function fun(){});
        console.log(typeof null);
        console.log(typeof [1,2,3]);
        console.log(typeof {name:"ailin"});
    </script>
</body>
</html>

效果

instanceof

需要使用new来声明构造，instanceof不能区分null和undefined，对于基本数据类型如果不是用new来构造的也检测不出来，但是如果是用new来声明的数据类型，就可以检测出数据类型，还能检测出多层数据关系。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //判断数据类型方法2：instanceof
        let num = new Number(123);
        console.log(num instanceof Number);//true
        let str = new String("abc");
        console.log(str instanceof String);//true
        let boo = new Boolean(true);
        console.log(boo instanceof Boolean);//true
        // let und = new undefined;//报错因为Undefined没有constructor属性，不能被new
        // console.log(und instanceof undefined);
        // let nul = new null;//报错因为null没有constructor属性不能被new
        // console.log(nul instanceof null);
        var arr = new Array();
        console.log(arr instanceof Array);//true
        let fun = new function(){}
        console.log(fun instanceof function(){});//false
        var obj = new Object;
        console.log(obj instanceof Object);//true

    </script>
</body>
</html>

效果

constructor

constructor属性返回所以JavaScript变量的构造函数，null和undefined没有constructor属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //判断数据类型方法3：constructor属性
        console.log((123).constructor===Number);//true
        console.log("abc".constructor===String);//true
        console.log(true.constructor===Boolean);//true
        console.log([1,2,3].constructor===Array);//true
        console.log(function(){}.constructor===Function);//true
        console.log({name:"ailin",age:20}.constructor===Object);//true
        console.log(new Date().constructor===Date);//true


    </script>
</body>
</html>

效果

 constructor不能判断null和undefined，并且使用constructor是不安全的，因为constructor的指向可以改变，例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <script>
        function Person(){}
        Person.prototype={
            name:"ailin",
            age:20,
            say(){
                console.log("hi");
            }
        }
        var Teacher = new  Person();
        console.log(Teacher instanceof Person);//true
        console.log(Teacher.constructor==Person);//false
    </script>
<body>
    
</body>
</html>

instanceof表示Teacher仍然是Person的实例，但是constructor却表明Teache的构造函数(父类)不再是Person了，constructor与instanceof的结果不一致这就造成了instanceof的失真。

constructor 属性指向了Object，也就是说通过这种对象字面量方式改变原型对象之后，原型/实例对象的constructor属性指向了Object，它们的构造函数（父类）变成了Object。//constructor的指向改变

Obeject.prototype.toString.call

使用这种方法是最可靠的

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //判断数据类型方法4：Object.prototype.toString.call
        let num=1;
        console.log(Object.prototype.toString.call(num));
        let str="abc";
        console.log(Object.prototype.toString.call(str));
        let boo=true;
        console.log(Object.prototype.toString.call(boo));
        let und=undefined;
        console.log(Object.prototype.toString.call(und));
        var fun=function(){}
        console.log(Object.prototype.toString.call(fun));
        var arr=Array();
        console.log(Object.prototype.toString.call(arr));
        var obj =Object();
        console.log(Object.prototype.toString.call(obj));
    </script>
</body>
</html>

 效果

编写一个函数判断所有数据类型

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
         //编写一个函数判断所有数据类型
         function _typeof(item){
            let res=Object.prototype.toString.call(item);
            res = res.split(" ")[1];
            res=res.substr(0,res.length-1);
            return res;
        }
        console.log(_typeof(123));
        console.log(_typeof("abc"));
        console.log(_typeof(true));
        console.log(_typeof(null));
        console.log(_typeof(undefined));
        var fun=function(){}
        console.log(_typeof(fun));
        var arr=[1,2,3]
        console.log(_typeof(arr));
        var obj ={
            name:ailin,
            age:20
        }
        console.log(_typeof(obj));
    </script>
</body>
</html>

 效果

欢迎点赞、关注、收藏！

进入前端复习阶段了，我会及时的把一些近年来面试会问的、常考的面试题整理下来，如果你也正在复习前端的话，欢迎关注我的前端复习专栏，实时更新~

 

祝大家都能拿到大厂offer！

二琳爱吃肉
关注
  • 8
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端面试题及答案.zip
04-18
"前端面试题及答案.zip"这个压缩包很可能包含了丰富的前端面试题目以及相应的解答，旨在帮助求职者或希望提升技能的前端工程师更好地准备面试。让我们来深入探讨一些可能涵盖的知识点。 1. HTML/CSS基础： - HTML...
前端上机面试题
02-18
在前端上机面试中，经常会遇到要求实现一系列交互功能，如数据渲染、筛选、分页以及导航等。根据提供的描述，以下是对这些知识点的详细解释： ...对于面试题，展示良好的编程习惯和问题解决能力同样重要。
前端判断数据类型方法
小妖666个人笔记
03-19 3978
法一：typeof typeof undefined // "undefined" typeof false // "boolean" typeof 'aaa' // "string" typeof 123 // "number" typeof {} // "object" typeof [] // "object" typeof null // "object" typeof function(){} // "function" 可以发现当数据是 object，array，null 时，全部返回 o
前端判断数据类型的方法有哪些？
申小兮和林小兮的博客宝
06-07 377
前端判断数据类型的方法有哪些？
联易融前端面试:判断数据类型
屈小康
06-23 412
在js中如何判断数据类型？断的结果都是什么？有多少种判断方式？ 1、typeof 1、返回类型包含7中:number、booblean、string、symbol、object、function、undefined 2、typeof null 为object 3、引用数据类型除了function类型外，其他均返回object。 4、其中，null有属于自己的数据类型Null，引用数据类型中的数组、日期、正则也都有自己的数据类型，而typeof对于这些类型的处理，只返回了处于其原型链最顶端的Object。 2
前端判断数据类型的方式
qq_43853213的博客
06-22 785
1. typeof2.instanceof原理： 判断某个实例对象是否是这个构造函数的实例需要注意一点： 如果判断数组和对象的话，需要优先判断数组的类型 为什么上面都打印 true 实际上数组和对象的祖先都是Object3. Object.prototype.toString.call()...
前端面试题：判断数据类型的方法，一口包子的功夫明白他们的区别
m0_52358470的博客
03-04 3471
首先，总结判断数据类型的方法： 1.typeof：一般判断基本数据类型 2.instanceof ：一般判断引用数据类型，主要的作用就是判断一个实例是否属于某种类型，或者判断一个实例是否是其父类型或者祖先类型的实例。（原型链知识） 3. constructor：通过原型链继承属性判断。null和undefined是无效的对象，JS对象的constructor是不稳定的，这个主要体现在自定义对象上，当开发者重写prototype后，原有的constructor会丢失，constructor会默认为Obj
迄今为止前端面试题最新版
02-06
前端面试题最新版 在本文中，我们将讨论一些常见的前端面试题，并提供详细的解释和解决方案...在本文中，我们讨论了响应式布局、rem 布局原理、数据类型判断和 Arguments 等前端面试题，希望能够为您提供有用的信息。
前端面试题之parseInt.zip
06-22
在前端开发领域，面试题是评估候选人技能和知识深度的重要工具。`parseInt`函数是JavaScript中的一个关键函数，尤其在处理数字字符串时非常常见。在这个主题中，我们将深入探讨`parseInt`函数，以及它在前端面试中...
前端面试题之arrayLike.zip
最新发布
06-22
在前端开发领域，面试题是检验开发者技能的重要方式。"ArrayLike"是其中一个常见的面试话题，它涉及到JavaScript的基础和高级特性。ArrayLike对象是指那些看起来像数组，但并不是真正数组的对象，它们通常拥有一个...
今日前端小知识——判断数据类型的几种方法
qq_35727582的博客
05-03 5520
总结几种常见的判断数据类型的方法
前端判断数据类型的8中方式
wb1991wb的博客
11-09 1688
不论是平时的工作中，还是面试的时候。基本上都会遇到需要判断数据类型的场景。比如对于后端返回的数据格式是否是我们需要的，在比如面试的时候，面试官会问到，有哪些方法可以判断数据类型，这些方法有什么区别？等等这里呢，我就帮大家整理出来了这几种方式？
【前端理论】四种数据类型检测方法
zhangankang的博客
09-14 1403
一、typeof 用途： 弊端： 二、instanceof 用途： 弊端： 三、 用途： 弊端： 四、 用途： 弊端：
前端基本功（二）：JavaScript 的七种数据类型与数据类型检测的4种方法
weixin_33862993的博客
05-31 276
JavaScript 的数据类型与类型检测 1. 一共有七种数据类型，六种简单数据类型，一种复杂数据类型。 简单数据类型：String、Number、Boolean、Null、Undefined、Symbol。 复杂数据类型：Object是唯一的复杂数据类型。 Array Function 这些引用类型值最终都可以归结为 Object 复杂数据类型。 2. 特殊的基本类型：基本包装类型 ​ ...
前端JS必备知识点：判断数据类型
weixin_42721322的博客
05-25 3423
判断数据类型 在JS中有这几种方法来判断数据类型：typeof、instanceof、Object.prototype.toString.call()、constructor 1、typeof typeof 对于简单数据类型（undefined、null、boolean、number 、string）可以判断的出来，但是对于复杂数据类型就不起作用（Array）,因为对于复杂数据类型的判断结果也是object，跟null的判断返回结果相同，因此这个时候判断不出来是复杂数据类型还是null简单数据类型，.
[前端] 比typeof()方法判断数据类型更精确（升级版）
网站前端/PHP/Android/其他
06-04 684
调用Object.prototype.toString方法。使用call方法，可以在任意值上调用Object.prototype.toString方法，从而帮助我们判断这个值的类型。不同数据类型的toString方法返回值如下： 数值：返回[object Number] 字符串：返回[object String] 布尔值：返回[object Boolean] undefined：返回[object
经典的前端判断数据类型方法
沈行的博客
10-26 1547
前端判断数据类型方法
前端.基础数据类型&引用数据类型&判断方法
生活百般滋味，人生需要笑对
04-23 1585
被学姐提了一下，可能作为笔试面试题考，于是补了一下。 基础数据类：Undefined、Null、Boolean、Number、String,和Symbol(唯一值，ES6新设) 引用数据类型：Object,array,function 判断方法： 1）Undefined、Null、Boolean、Number和String, Symbol(唯一)，function——可通过typeof(x...
前端面试题解析：JavaScript数据类型与检测方法
面试题集包含JavaScript数据类型的深入理解，如Symbol和BigInt的新特性，以及数据类型检测的方法，如typeof和instanceof的使用差异。" 在前端开发中，JavaScript是最基础也是最重要的语言。面试题集中首先提到了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二琳爱吃肉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值