【25春招前端八股文】——JS数据类型检测方式

检测数据类型

# typeof

总结:数组对象null都会被判断为object,其他判断都正确的类型。

  • 可以检测基本数据类型
  • null会检测为Object,因为null也是一个空的引用对象
  • 复杂数据类型只能检测functionObject

情况说明:

  1. 数组:这是因为 JavaScript 中的数组实际上是一种特殊的对象。
  2. null:这是一个历史遗留问题,在 JavaScript 的早期实现中存在的一个错误,可以理解为null 表示一个空或不存在的对象引用。
typeof undefined 			// "undefined"
typeof null 					// "object"
typeof 1 							// "number"
typeof "1" 						// "string"
typeof Symbol() 			// "symbol"
typeof function() {} 	// "function"
typeof {} 						// "object" typeof作用于未定义的变量不会报错,会返回一个undefined
!typeof判断null为object

是JS语言的一个历史遗留问题,在第一版JS代码中用32比特来存储值,通过值的1-3位来识别类型,前三位为000表示对象类型。而null是一个空值,二进制表示都位0,所以前三位也就是000,所以导致typeof null返回Object

!typeof判断强制转换

注意Number和String作为普通函数调用的时候,是把参数转化为相应的基本数据类型,也就是类似于做一个强制转换的操作,而不是默认当作构造函数来调用。

typeof Number(1)		//number
typeof String("1")	//StringArray(1,2,3)等价于new Array(1,2,3)

但是,Array()等价于new Array(),所以创建的是一个对象。

!typeof判断构造函数

类似于typeof new Number(1)

这些new Number(1)new String(1) 都是通过 new 操作符创建的构造函数的实例,而构造函数创建的是对象。

typeof new Number(1) // "object"
typeof new String(1) // "object"

# instanceof

总结:只能正确判断引用数据类型 ,不能判断基本数据类型。

情况说明:

instanceof可以正确判断对象的类型,其内部运行机制是判断原型链中能否找到该类型的原型

当使用 instanceof 时,它会按照以下步骤进行:
1. 检查右侧的构造函数的 prototype 属性。
2. 然后沿着左侧对象的 __proto__(或者使用 Object.getPrototypeOf() 方法)指针向上遍历其原型链。
3. 如果在原型链的某个地方找到了与右侧构造函数的 prototype 相同的对象,则返回 true4. 如果遍历到原型链的顶端(即 Object.prototype),还没有找到匹配的 prototype,则返回 false
!typeof和instanceof区别

返回值不同:

  • typeof返回一个运算数的基本类型
  • instanceof返回是布尔型

判断的数据类型不同:

  • t能正确判断基本数据类型,但是无法正确判断除了function外的数据类型
  • i不能判断基本数据类型,但是可以准确判断引用数据类型
!instanceof的实现原理*

instanceof运算符适用于检测构造函数的prototype属性上是否出现在某个实例对象的原型链上。

instanceof运算符的原理是基于原型链的查找。当使用obj instanceof Construtor进行判断的时候,JS引擎会从obj原型链上查找Constructor。prototype是是否村站,如果存在返回true,否则继续在原型链上查找。如果查找到的原型链的顶端仍然没有找到,则返回false

instanceof运算符只能用于检查某个对象是否是某个构造函数的实例,不能用于基本类型的检查。

# toString ?

toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型

对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

# constructor

总结:是一个对象的内置属性,它包含了一个指向创建该对象的构造函数的引用,也可以检测出字面量方式创建的对象类型,因为字面方式创建,实际由对应类创建而出。

例子:

//-------例子1--------//
function Person(name) {this.name = name;
}var person = new Person('Kimi');
console.log(person.constructor === Person); // true
console.log(person.constructor === Function); // true,因为Person是函数的实例//-------例子2--------//
function Animal(name) {this.name = name
}const dog = new Animal('大黄')console.log(dog.constructor === Object) // false
console.log(dog.constructor === Animal) // true//-------例子3--------//const arr = []console.log(arr.constructor === Array)//Array

# isArray

