一次搞懂 JS 对象转换，从此告别类型错误！

引言

在 ES6 之前，JavaScript 有六种数据类型：五种基本数据类型（String、Number、Boolean、Null、Undefined）和一种复杂数据类型（Object）。简单数据类型（如 Boolean、Number、String）的转换规则已经在前面的文章中讲过，今天我们来聊聊 Object 类型的转换。

Object() 的显式类型转换

Object() 是一个将其他数据类型转换为 Object 的构造函数。它是 JavaScript 中将其他类型包装成对象的主要方式。我们来看看如何通过 Object() 转换不同的数据类型。

console.log("123", Object(123));         // Number
console.log("true", Object(true));       // Boolean
console.log("null", Object(null));       // Null
console.log("undefined", Object(undefined));  // Undefined
console.log("''", Object(""));          // String
console.log("[]", Object([]));          // Array
console.log("{} ", Object({}));         // Object

输出结果：

• 123 转换为 Number 对象
• true 转换为 Boolean 对象
• null 转换为 Object，但是会抛出 TypeError
• undefined 转换为 Object，同样会抛出 TypeError
• 空字符串 "" 转换为 String 对象
• 数组 [] 和普通对象 {} 会正常转换为对应的对象。

在实际操作中，null 和 undefined 转换为对象时会抛出错误，因为它们并不能被包装成对象。

小拓展：对象包装的基本概念

• Object() 是一种包装构造函数，它可以将非对象类型的数据转化为对应的对象类型。

  • 原始类型（如 String、Number、Boolean）会被自动装箱（auto-boxing）成相应的对象。
  • 在转换时会创建一个临时的包装对象，使得原始数据可以作为对象使用。

---

Object 类型的显式转换规则

1. 转换为 Boolean

在 JavaScript 中，所有对象（包括数组、函数、日期等）在转换为布尔值时都会被视为 true。

console.log("{}", Boolean({}));           // true
console.log("[]", Boolean([]));           // true
console.log("function()", Boolean(function() {})); // true
console.log("new Date()", Boolean(new Date())); // true

总结： 所有对象（包括空对象、空数组、空函数等）转换为布尔值时，都为 true。

2. 转换为 Number

当对象被转换为数字时，会调用该对象的 valueOf() 方法。如果该方法返回一个原始值（如数字），则直接返回该值。如果返回一个对象，JavaScript 会尝试使用 toString() 方法将其转换为字符串，再进一步转换为数字。

console.log("{}", Number({}));           // NaN
console.log("[]", Number([]));           // 0
console.log("['1']", Number(['1']));     // 1
console.log("[1, 2, 3]", Number([1, 2, 3])); // NaN

总结：

• 空对象 {} 转换为 NaN。
• 空数组 [] 转换为 0，这是因为空数组的 valueOf() 方法返回的是原始值 []，而 toString() 会返回空字符串，空字符串转换为数字就是 0。
• 包含数字的数组会根据数组的内容转换为对应的数字。

3. 转换为 String

当对象被转换为字符串时，JavaScript 会调用该对象的 toString() 方法。对于 Object 类型的对象，它通常返回一个字符串 "[object Object]"，但是对于其他类型的对象（如数组、函数等），它们的 toString() 方法的返回值会有所不同。

console.log("{}", String({}));           // [object Object]
console.log("[]", String([]));           // ''
console.log("['1']", String(['1']));     // 1
console.log("function()", String(function() {})); // function() {}

总结：

• 普通对象 {} 转换为字符串时，返回 "[object Object]"。
• 空数组 [] 转换为 ""（空字符串）。
• 包含字符串的数组（如 ['1']）会转换为 1，这与数组的 toString() 方法的实现有关。
• 函数会被转换为其源代码字符串表示。

---

小拓展：valueOf() 和 toString()

• valueOf() 是对象的一个方法，用于返回对象的原始值。大多数内建对象（如 Date、Array）都会定义该方法。
• toString() 是对象的另一个方法，通常用来返回对象的字符串表示。几乎所有对象都有这个方法，但其行为根据对象类型不同而有所差异。

小结：Object 类型转换规则总结

原始值	转换为 Boolean	转换为 Number	转换为 String
{}	true	NaN	[object Object]
[]	true	0	""
function()	true	NaN	function() {}
null	false	NaN	null
undefined	false	NaN	undefined

总结

对象是 JavaScript 中最重要的数据类型之一，掌握它的转换规则，不仅能帮助我们避免常见的类型转换错误，还能使代码更加清晰和高效。

求点赞和投票

activity.juejin.cn/rank/2024/w...