面试官:前端使用 JavaScript 如何判断变量类型?

你知道吗,在 JavaScript 中,变量的类型是动态的,这意味着同一个变量可以存储不同类型的值。这种动态类型的特性既是优势,也可能带来一些意想不到的问题。

这几天我在做项目时,遇到了一个从方法返回的值问题。这个值由数字和字母组成,有三种情况:数字加字母、纯数字和空串。目标是过滤掉了空串,结果发现方法返回的值真是让人抓狂。纯数字时返回的居然不是字符串,而是数值。这导致我在直接调用字符串方法时报错了。

为了避免这种问题,我需要先判断一下返回值的类型。那么,你知道哪些判断变量类型的方法呢?

常用的类型判断方法

1. typeof 操作符:简洁快速,适合基本类型

typeof 操作符是我们判断基本类型的得力助手,例如字符串、数字、布尔值、undefined、函数、Symbol 以及 BigInt。

let num = 123;
console.log(typeof num); // 输出: 'number'let str = "hello";
console.log(typeof str); // 输出: 'string'let bool = true;
console.log(typeof bool); // 输出: 'boolean'

需要注意的是:

  1. typeof null 会返回 'object',而不是 'null',这是 JavaScript 的一个历史遗留问题。
  2. 对于数组和对象,typeof 操作符都会返回 'object',无法区分。

2. instanceof 关键字:精准判断对象类型

  1. 用于判断一个对象是否属于某个构造函数的实例。
  2. 对于数组、日期等内置对象类型判断非常有用。
let arr = [];
console.log(arr instanceof Array); // 输出: truelet date = new Date();
console.log(date instanceof Date); // 输出: true

3. Array.isArray() 方法:简洁高效,专用于数组

Array.isArray() 方法是专门用来判断一个变量是否为数组类型的,比 instanceof 更简洁明了。

let arr = [];
console.log(Array.isArray(arr)); // 输出: true

4. Object.prototype.toString.call() 方法:全面精确,适合所有类型

Object.prototype.toString.call() 方法是最全面的类型判断方法,可以精确判断出包括 null 在内的所有类型的变量。它返回一个形如 '[object Type]' 的字符串,其中 Type 表示变量的类型。

let num = 123;
console.log(Object.prototype.toString.call(num)); // 输出: '[object Number]'let arr = [];
console.log(Object.prototype.toString.call(arr)); // 输出: '[object Array]'let nul = null;
console.log(Object.prototype.toString.call(nul)); // 输出: '[object Null]'

如何选择合适的类型判断方法?

  • 对于基本类型判断,建议使用 typeof 操作符,简洁高效。
  • 对于数组类型判断,Array.isArray() 方法最为准确。
  • 对于对象类型判断,可以使用 instanceof 关键字。
  • 对于需要精确区分所有类型的场景,Object.prototype.toString.call() 方法是最佳选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/27892.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python3 笔记:字符串的 isspace()、istitle()、isdecimal()

1、isspace() 方法检测字符串是否只由空白字符组成。 语法:str.isspace() 如果字符串中只包含空格,则返回 True,否则返回 False。 str1 str2 hello print(str1.isspace()) # 运行结果:True print(str2.isspace()) # 运…

LoginGUI.java

LoginGUI.java 完成效果如下图: CODE Summary: This code sets up a login GUI using Swing. It defines a LoginGUI class extending JFrame. The constructor initializes the GUI components and sets up event listeners. The event_login method handles…

MacOS安装redis

文章目录 前言一、介绍二、下载三、安装四、启动五、配置六、Redis 可视化工具下载七、配置详解八、常用命令总结 前言 Redis因其高性能和低延迟而成为现代应用程序的理想选择,尤其适合需要快速读写操作的场景。随着技术的不断发展,Redis继续在性能、功…

电机控制安全:PWM 直通

在 H 桥中使用互补 PWM 时的一个主要考虑因素是短路的可能性,也称为“击穿”。 如图 5 所示,如果同一支路上的两个开关同时打开,H 桥配置可能会导致电源和接地之间发生直接短路。 如果同一条腿上的两个开关同时打开,则可能会发生…

ArcGIS 10.2软件安装包下载及安装教程!

今日资源:ArcGIS 适用系统:WINDOWS 软件介绍: ArcGIS是一款专业的电子地图信息编辑和开发软件,提供一种快速并且使用简单的方式浏览地理信息,无论是2D还是3D的信息。软件内置多种编辑工具,可以轻松的完成…

区间预测 | Matlab实现BP-ABKDE的BP神经网络自适应带宽核密度估计多变量回归区间预测

区间预测 | Matlab实现BP-ABKDE的BP神经网络自适应带宽核密度估计多变量回归区间预测 目录 区间预测 | Matlab实现BP-ABKDE的BP神经网络自适应带宽核密度估计多变量回归区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现BP-ABKDE的BP神经网络自适应带…

基于Matlab的人脸表情识别系统(GUI界面)【W4】

