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

相关推荐
她似晚风般温柔7892 小时前
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能(最新附源码保姆级)
开发语言·javascript·uni-app
Jiaberrr3 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy3 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白3 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、3 小时前
Web Worker 简单使用
前端
web_learning_3213 小时前
信息收集常用指令
前端·搜索引擎
Ylucius3 小时前
动态语言? 静态语言? ------区别何在?java,js,c,c++,python分给是静态or动态语言?
java·c语言·javascript·c++·python·学习
tabzzz3 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
200不是二百3 小时前
Vuex详解
前端·javascript·vue.js
滔滔不绝tao4 小时前
自动化测试常用函数
前端·css·html5