likes
comments
collection
share

接着旅行：js类型转换与操作符的奥秘

作者站长头像
站长
· 阅读数 61

续篇：JavaScript的魔法变形记——类型转换与操作符的奥秘

欢迎回到JavaScript的奥秘之旅，在上一站，我们了解了原始值与对象间显式与隐式转换的秘密。这一次，我们将继续启程，亲自见证每一步转化的奇迹，一起领略这趟旅程的奇妙。希望大家都可以有所收获。✌️

第一站：原始值的华丽转身 —— 显式类型转换的实操

我们可以利用显式转换函数，直接操控原始值的形态，显示类型转换有三类，转布尔、转数字、转字符串。现在，让我们在实践中加深理解。

  • 转布尔：将其他基本类型转换为布尔类型，Boolean()就是手段。

    let n = 123
let f = false

console.log(Boolean(n)，Boolean(f)); // true false

    这里，使用Boolean方法，将数字类型和布尔类型转换为布尔类型，体现了从原始值到布尔型的直接转变。

  • 转数字：在财务计算中，或许我们需要将用户输入的任何形式的数字字符串转换为数值处理，就可以使用Number()。

    let num = "99.99";
console.log(Number(num);)  // 99.99

    通过Number，轻松实现从字符串到数字的跨越。

  • 转字符串：在构建动态UI时，需要使用String()，来确保所有数据都能以文本形式展示。

    let userAge = 28;
document.getElementById("age").innerText = String(userAge); // "28"

    使用String，任何原始值都能被赋予文本的意义。

    💡其实有各种各样的情况可能出现，这些内容大家有个大概的思路就行，实在是不知道就去看一眼。这里随意给一个链接，忘了看一下就好了。www.cnblogs.com/jc2182/p/11…

补给站：toString的多样化应用

  • 普通对象：通过Object.prototype.toString.call({})，得到"[object Object]"，这是对象类型的通用标签。

  • 数组实例：利用Array.prototype.toString()，数组内容被巧妙串联，返回一个由数组内部的元素以逗号拼接的字符串。

    console.log([1, 2, 3].toString()); // 输出 "1,2,3"

    数组元素被逗号分隔，形成简洁的字符串表示。

  • 其他对象：其他数据类型的toString方法，统统都是返回一个字符串字面量，随意举个例子看看就清楚了。

    let num = 123
console.log(num.toString()); // "123"

    不只是数字，除去上面的两大类之外其他任何数据类型的toString方法都是简单在外边加个引号表示为字符串。

第二站：对象的隐秘转变 —— 隐式类型转换的实践

在深入理解对象如何通过隐式类型转换变为数字、字符串或在布尔上下文中被解释时，我们首先回顾一下上一站的显式转换，然后细致剖析对象转换的核心机制——ToPrimitive()函数的运作步骤。从显式转换的直接操控，我们转向更微妙的隐式转换，看看对象是如何在不经意间“变身”的🤔。

  • 对象转数字：当一个对象需要在数学运算或比较中被视为数字时，v8引擎会遵循以下步骤：

    1. 调用ToNumber() ：首先，引擎会尝试调用ToNumber()抽象操作来处理对象。但这并不是直接对对象操作，而是间接通过ToPrimitive()。

    2. ToPrimitive()的介入：

      • 步骤一：简单判断 ：判断接收的值是不是原始类型，是则返回。

      • 步骤二：寻找valueOf() ：否则，调用valueof方法，如果得到了原始值，则返回。

      • 步骤三：尝试toString() ：否则，调用toString方法，如果得到了原始值，则返回。

      • 步骤四：失败处理：否则，抛出错误。

    3. 原始值到数字的转换：一旦ToPrimitive()成功返回了一个原始值，这个值会被传递给ToNumber()进行最终转换。

  • 对象转字符串：基本与对象转数字一样，只有些许差别。

    1. 调用ToString()

    2. ToPrimitive()的介入

      • 步骤一：简单判断
      • 步骤二：尝试toString()
      • 步骤三：寻找valueOf()
      • 步骤四：失败处理

      这里的步骤二和步骤三与上面的相反，因为如果连功能强大的toString()方法都不行的话，就更别提valueOf()了，这样做也是为了提高效率。

    3. 原始值到数字的转换：一旦ToPrimitive()成功返回了一个原始值，这个值会被传递给ToString()进行最终转换。

  • 对象转布尔：在三种转换中，这是最简单最容易记住的了，任何对象转布尔都是true，包括空函数、空数组、空对象。

    let arr = []
console.log(Boolean(arr)) // true

第四站：操作符的特殊魔力

操作符，特别是+，既是数字运算的桥梁，也是字符串连接的纽带，它的双重身份展示了隐式转换的精髓。

  • 一元+ ：无论何种原始值，都会触发隐式类型转换，往number转。

    console.log(+true);  // 1
console.log(+"3.14");  // 3.14

    简单一加，就可以做到改变数据形态。

  • 二元+ ：在数字与字符串间自由切换。

    console.log(2 + "3");  // "23"
console.log("hello, " + "world");  // "hello world"
console.log(1 + []);  // '1'
console.log({} + []);  // [object Object]

    根据操作数类型，+展现不同的特殊效果。

第五站：等号的辩论 —— ==与===

等号的世界里，==与===之争，是对等的细致思考，也是数据类型区别的体现。

  • 双等号==：考虑的是值的等价，不惜进行类型转换。

    console.log("0" == 0);  // true  值相同就行

  • 三等号===：坚持严格的等同，要求值与类型都一致。

    console.log("0" === 0);  // false  因为类型不同

    在比较严谨的比较场景中，它是不可替代的存在。

思考： [] == ![]，请认真思考最后的结果。

根据上面的学习，我们要做到一步步细致分析。首先，右边!的优先级更大，空数组会被转换为true，也就是对象转布尔，![]得到了false。第二步，将false转换为数字，也就是布尔转数字，就得到了0。第三步，将左边的空数组转换为数字，也就是对象转数字，会先经过toString()得到空字符串，最后使用Number()得到数字0，代表两边相等。

结语

通过这一系列的实例解析，我们不仅深入体验了JavaScript类型转换的精妙，也见识了操作符和等号背后的惊艳。这次的旅行到此结束，希望这些内容对你起到帮助，让我下次一起继续启程！🎉

转载自:https://juejin.cn/post/7377589884189474826
评论
请登录