JavaScript基石——数据类型和转换

前言

欢迎来到JavaScript基石系列,本篇带来的是有关js数据类型以及数据类型的显示转换、隐式转换的内容。这部分的内容我在面试题中时常看到,但是总是看了又忘、忘了又看,于是借此机会总结一番。

正文

Js中的数据类型

Js的数据类型分为基本数据类型和引用数据类型

其中基本数据类型有:

  • Undefined
  • Null
  • Boolean
  • Number
  • String
  • Symbol
  • BigInt

其中Symbol和BigInt都是ES6新增的数据类型,来看看MDN文档中对他们的描述:

symbol 是一种基本数据类型。Symbol() 函数会返回 symbol 类型的值,该类型具有静态属性和静态方法。每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符;这是该数据类型仅有的目的。
BigInt 是一种内置对象,它提供了一种方法来表示大于 2^53 - 1 的整数。这原本是 Javascript 中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。

引用数据类型有:

  • Object
  • Function
  • Array
  • ...

其实引用数据类型还有很多,但是从原型链的角度上说,它们本质上都属于Object,也就是它们沿着原型链往上都可以找到Object

显式转换

概念

人为改变数据的类型

方法

1.Boolean()------将传递的值将转换为布尔值

数据类型 结果为true 结果为false
Boolean true false
Number 非0数字值 0和NaN
Undefined undefined
Object 任何对象 null

补充: NaN全局对象的一个属性。换句话说,它是全局作用域中的一个变量。NaN不能通过相等操作符(== 和 ===)来判断, 因为 NaN 不与任何值相等, 即使是NaN自己本身

在控制台做个测试:

2.Number()------将传递的值将转换为数值类型

数据类型 结果为NaN 结果为0 结果为1
Boolean false true
Undefined undefined
null null

字符串

  • 如果字符串中只包含数字 ,则将其转换为十进制

  • 字符串中仅包含有效的浮点格式 ,将其转换为浮点数值

  • 空字符串 转换为0

  • 其他情况转换为NaN
    对象

  • 对象首先通过按顺序调用它们的valueOf()toString() 方法将其转换为原始值。然后将得到的原始值转换为数字。

老样子在控制台上测试一下:

3.String()------将传递的值将转换为字符串

除了null和undefined以外,所有对象都有toString()方法

  • 如果有toString()方法,则调用该方法并返回结果
  • null返回"null",undefined返回"undefined"

好继续在控制台试试:

隐式转换

概念

由于Js是弱类型语言,不像c++,java那样可以与预设好变量的类型,当不同类型的变量进行计算时,Js底层就会对变量进行隐式转换

方法

数学运算符

在对非数值应用运算操作符操作时,该操作符会像Number()转型函数一样对这个值执行转换

减、乘、除

这三种运算符转换比较容易,直接看结果

  • 当一侧为String类型,被识别为字符串拼接,并会优先将另一侧转换为字符串类型。
  • 当一侧为Number类型,另一侧为原始类型,则将原始类型转换为Number类型。
  • 当一侧为Number类型,另一侧为引用类型,将引用类型和Number类型转换成字符串后拼接。

加法运算符按照上述规则从上到下判断:

逻辑语句

当我们使用while、if等语句时,括号内需要接受一个Boolean类型的值,此时如果我们在其中写入其他类型的值时,js底层会隐式转换为boolean值

单个变量

scss 复制代码
if(1){...}

while({}){...}

形如上面例子中,条件括号内只有单个值时,只有 null undefined '' NaN 0 false 这几个是 false,其他的情况都是 true,比如 {} , []

== 比较

使用==时,可以根据下面几条规则判断结果:

  • NaN和任何变量比较(包括自己),永远返回false
  • Boolean与其他类型比较时,先将Boolean转换为Number类型(这里我经常混淆,第一反应就认为应该Number转换为Boolean类型,实际上反过来才对)
  • StringNumber比较,先将String转换为Number类型
  • null == undefined比较结果是truenullundefined和其他值的比较值都为false
  • 引用数据类型和基本数据类型比较,引用数据首先通过按顺序调用它们valueOf()toString() 方法将其转换为原始值,如果仍然得不到结果则会报TypeError的错

结语

以上就是我对js数据类型与转换的拙见,个人感觉应该不是特别完善,如果有遗漏或者错误的地方,各位大神可以指出,主打一个听人劝!

相关推荐
Struggler28111 分钟前
Chrome插件开发
前端
前端 贾公子23 分钟前
Monorepo + vite 怎么热更新
前端
coding随想32 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜2 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip