浅析JavaScript对象转换成原始值

目录

• 前言
• 三种算法
• 对象转换成布尔值
• 对象转换成字符串
• 对象转换成数值
• 转换时使用的方法
• toString()
• valueOf()
• 转换算法
• 偏字符串算法
• 偏数值算法
• 无偏好算法
• 练习题

前言

首先抛出几个问题：

console.log(Boolean({}));
console.log(Number([]));
console.log(Number([6]));
console.log(([] + []).length);
console.log(({} + {}).length);

打印结果都是啥？不知道各位能答对几题。文章末尾，我们会揭晓答案。这篇文章建议大家耐心阅读，相对来说比较绕而且乏味 - -。

三种算法

JavaScript 将对象转换为原始值时遵循的算法规则比较复杂，这些规则冗长、晦涩，我们先简单了解一下，具体实现后面再详细展开。

对象转换成原始值有三种基本算法：

• 偏字符串算法。该算法返回原始值，而且只要可能就返回字符串。
• 偏数值算法。该算法返回原始值，而且只要可能就返回数值。
• 无偏好算法。该算法不倾向于任何原始值类型，而是由类定义自己的转换规则。JavaScript 内置类除了 Date 类，其他都实现了偏数值算法。Date 类实现了偏字符串算法。

对象转换成布尔值

对象到布尔值的转换最简单：所有对象都转换为true。这个转换不需要使用前面介绍的转换算法，直接适用于所有对象，包括空数组、包装对象：

console.log(Boolean([])); // => true

const wrapperObject = new Boolean(false); // 这是一个对象，而不是原始值
console.log(Boolean(wrapperObject)); // => true

对象转换成字符串

在将对象转换成字符串时，首先使用偏字符串算法将它转换为一个原始值，然后将得到的原始值再转换为字符串。

这种转换会发生在把对象传给一个接收字符串参数的内置函数时，比如将String()作为转换函数，或者将对象插入模板字面量中时就会发生这种转换：

console.log(String({})); // => '[object Object]'
console.log(String([])); // => ''
console.log(String(function () {})); // => 'function () {}'

对象转换成数值

当需要把对象转换为数值时，首先使用偏数值算法将它转换为一个原始值，然后将得到的原始值再转换为数值。

接收数值参数的内置函数和方法都以这种方式将对象转换为数值，除数值操作符之外的多数操作符也按照这种方式把对象转换为数值：

console.log(Number([])); // => 0
console.log(Number({})); // => NaN
console.log(+[]); // => 0

上面的栗子了解一下即可，具体的转换算法后面会详细解释。

转换时使用的方法

toString()、valueOf()，所有对象都会继承这两个在对象到原始值转换时使用的方法，在接下来解释偏字符串、偏数值、无偏好转换算法之前，我们必须先了解这两个方法。

toString()

toString()的任务是返回对象的字符串表示。

默认情况下，toString()方法会返回特殊值：

const obj = {
    x: 1,
    y: 2,
}
obj.toString(); // => '[object Object]'

但是很多类都定义了自己特有的toString()版本。

比如，Array类的toString()方法会将数组的每个元素转换为字符串，然后再使用逗号作为分隔符将它们拼接起来：

const array = [1, 2, 3];
array.toString(); // => '1', '2', '3'

Function类的toString()方法会将用户定义的函数转换为 JavaScript 源代码的字符串：

const f = function () {};
f.toString() // => 'function () {}'

Date类定义的toString()方法返回一个对人类友好的日期和时间字符串。

RegExp类定义的toString()方法会将RegExp对象转换为一个看起来像RegExp字面量的字符串。

valueOf()

valueOf()方法的设计意图是返回对象的原始值表示。

然而大多数对象都没有缺省的原始值表示，为此valueOf()的默认实现是返回对象本身，内置的函数、数组等类型都是如此：

const obj = {x: 666};
const arr = [1, 2, 3];
const fn = function () {};

obj.valueOf(); // => {x: 666}
arr.valueOf(); // => [1, 2, 3]
fn.valueOf(); // => ƒ () {}

极少数对象才具有有意义的原始值表示，比如String、Number、Boolean这样的包装类定义的valueOf()方法会简单地返回被包装的原始值：

const wrapperObj1 = new String(666);
const wrapperObj2 = new Number(888);
const wrapperObj3 = new Boolean(false);

wrapperObj1.toString(); // => '666'
wrapperObj2.toString(); // => '888'
wrapperObj3.toString(); // => 'false'

还有Date对象定义的valueOf()方法返回时间戳：

const d = new Date(2022, 6, 24);
d.valueOf(); // => 1658592000000

了解完toString()和valueOf()方法后，接下来我们看看转换算法是如何实现的。

转换算法

偏字符串算法

偏字符串算法首先尝试toString()方法。如果这个方法有定义且返回原始值，则使用这个原始值，即使这个值不是字符串。如果toString()方法不存在，或者存在但返回对象，则尝试valueOf()方法。如果valueOf()方法存在且返回原始值，就使用该值。否则，转换失败，报 TypeError。

偏数值算法

偏数值算法与偏字符串算法类似，只不过是先尝试valueOf()方法，再尝试toString()方法。

无偏好算法

无偏好算法取决于被转换的对象。如果是一个Date对象，则使用偏字符串算法。如果是其他类型的对象，就使用偏数值算法。

以上规则适用于所有的内置 JavaScript 类型。

练习题

文章开头列举的五个问题，下面我们逐一揭晓答案。

console.log(Boolean({}))：对象转换成布尔值时，所有对象都转换为true，所以打印true。

console.log(Number([]))：对象转换成数值，首先使用偏数值算法把对象转换为一个原始值，然后再把得到的原始值转换为数值。偏数值算法会先尝试valueOf()，将toString()作为备用。Array类继承了默认的valueOf()方法，所以不会返回原始值，因此最终会调用toString()方法。空数组会被转换成空字符串，而空字符串转换成数值为 0，所以打印 0。

console.log(Number([6]))：同样，使用偏数值算法，最终会调用toString()方法。因为数组中只包含一个数值，所以该数值首先会被转换成字符串 '6'，再转换回数值 6，打印结果为 6。

console.log(([] + []).length)：两个数组相加，首先会将数组转换为字符串，使用偏字符串算法，空数组会转换为空字符串，空字符串相加还是空字符串，长度为 0，打印结果为 0。

console.log(({} + {}).length)：两个对象相加，首先会将对象转换成字符串，使用偏字符串算法，对象转换成字符串后是'[object Object]'，两个'[object Object]'拼接后的长度是 30，打印结果为 30。

到此这篇关于浅析JavaScript对象转换成原始值的文章就介绍到这了,更多相关JS对象转换内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！