面试经典头疼问题：JavaScript中的类型转换[2]—对象到原始值的转换机制

C4rTryn思诚2023-11-25 14:45

序言

在上篇文章中我们了解了原始数据类型之间的相互转换规则以及原始数据类型转换成对象的规则，它们就像JS转换规则中的基石，我们今天要讲的是对象到原始值的转换机制，最后就要利用到原始数据类型之间的相互转换机制。那么话不多说，开始我们今天的内容吧~

首先，在聊对象到原始值转换机制前我们还需要搞明白两个类型转换方法：valueOf()和toString()。

valueOf()

在JavaScript中，valueOf 方法通常用于包装对象（Wrapper Objects）中，其中包括 Number、String 和 Boolean。这些包装对象是由 JavaScript 自动创建的，以便处理基本数据类型和对象之间的转换。valueOf 方法被设计为返回原始数据类型的值，以便在需要时进行自动转换。

需要注意的是，valueOf 方法并非只在包装对象中有用。你可以在自定义对象上实现 valueOf 方法，以便在需要时定义对象的原始值。这样的行为通常是为了更好地控制对象的转换行为。

1. Number 对象：

Number 对象表示数字值，并有一个 valueOf 方法，用于返回原始数值。

javascript 复制代码 
let numObj = new Number(42);
console.log(numObj.valueOf()); // 输出 42

2. String 对象：

String 对象表示字符串，并有一个 valueOf 方法，用于返回原始字符串。

javascript 复制代码 
let strObj = new String("Hello");
console.log(strObj.valueOf()); // 输出 "Hello"

3. Boolean 对象：

Boolean 对象表示布尔值，并有一个 valueOf 方法，用于返回原始布尔值。

javascript 复制代码 
let boolObj = new Boolean(true);
console.log(boolObj.valueOf()); // 输出 true

toString()

其实引用数据类型转字符串就是调用原型上Object.prototype.toString()方法，但是这个方法对于不同类型的数据进行了分类处理：

  1. {}.toString() 返回由 "[Object" 和 class 和 "]" 组成的字符串

  2. [].toString() 返回由数组内部元素以逗号拼接的字符串

  3. xx.toString() 直接返回字符串字面量

1. Object.toString()

默认情况下，如果对象没有覆盖 toString 方法，它会继承Object.prototype.toString 方法的行为，返回一个由 [object 和对象的 class 属性值和 ] 组成的字符串。

javascript 复制代码 
{}.toString() // 返回 "[object Object]"

2. Array.toString()

数组对象的 toString 方法返回数组内部元素以逗号拼接的字符串。

javascript 复制代码 
[1, 2, 3].toString() // 返回 "1,2,3"

3. xx.toString()

对象可以定义自己的 toString 方法，以覆盖默认行为。

javascript 复制代码 
const customObject = {
  toString: function() {
    return "Custom Object";
  }
};

customObject.toString() // 返回 "Custom Object"

ToPrimitive(Object数据类型转原始数据类型)

在JavaScript中，ToPrimitive 是一个抽象操作，用于将一个值转换为对应的原始值。原始值可以是字符串、数字或布尔值。ToPrimitive 的行为是在某些操作中定义的，例如使用 == 运算符进行比较、调用 Object.prototype.toString 方法等。

ToPrimitive 操作是由 ECMAScript规范(ES5官方文档) 定义的：

ToPrimitive Conversions官方文档

不得不说，有没有一种官方文档能人性化一点，为了让文档无懈可击，可是真折磨读者，所以大家不必纠结官方文档的文字多么苦涩难懂，我给大家取其精华，去其糟粕完如下：

ToPrimitive(obj, Number)

当我们希望将对象转换为数字时，ToPrimitive(obj, Number) 的操作步骤如下：

  1. 如果参数 obj 是基本数据类型，直接返回该值，因为基本数据类型已经是原始值。
  2. 否则，调用对象的 valueOf 方法。如果 valueOf 返回原始值，则直接返回。
  3. 如果 valueOf 方法未返回原始值，则调用对象的 toString 方法。如果 toString 返回原始值，则直接返回。
  4. 如果 toString 方法也未返回原始值，则抛出错误，因为无法将对象转换为数字。

ToPrimitive(obj, String)

当我们希望将对象转换为字符串时，ToPrimitive(obj, String) 的操作步骤如下：

  1. 如果参数 obj 是基本数据类型，直接返回该值，因为基本数据类型已经是原始值。
  2. 否则，调用对象的 toString 方法。如果 toString 返回原始值，则直接返回。
  3. 如果 toString 方法未返回原始值，则调用对象的 valueOf 方法。如果 valueOf 返回原始值，则直接返回。
  4. 如果 valueOf 方法也未返回原始值，则抛出错误，因为无法将对象转换为字符串。

