面试官:说说JavaScript中的数据类型?区别?

news2024/11/26 20:29:33

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

一、概述

二、显示转换

Number()

parseInt()

String()

Boolean()

三、隐式转换

自动转换为布尔值

自动转换成字符串

自动转换成数值


 

一、概述

前面我们讲到,JS 中有六种简单数据类型:undefinednullbooleanstringnumbersymbol,以及引用类型:object

但是我们在声明的时候只有一种数据类型,只有到运行期间才会确定当前类型

let x = y ? 1 : a;

上面代码中,x的值在编译阶段是无法获取的,只有等到程序运行时才能知道

虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的,如果运算子的类型与预期不符合,就会触发类型转换机制

常见的类型转换有:

  • 强制转换(显示转换)
  • 自动转换(隐式转换)

二、显示转换

显示转换,即我们很清楚可以看到这里发生了类型的转变,常见的方法有:

  • Number()
  • parseInt()
  • String()
  • Boolean()

Number()

将任意类型的值转化为数值

先给出类型转换规则:

实践一下:

Number(324) // 324

// 字符串:如果可以被解析为数值,则转换为相应的数值
Number('324') // 324

// 字符串:如果不可以被解析为数值,返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值:true 转成 1,false 转成 0
Number(true) // 1
Number(false) // 0

// undefined:转成 NaN
Number(undefined) // NaN

// null:转成0
Number(null) // 0

// 对象:通常转换成NaN(除了只包含单个数值的数组)
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

从上面可以看到,Number转换的时候是很严格的,只要有一个字符无法转成数值,整个字符串就会被转为NaN

parseInt()

parseInt相比Number,就没那么严格了,parseInt函数逐个解析字符,遇到不能转换的字符就停下来

parseInt('32a3') //32

String()

可以将任意类型的值转化成字符串

给出转换规则图:

实践一下:

// 数值:转为相应的字符串
String(1) // "1"

//字符串:转换后还是原来的值
String("a") // "a"

//布尔值:true转为字符串"true",false转为字符串"false"
String(true) // "true"

//undefined:转为字符串"undefined"
String(undefined) // "undefined"

//null:转为字符串"null"
String(null) // "null"

//对象
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

Boolean()

可以将任意类型的值转为布尔值,转换规则如下:

实践一下:

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

三、隐式转换

在隐式转换中,我们可能最大的疑惑是 :何时发生隐式转换?

