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

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

前言

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

基本数据类型转对象类型

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

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

console.log(Object(123)); // Number {123}
console.log(Object('123'); // String {'123'}

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

image.png

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

布尔类型转对象类型

console.log(Object(true))

image.png

Undefined 和 Null 转为为对象类型

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)
  1. String 对象:
  • 用于包装字符串的对象。
  • 允许你在字符串上调用对象方法。
  • 创建方式:new String("Hello")
  1. Boolean 对象:
  • 用于包装布尔值的对象。
  • 允许你在布尔值上调用对象方法。
  • 创建方式:new Boolean(true)

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

  • 对于 Number 对象:
let numObj = new Number(42);
let primitiveValue = numObj.valueOf();  // 42
  • valueOf() 返回 Number 对象的原始值,这里是数字 42
  • 对于 String 对象:
let strObj = new String("Hello");
let primitiveValue = strObj.valueOf();  // "Hello"
  • valueOf() 返回 String 对象的原始值,这里是字符串 "Hello"
  • 对于 Boolean 对象:
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() 方法:
var obj = { key: "value" };
var objAsString = obj.toString();
console.log(objAsString);  // "[object Object]"

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

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

var arr = [1, 2, 3];
var arrAsString = arr.toString();
console.log(arrAsString);  // "1,2,3"

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

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

var str = "Hello";
var strAsString = str.toString();
console.log(strAsString);  // "Hello"

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

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

var num = 42;
var numAsString = num.toString();
console.log(numAsString);  // "42"

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

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

var boolValue = true;
var boolAsString = boolValue.toString();
console.log(boolAsString);  // "true"

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

总结

toSring()

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

valueof()

用于转换包装类

相关文章
|
人工智能 数据可视化 数据挖掘
使用轮廓分数提升时间序列聚类的表现
我们将使用轮廓分数和一些距离指标来执行时间序列聚类实验,并且进行可视化
235 0
|
编解码 JavaScript 算法
通过PHAsset获取的图片上传后变大和图像被旋转90度问题完美解决方案
通过PHAsset获取的图片上传后变大和图像被旋转90度问题完美解决方案
208 4
|
算法 调度
【数学建模竞赛】各类题型及解题方案
【数学建模竞赛】各类题型及解题方案
278 1
|
Linux 网络安全 文件存储
本地部署Jellyfin影音服务器并实现远程访问内网影音库
本地部署Jellyfin影音服务器并实现远程访问内网影音库
325 0
|
消息中间件 Java Linux
Linux Docker 安装方法
Linux Docker 安装方法
421 1
|
机器学习/深度学习 运维 资源调度
异常检测:探索数据深层次背后的奥秘《上篇》
异常检测:探索数据深层次背后的奥秘《上篇》
异常检测:探索数据深层次背后的奥秘《上篇》
|
C#
C#的类和对象的概念学习案例刨析
【5月更文挑战第17天】C#是一种面向对象的语言,以类和对象为核心。类作为对象的模板,定义了属性(如Name, Age)和行为(如Greet)。对象是类的实例,可设置属性值。封装通过访问修饰符隐藏实现细节,如Customer类的私有name字段通过Name属性访问。继承允许新类(如Employee)从现有类(Person)继承并扩展。多态让不同对象(如Circle, Square)共享相同接口(Shape),实现抽象方法Area,提供灵活的代码设计。
135 1
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
136 0
|
SQL 自然语言处理 前端开发
wc 统计已过时,cloc 每一行代码都有效
我们通常用代码量来评判一个程序员技术的高低或一个项目的大小,阅读新项目源码时,也需要了解其代码量,心里有个预期。那如何统计代码量呢?
wc 统计已过时,cloc 每一行代码都有效