装箱和拆箱(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
相关推荐
小图图1 分钟前
Claude Code 黑箱揭秘
前端·后端
吃饺子不吃馅12 分钟前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
这里有鱼汤38 分钟前
miniQMT下载历史行情数据太慢怎么办?一招提速10倍!
前端·python
用户21411832636021 小时前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒1 小时前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
excel11 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js