我们这里可以归纳为两种情况发生隐式转换的场景:

  • 比较运算(==!=><)、ifwhile需要布尔值地方
  • 算术运算(+-*/%

除了上面的场景,还要求运算符两边的操作数不是同一类型

自动转换为布尔值

在需要布尔值的地方,就会将非布尔值的参数自动转为布尔值,系统内部会调用Boolean函数

可以得出个小结:

  • undefined
  • null
  • false
  • +0
  • -0
  • NaN
  • ""

除了上面几种会被转化成false,其他都换被转化成true

自动转换成字符串

遇到预期为字符串的地方,就会将非字符串的值自动转为字符串

具体规则是:先将复合类型的值转为原始类型的值,再将原始类型的值转为字符串

常发生在+运算中,一旦存在字符串,则会进行字符串拼接操作

'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"

自动转换成数值

除了+有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值

'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

null转为数值时,值为0 。undefined转为数值时,值为NaN

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

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

相关文章

SOLIDWORKS2024新功能--SOLIDWORKS篇(二)

该章节包括以下主题&#xff1a; 切口工具槽口延伸戳记工具薄片和槽口中的切割法线 切口工具 您可以使用切口工具在空心或薄壁圆柱体和圆锥体中生成切口。通过选择圆柱面或圆锥面上的边线&#xff0c;您可以将零件平展为钣金。 在早期版本中&#xff0c;如果您有圆柱形或圆锥形…

CTF是什么?

前言 &#x1f4bb;随着大数据、人工智能的发展&#xff0c;人们步入了新的时代&#xff0c;逐渐走上科技的巅峰。 ⚔科技是一把双刃剑&#xff0c;网络安全不容忽视&#xff0c;人们的隐私在大数据面前暴露无遗&#xff0c;账户被盗、资金损失、网络诈骗、隐私泄露&#xff…

spring源码环境搭建

spring源码环境搭建 步骤1 &#xff1a;下载Spring-framework源码 https://github.com/spring-projects/spring-framework/tree/5.1.x步骤2&#xff1a;修改build.gradle配置文件 修改repositories里面的maven使用阿里云镜像 maven { url “https://maven.aliyun.com/reposit…

JVM基础知识(内存区域划分,类加载,GC垃圾回收)

目录 内存区域划分 JVM中的栈 JVM中的堆 程序计数器 方法区(元数据区) 给一段代码,某个变量在哪个区域上? 类加载 类加载时机 双亲委派模型 GC 垃圾回收机制 GC 实际工作过程 1.找到垃圾/判定垃圾 1.可达性分析(Java中的做法) 2.引用计数 2.清理垃圾 1.标记清除…

小程序商城开发搭建;

小程序商城系统是基于移动互联网的一种在线购物平台&#xff0c;提供线上商城购物、在线下单、支付及配送等功能。随着智能手机普及率的加速提升&#xff0c;小程序商城系统也成为更多商家的选择。下面是小程序商城系统的主要功能介绍&#xff1a; 1、商品展示&#xff1a;商家…

Vue路由与node.js环境搭建

目录 前言 一.Vue路由 1.什么是spa 1.1简介 1.2 spa的特点 1.3 spa的优势以及未来的挑战 2.路由的使用 2.1 导入JS依赖 2.2 定义两个组件 2.3 定义组件与路径对应关系 2.4 通过路由关系获取路由对象 2.5 将对象挂载到vue实例中 2.6 定义触发路由事件的按钮 2.7 定…

华为云云耀云服务器L实例评测|云耀云服务器L实例的购买及使用体验

华为云云耀云服务器L实例评测&#xff5c;云耀云服务器L实例的购买及使用体验 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例特点1.3 云耀云服务器L实例使用场景 二、云耀云服务器L实例支持的镜像2.1 镜像类型2.2 系统镜像2.3 应用镜像 三、购买云…

HOOPS Visualize 2023 SP2 U1 Crack-HOOPS Visualize

HOOPS Visualize 是一个以工程为中心的高性能图形库&#xff0c;用于在桌面、移动和 AR/VR 设备上渲染 3D CAD 模型。该 3D 图形库具有线程安全的 C 和 C# 接口以及 OpenGL 和 DirectX 驱动程序&#xff0c;并由响应迅速的专业图形专家提供支持。通过访问最新的 3D GPU 功能&am…

【业务功能篇112】Springboot + Spring Security 权限管理-登录模块开发实战

合家云社区物业管理平台 4.权限管理模块研发 4.3 登录模块开发 前台和后台的认证授权统一都使用SpringSecurity安全框架来实现。首次登录过程如下图: 4.3.1 生成图片校验码 4.3.1.1 导入工具类 (1) 导入Constants 常量类 /*** 通用常量类* author spikeCong* date 2023/5…

【数据结构】【C++】封装红黑树模拟实现map和set容器

【数据结构】&&【C】封装红黑树模拟实现map和set容器 一.红黑树的完成二.改造红黑树(泛型适配)三.封装map和set的接口四.实现红黑树迭代器(泛型适配)五.封装map和set的迭代器六.解决key不能修改问题七.实现map[]运算符重载 一.红黑树的完成 在上一篇红黑树的模拟实现中…

抖音、知乎、小红书的流量算法

目前我国网民规模已超过10亿&#xff0c;在这互联网时代&#xff0c;更是流量为王。各个平台里的每个视频、每张图片&#xff0c;背后都有着算法的身影&#xff0c;支配着所有人的流量。作为内容创作者及运营者来说&#xff0c;除了制作高质量的内容以外&#xff0c;也需要掌握…

五年全满分 | 求臻医学满分通过2023 NGSST-A 能力验证

近期&#xff0c;求臻医学以满分的优异成绩顺利通过了美国病理学家协会&#xff08;College of American Pathologists, CAP&#xff09;组织开展的NGSST-A 2023&#xff08;Next-Generation Sequencing Solid Tumor&#xff09;能力验证项目。至此&#xff0c;公司已连续五年满…

如何去除音乐中的人声,只留伴奏?

如何去除音乐中的人声&#xff0c;只留伴奏&#xff1f;看到很多小伙伴都有这种需求&#xff0c;今天给大家分享一个宝藏网站&#xff0c;简易操作&#xff0c;可以轻松提取伴奏&#xff0c;想学的一起来看看吧&#xff01; 音分轨——人声分离软件&#xff0c;这是一个用了人工…

Spring 6.0 新特性

文章目录 Spring的发展历史AOTGraalVMSpringBoot实战AOTRuntimeHints案例分析RuntimeHintsRegistrar SpringBoot中AOT核心代码 Spring的发展历史 AOT Spring 6.0的新特性Ahead of Time&#xff08;AOT&#xff09;编译是一种技术&#xff0c;可以提前将Spring应用程序编译成原…

Linux为什么不能像鸿蒙一样实现万物互联?

Linux为什么不能像鸿蒙一样实现万物互联? 可能原因&#xff0c;Linux不会炒作。 万物互联&#xff0c;先从网络开始&#xff0c;光纤入户&#xff0c;首先接入光猫&#xff0c;光猫的操作系统&#xff0c;不确定是不是openWRT&#xff0c;但是这个确定是Linux内核。 然后进入…

免杀对抗-java语言-shellcode免杀-源码修改+打包exe

JAVA-ShellCode免杀-源码修改&打包EXE Shellcode-生成/上线 1.msf生成shellcode 命令&#xff1a;msfvenom -p java/meterpreter/reverse_tcp LHOSTx.x.x.x LPORTxxxx -f jar -o msf.jar 2.msf设置监听 3.执行msf生成的shellcode jar包&#xff0c;成功上线 命令&#xff1…

【再识C进阶2(下)】详细介绍指针的进阶——利用冒泡排序算法模拟实现qsort函数,以及一下习题和指针笔试题

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…

echarts柱状图上方的数值为0时设置不展示

未去掉0的效果图 series: [{data: this.barData.y,type: "bar",barWidth: 20,itemStyle: {normal: {// 设置柱子圆角barBorderRadius: [2, 2, 0, 0],},},label: {show: true,position: top,color:#fff,formatter: function (params) {if (params.value > 0) {retu…

Vue3父组件访问子组件方法 defineExpose用法

父组件示例 <template><div class"container"><h-demo ref"childDom" /><button click"getChild"></button></div> </template><script setup> import Hdemo from /components/Hdemo; import …

利用vue-cli构建SPA项目以及在SPA项目中使用路由

一. 利用vue-cli构建SPA项目 构建前提&#xff1a; Node.js环境已经搭建完成&#xff08;可点击上一篇博客进行查看http://t.csdn.cn/i2Rg5&#xff09; 1.1 vue-cli是什么 vue-cli是一个用于快速搭建Vue.js项目的脚手架工具。用于自动生成vue.jswebpack的项目模板。它提供了一…