← 返回目录

类型转换

第 39 / 154 卷日期:

Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument… 基本上所有对象的类型都可以通过这个方法获取到。

必须通过 Object.prototype.toString.call 来获取,而不能直接 new Date().toString(),从原型链的角度讲,所有对象的原型链最终都指向了Object,按照JS变量查找规则,其他对象应该也可以直接访问到Object的

toString 方法,而事实上,大部分的对象都实现了自身的 toString 方法,这样就可能会导致 Object 的 toString 被终止查找,因此要用 call 来强制执行 Object 的 toString 方法。

缺点:不能再细分

//例子 Object.prototype.toString.call("a")

"[object String]"

Object.prototype.toString.call(undefined)

"[object Undefined]"

Object.prototype.toString.call(null)

"[object Null]"

Object.prototype.toString.call(new Date())

"[object Date]"

简单来说,JavaScript 中我们有四种方法来判断数据类型。

一般使用 typeof 来判断基本数据类型,不过需要注意当遇到null的问题,这里不足就是不能判断对象具体类型(typeof xjj 只是Object不能看出是person);

而在要判断一个对象的具体类型,就可以用 instanceof,但是也可能不准确,对于一些基础数据类型,数组等会被判断为object。

结合 typeof 和 instanceof 的特点,还能使用 constructor 来判断,他能判断基本类型和引用类型,但是对于 null 和 undefined 是无效的,以及 constructor 不太稳定。

最后如果需要判断准确的内置类型,就可以使用 object.prototype.toString.call,是根据原型对象上的 tostring 方法获取的,该方法默认返回其调用者的具体类型。

类型转换

类型

6种基本类型 null undefined number stringify boolean symbol

1种引用类型 object

对象转换为基本类型

对象转换为字符串

toString: function () { return {}

},

valueOf: function () { return null

} }

String(obj) // "null"

对象转换为数字

先判断valueOf方法,再判断toString方法

// valueOf 和 toString 返回的都不是基本类型值 var obj = {

valueOf: function () { return {}

},

toString: function () { return {}

} }

Number(obj) // Uncaught TypeError: Cannot convert object to primitive value

Object.create(null)创建的对象没有valueOf和toString方法,因此转换报错

一般情况,我们不会重写valueOf和toString,大部分对象valueOf返回的仍然是对象,因此对象转换为基本类型值可以直接看toString返回的值

显式强制类型转换

转换为字符串

如果对象有自定义toString方法,则返回toString方法的结果,若是toString返回的结果不是基本类型值,报错 TypeError

toString: function () { return {}

} }

String(obj) // Uncaught TypeError: Cannot convert object to primitive value

obj + "" // Uncaught TypeError: Cannot convert object to primitive value

obj.toString() // {}

转换为布尔类型

null undefined false +0 -0 NaN ""

其他情况都是真值

转换为数字类型

Number('') // 0

Number(null) // 0

Number(undefined) // NaN

Number(true) // 1

Number(false) // 0

对象首先被转换为相应基本类型值,再转换

Number([]) // 0

// [] valueOf 返回的是 [],因此继续调用 toString 得到基本类型值 "",转换为数字为 0

隐式强制类型转换

转换为字符串

x+"",会将x转换为字符串,+ 运算符其中一个操作数是字符串,会执行字符串拼接操作

对象和字符串拼接时,对象转为基本类型按转为数字转换,先判断valueOf,再判断toString

valueOf: function () { return 1

},

toString: function () { return 2

} }

obj + '' // '1'

转换为布尔值

发生布尔值隐式强制类型转换的情况

  1. if (..)语句中的条件判断表达式
  2. for ( .. ; .. ; .. )语句中的条件判断表达式(第二个)
  3. while (..)和do..while(..)循环中的条件判断表达式
  4. ? :中的条件判断表达式
  5. 逻辑运算符 ||(逻辑或)和 &&(逻辑与)左边的操作数(作为条件判断表达式)

转换为数字类型

  • '2' // 2

'2' - 0 // 2

'2' / 1 // 2

'2' * 1 // 2

  • 'x' // NaN

'x' - 0 // NaN

'x' / 1 // NaN

'x' * 1 // NaN

1 + '2' // '12'

1 + + '2' // 3 即:1 + (+ '2')

== 和 ===

== 允许在相等比较中进行强制类型转换,而 === 不允许

