JAVASCRIPT学习笔记之强制类型转换

简介: 最近在读《你不知道的javascript》系列图书,收获蛮大,感慨也挺多的。 是的,关于javascript,你不是不知道,而是真的不知道。 就比如类型转换,从开始到看完到第二第三第N遍,我经历了如下的心路历程: 这有什么不知道的 → 一脸懵逼 → 有点意思 → 卧槽,怎么这样? → 原来是这样 → 靠,还是坑... 真可谓是不学不知道,一学吓一跳。

最近在读《你不知道的javascript》系列图书,收获蛮大,感慨也挺多的。
是的,关于javascript,你不是不知道,而是真的不知道。
就比如类型转换,从开始到看完到第二第三第N遍,我经历了如下的心路历程:
这有什么不知道的 → 一脸懵逼 → 有点意思 → 卧槽,怎么这样? → 原来是这样 → 靠,还是坑...
真可谓是不学不知道,一学吓一跳。
为了避免再次入坑,这里做个总结,不,了结。

核心点

Javascript中的强制类型转换总是返回标量基本类型值(string, boolean, number, undefined, null)。
直白点就是toString()或者valueOf()的返回值。

toString和valueOf的区别

  • toString : 以字符串形式返回该对象的原始值
  • valueOf : 返回最适合该对象类型的原始值
  • 在数值运算中,会优先调用valueOf
  • 在字符串运算中,会优先调用toString
var a = 1;
a.toString() // '1'
a.valueOf() // 1

a + 2 // 3 优先调用valueOf
a + 'string' // 1string 优先调用toString

a + '' //隐式强制类型转换
String(a) //显示强制类型转换

规则

ToString 字符串化

对象在强制转换为字符串的时候,会优先调用toString()方法,如果返回基本类型的值,则直接使用该返回值;
如果返回值不是基本类型,则会继续调用valueOf()方法,如果valueOf()返回基本类型的值,则直接使用该返回值,否则报错。
数组默认的toString方法经过了重新定义,类似于数组的join(',')方法,会将数组的各个元素以,分隔返回。这就是String([]) === '' 的原因。

转换后
null 'null'
undefined 'undefined'
true 'true'
false 'false'
0 '0'
-0 '0'
NaN 'NaN'
1 '1'
{} '[object Object]'
[] ''
[1, 2] '1,2'
function (){} 'function (){}'
JSON.stringify易错点
  • JSON.stringify对象中遇到undefined、function、symbol时会自动忽略
  • JSON.stringify数组中遇到undefined、function、symbol时会返回null
  • 字符串、数字、布尔、null的JSON.stringify的规则与ToString相同
  • 如果传递给JSON.stringify的对象中定义了toJSON()方法,那么该方法会在字符串化前调用。
JSON.stringify({a : undefined, b : function () {}, c: 1}) // "{"c":1}"
JSON.stringify([undefined, function () {},1])  // "[null, null, 1]"

ToNumber 数字化

对象在强制转换为数字的时候,会优先调用valueOf()方法,如果返回基本类型的值,则直接使用该返回值;
如果返回值不是基本类型,则会继续调用toString()方法,如果toString()返回基本类型的值,则直接使用该返回值,否则报错。

转换后
null NaN
undefined 0
true 1
false 0
0 0
-0 -0
NaN NaN
'' 0
'1' 1
1 1
{} NaN
[] 0
[1, 2] NaN
function (){} NaN

Number([]),因为[].valueOf()返回值不是基本类型,因此会调用toString(), 等价于Number('')

ToBoolean 布尔化

假值

javascript有以下假值:

  • undefined
  • null
  • false
  • +0、-0 和 NaN
  • ''

假值的布尔强制类型转化为false
可以理解为假值列表以外的都是真值(true)

转换后
null false
undefined false
true true
false false
0 false
-0 false
NaN false
'' false
'1' true
1 true
{} true
[] true
[1, 2] true
function (){} true

== 和 === 的区别

== 允许在相等比较中进行强制类型转换,=== 不允许
== 和 === 都会检查操作数的类型,区别在于操作数类型不同时他们的处理方式不同,即== 会进行强制类型转换

容易懵逼的地方

null == undefined
NaN  != NaN
null != 0
undefined != 0
NaN != 0
[] == false
[] == 0
[] == ''
[] == ![]

正确的使用 ==

  • 如果两边的值中有true或者false,千万不要使用 ==
  • 如果两边的值中有[]、''或者0, 尽量不要使用 ==

其他

  • +运算符 (即只有一个操作数) 用来强制转化为数字 + new Date()
  • && 和 || 运算符的返回值并不一定是布尔类型,而是两个操作数其中一个的值

参考

《你不知道的JavaScript(中)》

目录
相关文章
|
6天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
25天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
JavaScript 前端开发
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
这篇文章详细介绍了JavaScript中的强制类型转换、运算符(包括算术、逻辑、条件、赋值和关系运算符)的使用方法和优先级规则。
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
34 0
|
5月前
|
JavaScript
.js基础——js强制类型转换(转为boolean)
.js基础——js强制类型转换(转为boolean)
38 1
|
5月前
|
JavaScript 前端开发 Python
javascript中的强制类型转换和自动类型转换
javascript中的强制类型转换和自动类型转换
|
5月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
53 0
webgl学习笔记3_javascript的HTML DOM
|
5月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
44 0
|
5月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
5月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
45 0