JS:类型转换(二)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?

前言

JavaScript中类型转换是一个很令人头疼的问题,特别是对于初学者来说。这是由于 JavaScript 是一种弱类型语言,它在运行时会尝试自动转换数据类型,以使表达式能够执行。这种灵活性使得 JavaScript 非常强大,但也容易引发一些不直观的行为。就比如当字符串与数字相加时,例如"3" + 2,JavaScript 将数字 2 隐式转换为字符串,而不是执行数学运算。今天我们就来聊聊JS中的类型转换规则,并且带你解决经典面试问题[ ] == ![ ] ?。

基本数据类型转对象类型

我们使用Object()方法将基本数据类型强制转化为对象类型

数字和字符串类型转对象类型

js 复制代码
console.log(Object(123)); // Number {123}
console.log(Object('123'); // String {'123'}

我们可以先在Chrome浏览器中查看一下输出结果:

我们可以看到,它们转为了对应的包装类对象。对包装类对象不太了解的小伙伴们可以看看我以前的文章: 给原始数据类型加属性和方法为什么不会报错?包装类------阿里面试题

布尔类型转对象类型

js 复制代码
console.log(Object(true))

Undefined 和 Null 转为为对象类型

js 复制代码
console.log(Object(undefined)); // 输出 {}
console.log(Object(null)); // 输出 {}

Object 方法在接收 nullundefined 作为参数时,会返回一个空对象 {}。这是因为 nullundefined 是特殊的原始值,没有对应的包装对象。如果要将他们转为对象的话,对其使用Object 方法会将它们转换为一个空对象。

聊完了原始数据类型的类型转换,我们来聊聊对象数据类型转化为原始数据类型,相比于原始数据类型之前的互相转换,对象数据类型转换为原始数据类型是有点复杂的,我们首先需要知道两个方法valueof() 和 toString()

Valueof()

在JavaScript中,valueOf() 方法常常与包装对象(Wrapper Objects)一起使用,返回对象的原始值。包装类对象是指由基本数据类型创建的对象形式,它们分别是 NumberStringBoolean 对象。这些对象允许你在基本数据类型上调用对象方法和访问属性。

  1. Number 对象:

    • 用于包装数字(整数或浮点数)的对象。
    • 允许你在数字上调用对象方法。
    • 创建方式:new Number(66)
  2. String 对象:

    • 用于包装字符串的对象。
    • 允许你在字符串上调用对象方法。
    • 创建方式:new String("Hello")
  3. Boolean 对象:

    • 用于包装布尔值的对象。
    • 允许你在布尔值上调用对象方法。
    • 创建方式:new Boolean(true)

这些包装类对象通常是通过构造函数创建的

  • 对于 Number 对象:

    js 复制代码
    let numObj = new Number(42);
    let primitiveValue = numObj.valueOf();  // 42

    valueOf() 返回 Number 对象的原始值,这里是数字 42

  • 对于 String 对象:

    js 复制代码
    let strObj = new String("Hello");
    let primitiveValue = strObj.valueOf();  // "Hello"

    valueOf() 返回 String 对象的原始值,这里是字符串 "Hello"

  • 对于 Boolean 对象:

    js 复制代码
    let boolObj = new Boolean(true);
    let primitiveValue = boolObj.valueOf();  // true

toString()

toString() 方法是 JavaScript 中的一个内置方法,它用于将一个对象转换为字符串。它是对象构造函数原型上的一个方法:Object.prototype.toString(),几乎所有的对象都继承自 Object,而 Object 对象中的 toString() 方法是一个通用的方法,因此几乎所有的对象都可以调用这个方法。但是不同的数据类型调用此方法时,得到的效果也不同:

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

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

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

我们举几个例子来帮助我们了解一下:

  1. 对象调用 toString() 方法:

    js 复制代码
    var obj = { key: "value" };
    var objAsString = obj.toString();
    console.log(objAsString);  // "[object Object]"

    默认情况下,对象的 toString() 方法返回 "[object Object]"

  2. 数组调用 toString() 方法:

    js 复制代码
    var arr = [1, 2, 3];
    var arrAsString = arr.toString();
    console.log(arrAsString);  // "1,2,3"

    数组的 toString() 方法将数组元素以逗号分隔的字符串形式返回。

  3. 字符串调用 toString() 方法:

    js 复制代码
    var str = "Hello";
    var strAsString = str.toString();
    console.log(strAsString);  // "Hello"

    对于字符串,toString() 方法返回字符串本身。

  4. 数字调用 toString() 方法:

    js 复制代码
    var num = 42;
    var numAsString = num.toString();
    console.log(numAsString);  // "42"

    对于数字,toString() 方法将数字转换为字符串。

  5. 布尔值调用 toString() 方法:

    js 复制代码
    var boolValue = true;
    var boolAsString = boolValue.toString();
    console.log(boolAsString);  // "true"

    对于布尔值,toString() 方法将布尔值转换为字符串形式。

总结

toSring()

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

valueof()

用于转换包装类

相关推荐
IT_陈寒1 分钟前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码12 分钟前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
骑士雄师12 分钟前
Java 泛型中级面试题及答案
java·开发语言·面试
reembarkation20 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1236 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木7 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:8 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
Jabes.yang8 小时前
Java求职面试实战:从Spring Boot到微服务架构的技术探讨
java·数据库·spring boot·微服务·面试·消息队列·互联网大厂