全站分卷索引 · 154 卷
  1. 1代码随想录知识星球精华(最强八股文)第五版(前端篇))
  2. 2html语义化
  3. 3src 和 href 的区别
  4. 4link 与 @import 的区别
  5. 5iframe
  6. 6CSS
  7. 7伪元素和伪类
  8. 8block,inline,inline-block
  9. 9重排、重绘和合成
  10. 10盒子模型
  11. 11margin 合并
  12. 12margin和padding 的值为百分比时
  13. 13浮动
  14. 14定位
  15. 15CSS选择器
  16. 16CSS选择器优先级
  17. 17选择器权重Specificity
  18. 18CSS属性继承
  19. 19不可/可继承属性
  20. 20display: none与 visibility: hidden的区别
  21. 21background-size
  22. 22client、offset&scroll
  23. 23CSS3新特性
  24. 24flex布局
  25. 25常见布局
  26. 26三栏布局
  27. 27垂直居中
  28. 28水平垂直居中
  29. 29CSS画三角形
  30. 30使chrome支持12px以下文字
  31. 31响应式布局
  32. 32媒体查询
  33. 33过渡与动画
  34. 34JavaScript 动画 和 CSS动画
  35. 35SCSS
  36. 36CSS性能优化
  37. 37有哪些数据类型
  38. 38判断数据类型
  39. 39类型转换
  40. 40parseInt&parseFloat
  41. 41浮点数求和步骤
  42. 42十进制小数转二进制
  43. 430.1+0.2 为什么不等于 0.3
  44. 44undefined 和 undeclared 的区别
  45. 45JavaScript NaN 属性
  46. 46isFinite()&isNaN()
  47. 47数组
  48. 48对原数组有影响
  49. 49对原数组无影响
  50. 50数组去重
  51. 51数组拍平
  52. 52ES6新增的数组方法
  53. 53判断是否存在某个值
  54. 54arguments为啥不是数组
  55. 55对象
  56. 56遍历对象的方法
  57. 57判断对象是否具有属性
  58. 58for in 和 for of 的区别
  59. 59继承方式
  60. 60instanceof
  61. 61深浅拷贝
  62. 62freeze属性
  63. 63函数
  64. 64函数柯里化
  65. 65函数的 length
  66. 66箭头函数和普通函数区别
  67. 67构造函数
  68. 68执行上下文
  69. 69作用域
  70. 70作用域和作用域链
  71. 71闭包和内存泄漏
  72. 72this
  73. 73关于 this 的指向问题
  74. 74改变this指向的方法(bind / call / apply)
  75. 75字符串
  76. 76DOM和事件
  77. 77哪些事件支持冒泡
  78. 78阻止冒泡
  79. 79HTMLCollection、NodeList
  80. 80dom.onclick 和 dom.addEventListener的区别
  81. 81e.target和e.currentTarget
  82. 82页面生命周期
  83. 83异步
  84. 84内存管理GC
  85. 85其它
  86. 86JavaScript 中日期时间格式转换
  87. 87input和object实现双向绑定
  88. 88JSON.stringify()
  89. 89escape、encodeURI&encodeURIComponent
  90. 90移动端滚动穿透和溢出
  91. 91ES6
  92. 92Map字典
  93. 93... 与rest
  94. 94proxy
  95. 95模块化
  96. 96Ajax、Fetch和Axios
  97. 97Webpack
  98. 98浏览器:事件循环
  99. 99浏览器内核
  100. 100浏览器同源策略
  101. 101输入URL回车后发生了什么
  102. 102HTTP
  103. 103HTTP 2.0
  104. 104浏览器存储
  105. 105鉴权
  106. 106Webstorage
  107. 107浏览器执行机制
  108. 108AST 抽象语法树
  109. 109性能优化
  110. 110CSS
  111. 111网络相关
  112. 112使用HTTP2.0
  113. 113图片
  114. 114CDN图片
  115. 115其他文件优化
  116. 116降低APP首页开屏渲染时间
  117. 117页面白屏
  118. 118HTTPS中间人攻击
  119. 119Web Worker
  120. 120Service Worker
  121. 121微前端
  122. 122Vue
  123. 123v-show 和 v-if 的区别
  124. 124双向数据绑定的原理
  125. 125Vue中的插槽使用
  126. 126Vue中的key
  127. 127Vue过滤器
  128. 128Vue中Scoped原理
  129. 129Vue中$nextTick的使用
  130. 130Vue中实现组件通信的方式
  131. 131Vue-router
  132. 132Vue路由传参
  133. 133前端路由
  134. 134Vuex
  135. 135虚拟DOM
  136. 136DIFF 算法
  137. 137Vue3和Vue2有哪些区别
  138. 138说一说你对React的理解
  139. 139React事件机制
  140. 140说一说你对react refs的理解
  141. 141react中key的作用
  142. 142组件开发
  143. 143有状态组件和无状态组件
  144. 144函数式组件和类组件的区别
  145. 145PureComponent&Component
  146. 146常见 Hooks
  147. 147状态管理
  148. 148redux toolkit
  149. 149React18新特性
  150. 150client中的createRoot取代以前的ReactDOM.render
  151. 151Suspense
  152. 152新的Hooks
  153. 153VDom一定更快吗
  154. 154Fiber