对象转布尔值

在 JavaScript 中，对象在布尔上下文中被视为 true。因此，对于 ToPrimitive(obj, Boolean) 操作，直接返回 true。

总结

md 复制代码 
- ToPrimitive(obj,Number)  ==> Number()
1. 如果参数obj是数据基本类型，直接返回
2. 否则，调用 `valueOf` 方法,如果得到原始值，则返回 
3. 否则，调用 `toString` 方法,如果得到原始值，则返回
4. 否则，报错


- ToPrimitive(obj,String)  ==> String()
1. 如果参数obj是数据基本类型，直接返回
2. 否则，调用 `toString` 方法,如果得到原始值，则返回
3. 否则，调用 `valueOf` 方法,如果得到原始值，则返回 
4. 否则，报错

# 对象转布尔就是true
- ToPrimitive(obj,Boolean)  ==> 直接True

对象转Number

来到了这里，如果前面的步骤你已经读懂了，其实这一步只是总结或者说是引擎显示执行的一步，我们如果想让对象转Number类型，只需要调用Numebr()方法则行，但是引擎隐式执行的步骤其实还有valueOf()以及ToPrimitive(obj,Number),其中ToPrimitive()方法我们是无法显示使用的，下面我们来对引擎执行的底层机制来进行一个总结梳理吧~

To Number Conversions

我们来看ES5官方文档中对ToNumber方法的定义：

To Number Conversions官方文档

  1. 首先通过ToPrimitive方法使对象类型转换成基本数据类型

  2. 然后再利用ToNumber方法使原始数据类型转换成Number类型。

举一反三 结合实战

一元运算符

在 JavaScript 中，一元加号操作符 + 不仅仅用于数学运算，它还可以用于将一个数据转换为Number类型，我们其实已经知道它的转换过程了，那么让我们通过一些例子来深入了解一元加号操作符在不同情境下的行为吧。

转换字符串为数字

javascript 复制代码 
console.log(+'1'); // Number('1')

在这个例子中，一元加号操作符将字符串 '1' 转换为数字。这其实就是执行了正常的原始数据类型相互转换中的字符串转Number。

空数组转换为数字

javascript 复制代码 
console.log(+ []); // 0

这里对空数组使用一元加号会尝试将数组转换为数字，首先就是通过ToPrimitive方法使对象类型转换成基本数据类型，我们已经知道会将这个数组转换成字符串类型，空数组转换成字符出为'0'，最后转换为数字类型结果为数字 0。

空对象转换为数字

javascript 复制代码 
console.log(+ {}); // NaN

这里对空对象使用一元加号会尝试将对象转换为数字，首先就是通过ToPrimitive方法使对象类型转换成基本数据类型，我们已经知道会将这个对象转换成字符串"[object Object]"，最后转换为数字类型结果为数字 NaN。

尝试将包含元素的数组转换为数字

arduino 复制代码 
javascriptCopy code
console.log(+ [1,2,3]); // NaN

对包含元素的数组使用一元加号同样会尝试将数组转换为数字。由于数组中有多个元素，通过ToPrimitive方法将其转换为基本数据类型时会变成字符串"1,2,3",最后转换成数字类型为NaN

二元运算符

二元运算符其实也是遵循讲左右两边的数转为Number类型进行计算，但是当加号两边有字符串出现时则按字符串进行拼接。

js 复制代码 
console.log(1 + '1'); // 11

console.log(1 + null); // 1

console.log([] + {}); // [object Object]
  1. console.log(1 + '1');
  • 由于 1 是数字，而 '1' 是字符串，当它们相加时，会发生字符串拼接而不是数学运算。结果是字符串 '11'。
  1. console.log(1 + null);
  • 当数字和 null 进行加法运算时，null 会被转换为数字 0。因此，结果是数字 1。
  1. console.log([] + {});
  • 对于空数组 [] 和空对象 {}，JavaScript 会尝试将它们转换为字符串并进行字符串拼接。由于数组和对象的默认 toString 方法返回的是字符串 "" 和 "[object Object]"，所以最终结果是字符串 "[object Object]"。

进阶

还有一些经典题目让我们来看看：

js 复制代码 
console.log(NaN == NaN); //false

console.log(true == 1); //true

console.log(1 == {} );  //false

console.log({} == {});  //false

