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