简介: 该系统是一个基于Matlab开发的人脸表情识别应用程序,旨在识别输入图像中的人脸表情,并通过直观的图形用户界面(GUI)向用户展示识别结果。系统结合了图像处理、机器学习和用户交互技术,使用户能够轻松…

攻防世界-fakebook题目__详解

1.打开题目先用dirsearch工具扫描一波,扫出来了robots.php目录,然后访问robots.txt 目录,发现了有一个备份文件 ,访问备份文件,下载内容 文件的大致内容如下 里面有一个curl_exec这个函数容易造成ssrf攻击的漏洞 我…

基于微信小程序的童书购买系统的设计与实现

基于微信小程序的童书购买系统的设计与实现 摘 要 《“十三五”规划》第一次把“保障妇女、未成年人、残疾人的基本权利”作为重要内容,充分体现了党和国家对广大人民群众的关心,为广大人民群众营造了良好的学习氛围,并出台多项文件及政策&…

斯坦福ALOHA机器人团队最新论文-HumanPlus: 从人类学习的人形机器人动作模仿和自主操作

斯坦福ALOHA机器人团队最新论文-HumanPlus,继续推进了机器人技术的前沿进展,我进行了部分翻译和解读: HumanPlus人形机器人系统技术解读 1 简介 本教程将介绍一个名为HumanPlus的全栈式人形机器人系统。该系统能够让机器人从人类数据中学习…

【MySQL】(基础篇十二) —— 子查询

分组数据 本文介绍什么是子查询以及如何使用它们。 SQL允许我们创建子查询(subquery),即嵌套在其他查询中的查询。这样可以实现更复杂的查询,理解这个概念的最好方法是考察几个例子。 利用子查询进行过滤 需求:查询…

Python设计模式 - 简单工厂模式

定义 简单工厂模式是一种创建型设计模式,它通过一个工厂类来创建对象,而不是通过客户端直接实例化对象。 结构 工厂类(Factory):负责创建对象的实例。工厂类通常包含一个方法,根据输入参数的不同创建并返…

React+TS前台项目实战(七)-- 全局常用组件Select封装

文章目录 前言Select组件1. 功能分析2. 代码详细注释说明3. 使用方式4. 效果展示(1)鼠标移入效果(2)下拉框打开效果(3)回调输出 总结 前言 今天这篇主要讲全局select组件封装,可根据UI设计师要…

网络通信的两大支柱:TCP与UDP协议详解(非常详细)零基础入门到精通,收藏这一篇就够了

在构建现代互联网通信的基石中,TCP(传输控制协议)和UDP(用户数据报协议)起着至关重要的作用。本文将深入探讨两者的区别及应用场景。 1 TCP和UDP的共同点 传输层协议: TCP和UDP都是传输层协议&#xff…

紫光展锐5G处理器T750__国产手机芯片5G方案

展锐T750核心板采用6nm EUV制程工艺,CPU架构采用了八核设计,其中包括两个主频为2.0GHz的Arm Cortex-A76性能核心和六个主频为1.8GHz的A55小核。这种组合使得T750具备卓越的处理能力,并能在节能的同时提供出色的性能表现。该核心模块还搭载了M…

L51--- 144. 二叉树的前序遍历(深搜)---Java版

1.题目描述 2.思路 二叉树的前序遍历遵循 根左右 (1)方法 preorderTraversal 输入参数: TreeNode root root是二叉树的根节点。 返回值: List 返回一个包含二叉树节点值的列表,这些值按照前序遍历的顺序排列。 功能: 这个方法是前序遍历的…

微信小程序04: 获取openId和unionId

全文目录,一步到位 1.前言简介1.1 专栏传送门1.1.1 上文小总结1.1.2 上文传送门 2. 获取openId和unionId操作2.1 准备工作2.1.1 请先复制00篇的统一封装代码2.1.2 微信登录请求dto 2.2 具体代码使用与注释如下2.2.1 业务代码2.2.2 代码解释(一)[无需复制]2.2.3 获取的map使用方…

值传递和址传递

值传递 上面的代码是想要交换x,y的值,把x,y传递给swap函数之后,执行下面的操作: 在swap中a和b交换了,但是和x,y没有关系,所以x,y在main中不会变。 址传递 下面再看把x…

解析Java中1000个常用类:Character.Subse类,你学会了吗?

在线工具站 推荐一个程序员在线工具站:程序员常用工具(http://cxytools.com),有时间戳、JSON格式化、文本对比、HASH生成、UUID生成等常用工具,效率加倍嘎嘎好用。程序员资料站 推荐一个程序员编程资料站:程序员的成长之路(http://cxyroad.com),收录了一些列的技术教程…

微信小程序与H5的区别

微信小程序与H5的区别主要体现在以下几个方面: 运行环境: H5的运行环境是任何浏览器,用户可以通过浏览器访问H5页面。微信小程序的运行环境并非完整的浏览器,而是微信团队基于浏览器内核完全重构的一个内置解析器,针对…