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数据类型与转换的拙见,个人感觉应该不是特别完善,如果有遗漏或者错误的地方,各位大神可以指出,主打一个听人劝!

相关推荐
糕冷小美n5 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥5 小时前
Technical Report 2024
java·服务器·前端
沐墨染5 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion5 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks5 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼6 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴6 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
shadow fish7 小时前
react学习记录(三)
javascript·学习·react.js
小疙瘩7 小时前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
Aliex_git7 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习