装箱和拆箱(js的问题)

简介: 装箱和拆箱(js的问题)

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

var num = 123;
var numObj = new Number(123);
 
console.log(typeof num) // number
console.log(typeof numObj) // object

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

var numObj = new Number(123);
 
console.log(numObj.valueOf()) // 123
 
console.log(typeof numObj.valueOf()) // number

拆箱操作原理:

内部执行
 
toPrimitive(input, type)
input 传入的值
type 值类型
 
1. 如果是原始类型的值直接返回
2. 如果不是,调用 input.valueOf() 是原始类型就返回
3. 如果不是,继续调用  input.toString() 是原始类型就返回
4. 报错
valueOf()  有原始类型的值返回,没有返回对象本身
toString() 对象[object type] type:对象类型

例题1:

console.log([] + [])
<empty string>
 
// 分析:
console.log([])
Array []
 
console.log([].valueOf())
Array []
 
console.log([].toString())
<empty string>

例题2:

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
相关文章
|
3天前
|
JavaScript 前端开发 Java
装箱和拆箱(JS)
装箱和拆箱(JS)
12 0
|
数据可视化 前端开发 JavaScript
【可视化工具】二维矩形装箱可视化 + JS-Canvas实现
【可视化工具】二维矩形装箱可视化 + JS-Canvas实现
130 0
【可视化工具】二维矩形装箱可视化 + JS-Canvas实现
谈谈JavaScript中装箱和拆箱
在JavaScript里面有个引用类型叫做基本包装类型,它包括String、Number和Boolean。那么它和基本的类型String、Number和Boolean是啥关系呢?接着往下看👀
谈谈JavaScript中装箱和拆箱
|
1天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
|
2天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
3天前
|
XML Web App开发 前端开发
字节FE:JavaScript学习路线图
字节FE:JavaScript学习路线图
10 0
|
3天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
3天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
15 1
|
3天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
3天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!