总结:用于检测数组

const arr = []
Array.isArray(arr)

杂题

!如何判断null

如果想要判断null,可以直接使用全等运算符===或者使用Object.protptype.toString方法

// 使用`===`全等运算符来判断
let a = null
a === null // true// 使用 Object.prototype.toString 方法
let a = null;
let result = Object.prototype.toString.call(a);
console.log(result); // 输出 '[object Null]'

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

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

相关文章

python学opencv|读取视频(一)灰度视频制作和保存

【1】引言 上一次课学习了用opencv读取图像,掌握了三个函数:cv.imread()、cv.imshow()、cv.imwrite() 相关链接如下: python学opencv|读取图像-CSDN博客 这次课我们继续,来学习用opencv读取视频。 【2】学习资源 首先是官网…

题外话 (火影密令)

哥们! 玩火影不! 村里人全部评论! 不评论的忍战李全保底! 哥们! 密令领了不! “1219村里人集合”领了吗! 100金币! 哥们! 我粉丝没人能上影! 老舅说的…

Go学习笔记之数据类型转换

Go数据类型转换 整型与浮点型转换 package mainimport ("fmt""strconv" )func main() {// 类型转换建议是从低位的类型转换到高位的类型,比如从int转换到float64,从float32转换到float64d : 10f : 3.14fmt.Println(float64(d) f)}其他类转换成字符串 //…

001-SpringBoot整合日志

SpringBoot整合日志 一、引入依赖二、配置 application.yml三、配置文件 logback.xml四、配置文件 WebConfigurerAdapter五、配置常量文件六、配置拦截器七、效果展示一、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId&…

Rust 图形界面开发——使用 GTK 创建跨平台 GUI

第五章 图形界面开发 第一节 使用 GTK 创建跨平台 GUI GTK&#xff08;GIMP Toolkit&#xff09;是一个流行的开源跨平台图形用户界面库&#xff0c;适用于创建桌面应用程序。结合 Rust 的 gtk-rs 库&#xff0c;开发者能够高效地构建现代化 GUI 应用。本节将详细探讨 GTK 的…

Linux的磁盘/文件管理,以centos7为例

Linux的磁盘/文件管理,以centos7为例 物理磁盘情况我的磁盘简述一下含义 使用新硬盘流程简述硬盘分区格式化(文件系统(本地文件系统))创建挂载点;挂载磁盘挂载解释 LVM(Logical Volume Management)硬盘到文件系统的层次结构LVM优势:重要概念实践操作 附录(命令) 物理磁盘情况 …

Conda-Pack打包:高效管理Python环境

在Python开发中&#xff0c;环境管理是一个不可忽视的重要环节。Conda是一个流行的包管理器和环境管理器&#xff0c;它允许用户创建隔离的环境&#xff0c;以避免不同项目之间的依赖冲突。Conda-pack是一个工具&#xff0c;可以帮助我们将一个conda环境打包成一个可移植文件&a…

人形机器人训练、机器臂远程操控、VR游戏交互、影视动画制作,一副手套全部解决!

广州虚拟动力基于自研技术推出了多节点mHand Pro动捕数据手套&#xff0c;其最大的特点就是功能集成与高精度捕捉&#xff0c;可以用于人形机器人训练、机器臂远程操控、VR游戏交互、影视动画制作等多种场景。 一、人形机器人训练 mHand Pro动捕数据手套双手共装配16个9轴惯性…

vue3+view-ui-plus+vite+less 实现自定义iview样式

首先是结论&#xff1a; "less": "^2.7.3", "less-loader": "^4.1.0", vite.config.js resolve: {alias: {// 设置路径~: path.resolve(__dirname, ./),// 设置别名: path.resolve(__dirname, ./src)},extensions: [.mjs, .js, .ts…

SpringMVC接收数据

一、访问路径设置: RequestMapping注解的作用就是将请求的URL地址和处理请求的方式(handler方法)关联起来&#xff0c;建立映射关系;SpringMVC接收到指定的请求&#xff0c;就会来找到在映射关系中对应的方法来处理这个请求 1.精准路径匹配: 在RequestMapping注解指定URL地址…

【微服务】Docker

一、Docker基础 1、依赖的兼容问题&#xff1a;Docker允许开发中将应用、依赖、函数库、配置一起打包&#xff0c;形成可移植镜像Docker应用运行在容器中&#xff0c;使用沙箱机制&#xff0c;相互隔离。 2、如何解决开发、测试、生产环境有差异的问题&#xff1a;Docker镜像…

【自用】管材流转项目前端重部署流程 vue2 webpackage4 vuecli4

一、配置 1.下载项目&#xff0c;使用 IDEA 打开&#xff0c;并配置 Nodejs 它提示我&#xff0c;需要 Node.js&#xff0c;因为 nodejs 14 的 installer 已经官网已经找不到了&#xff0c;使用 fnm 又太麻烦&#xff0c; 所以直接采用在 IDEA 中下载的方式就好了。 2.清除缓…

工程设计行业内外网文件交换解决方案:FileLink助力高效、安全的跨网协作

在工程设计行业&#xff0c;文件交换和信息共享是项目顺利推进的关键。尤其是涉及复杂的设计图纸、技术方案、合同文件等重要资料时&#xff0c;如何确保文件在内外网之间的高效、安全传输&#xff0c;直接影响到项目的进度和质量。FileLink正是为此而生&#xff0c;它为工程设…

鸿蒙多线程开发——Sendable使用注意事项

1、概 述 本文是在鸿蒙多线程开发——线程间数据通信对象03(sendable)基础上做的扩展讨论。 Sendable协议定义了ArkTS的可共享对象体系及其规格约束。符合Sendable协议的数据&#xff08;以下简称Sendable对象&#xff09;可以在ArkTS并发实例间传递。 默认情况下&#xff0…

1074 Reversing Linked List (25)

Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elements on L. For example, given L being 1→2→3→4→5→6, if K3, then you must output 3→2→1→6→5→4; if K4, you must output 4→3→2→1→5→6. Input Specif…

Wwise SoundBanks内存优化

1.更换音频格式为Vorbis 2.停用多余的音频&#xff0c;如Random Container的随机脚步声数量降为2个 3.背景音乐勾选“Stream”。这样就让音频从硬盘流送到Wwise&#xff0c;而不是保存在内存当中&#xff0c;也就节省了内存 4.设置最大发声数Max Voice Instances 5.设置音频…

产品转后端?2

产品经理的视角能让你成为更好的后端工程师&#xff1a; 理解业务需求转换为技术方案的过程知道为什么要这样设计API明白数据结构的选择如何影响用户体验了解性能指标对业务的实际影响 在实习过程中可以有意识地向后端倾斜&#xff1a; 常规产品经理工作&#xff1a; "…

C 语言 “神秘魔杖”—— 指针初相识,解锁编程魔法大门(一)

文章目录 一、概念1、取地址操作符&#xff08;&&#xff09;2、解引用操作符&#xff08;*&#xff09;3、指针变量1、 声明和初始化2、 用途 二、内存和地址三、指针变量类型的意义1、 指针变量类型的基本含义2、 举例说明不同类型指针变量的意义 四、const修饰指针1、co…

Android 使用OpenGLES + MediaPlayer 获取视频截图

概述 Android 获取视频缩略图的方法通常有: ContentResolver: 使用系统数据库MediaMetadataRetriever: 这个是android提供的类&#xff0c;用来获取本地和网络media相关文件的信息ThumbnailUtils: 是在android2.2&#xff08;api8&#xff09;之后新增的一个&#xff0c;该类为…

博泽Brose EDI项目案例

Brose 是一家德国的全球性汽车零部件供应商&#xff0c;主要为全球汽车制造商提供机电一体化系统和组件&#xff0c;涵盖车门、座椅调节系统、空调系统以及电动驱动装置等。Brose 以其高质量的创新产品闻名&#xff0c;在全球拥有多个研发和生产基地&#xff0c;是全球第五大家…