这些代码的解释如下：

  1. console.log(NaN == NaN);
  • 在 JavaScript 中，NaN（Not a Number）是一个特殊的数值，官方文档规定它与任何值，包括自身，进行比较都会返回 false。因此，NaN == NaN 返回 false 是符合规范的行为。
  1. console.log(true == 1);
  • 在这里，布尔值 true 会被转换为数字 1。因此，这个比较返回 true。
  1. console.log(1 == {});
  • 在这里，空对象 {} 会被转换为字符串 "[object Object]"，然后再转换为数字NaN。因此，这个比较相当于 1 == 'NaN'，最终返回 false。
  1. console.log({} == {});
  • 在这里，两个空对象进行比较。然而，对象之间的比较不会比较它们的内容，而是比较它们在内存中的引用地址。因此，两个独立的空对象的比较会返回 false。

回到面试题

到了尾声，我们再回过头来看我们刚开始抛出的那道有趣且复杂的问题，你现在是否能够解答这道题并且说明思路？

js 复制代码 
console.log([] == ![]);

这道题的输出结果就是true，接下来我们来理清楚引擎的执行过程。

步骤：

  1. 看到!号，先将对象[]转换成Boolean类型值为，![]的结果为false

  2. [] 和false 都转换成基本数据类型

  3. 然后也就可以写成 console.log('' == 0)；

  4. 最后都转换成Number类型，也就可以写成console.log(0 == 0)，结果为true

总结

那么到了这里，我们这两次关于JS中类型转换规则就讲完了，第一篇文章很基础但是很重要，因为我们发现，JS引擎进行类型转换的最底层逻辑其实就是将复杂数据类型一直尝试转换成原始数据类型再进行比较。 这是这两次内容汇总的笔记总结：

md 复制代码 
# 基本数据类型的转换
1. 转布尔值 只有字符串和数字可以转换成布尔值为true 并且需要有实际的值
2. 转数字
3. 转字符串
4. 转对象


# 对象转原始值

- 转字符串 调用的其实就是Object.prototype.toString()
1. {}.toString() 返回由 "[Object" 和 class 和 "]" 组成的字符串
2. [].toString() 返回由数组内部元素以逗号拼接的字符串
3. xx.toString() 直接返回字符串字面量  

- valueOf
用于转换包装类 只对包装类中的三种原始数据类型对象转换成原始数据类型有效

# ToPrimitive(Object数据类型转原始数据类型)

- ToPrimitive(obj,Number)  ==> Number()
1. 如果参数obj是数据基本类型，直接返回
2. 否则，调用 `valueOf` 方法,如果得到原始值，则返回 
3. 否则，调用 `toString` 方法,如果得到原始值，则返回
4. 否则，报错


- ToPrimitive(obj,String)  ==> String()
1. 如果参数obj是数据基本类型，直接返回
2. 否则，调用 `toString` 方法,如果得到原始值，则返回
3. 否则，调用 `valueOf` 方法,如果得到原始值，则返回 
4. 否则，报错

# 对象转布尔就是true
- ToPrimitive(obj,Boolean)  ==> 直接True

# 一元运算符 +
一元加号操作符 `+` 不仅仅用于数学运算，它还可以用于将一个数据转换为`Number`类型。
# 二元运算符 +
lprim + rprim

ToPrimitive(v1) + ToPrimitive(v2)
1. 当+两边有一个是字符串则按字符串进行拼接
2. 否则，转到 number 进行计算

结语

那么到了这里我们今天的文章就结束啦~

创作不易，如果感觉这个文章对你有帮助的话，点个赞吧♥

更多内容：面试官：能不能手写浅拷贝和深拷贝？其实只要搞懂引用类型的存储方式

博主的开源Git仓库 欢迎收藏: gitee.com/cheng-bingw...

相关推荐
Redstone Monstrosity3 分钟前
字节二面
前端·面试
东方翱翔10 分钟前
CSS的三种基本选择器
前端·css
Fan_web33 分钟前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
yanglamei196241 分钟前
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明，后端采用flask，前端采用vue
前端·数据库·flask
千穹凌帝42 分钟前
SpinalHDL之结构（二）
开发语言·前端·fpga开发
dot.Net安全矩阵1 小时前
.NET内网实战：通过命令行解密Web.config
前端·学习·安全·web安全·矩阵·.net
叫我：松哥1 小时前
基于Python flask的医院管理学院，医生能够增加/删除/修改/删除病人的数据信息，有可视化分析
javascript·后端·python·mysql·信息可视化·flask·bootstrap
Hellc0071 小时前
MacOS升级ruby版本
前端·macos·ruby
UestcXiye1 小时前
面试算法题精讲：求数组两组数差值和的最大值
面试·数据结构与算法·前后缀分解
严格格1 小时前
三范式，面试重点
数据库·面试·职场和发展
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07Coze扣子平台完整体验和实践（附国内和国际版对比）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10借助 LocatorJS ，快速定位本地代码