装箱和拆箱(js的问题)

装箱:基本数据类型 -> 引用数据类型

html 复制代码
var num = 123;
var numObj = new Number(123);

console.log(typeof num) // number
console.log(typeof numObj) // object

拆箱:引用数据类型 -> 基本数据类型

html 复制代码
var numObj = new Number(123);

console.log(numObj.valueOf()) // 123

console.log(typeof numObj.valueOf()) // number

拆箱操作原理:

html 复制代码
内部执行

toPrimitive(input, type)
input 传入的值
type 值类型

1. 如果是原始类型的值直接返回
2. 如果不是,调用 input.valueOf() 是原始类型就返回
3. 如果不是,继续调用  input.toString() 是原始类型就返回
4. 报错
html 复制代码
valueOf()  有原始类型的值返回,没有返回对象本身
toString() 对象[object type] type:对象类型

例题1:

html 复制代码
console.log([] + [])
<empty string>

// 分析:
console.log([])
Array []

console.log([].valueOf())
Array []

console.log([].toString())
<empty string>

例题2:

html 复制代码
console.log([] + {})
[object Object]

// 分析:
console.log({}.valueOf())
{}

console.log({}.toString())
[object Object]

// 交换位置,{}可能被识别为代码块
console.log({} + [])
[object Object] 或 0

console.log(+ [])
0

console.log(+ '')
0

console.log(+ {})
NaN
相关推荐
Bigemap4 小时前
BigemapPro快速添加历史影像(Arcgis卫星地图历史地图)
java·开发语言
给月亮点灯|4 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青4 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥4 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb4 小时前
【Python】字符串
java·前端·python
进击的_鹏4 小时前
【C++11】initializer_list列表初始化、右值引用和移动语义、可变参数模版等
开发语言·c++
mark-puls4 小时前
C语言打印爱心
c语言·开发语言·算法
阿笑带你学前端4 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
Martin-Luo4 小时前
Vue3 通过json配置生成查询表单
javascript·vue.js·json
梦想CAD控件4 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github