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()

用于转换包装类

相关文章
|
JavaScript
JS深拷贝----采用递归实现(例子+难点解析)
JS深拷贝----采用递归实现(例子+难点解析)
127 1
|
3月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
4月前
|
JavaScript 前端开发
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
|
4月前
|
JavaScript 前端开发
JS:类型转换(三)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(三)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
|
4月前
|
JavaScript 前端开发
JS:类型转换(一)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(一)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
|
5月前
ES6 扩展运算符 ...【详解】(含使用场景、实战技巧和范例、实现原理、错误用法)
ES6 扩展运算符 ...【详解】(含使用场景、实战技巧和范例、实现原理、错误用法)
56 5
|
5月前
|
Java
代码优化设计问题之推荐使用函数式方法进行null判断问题如何解决
代码优化设计问题之推荐使用函数式方法进行null判断问题如何解决
|
5月前
|
前端开发 JavaScript 开发者
前端 JS 经典:通用性函数封装思路
前端 JS 经典:通用性函数封装思路
37 0
|
7月前
|
JavaScript 前端开发 网络架构
JavaScript开发中ES6+新特性:解释箭头函数的作用以及它与普通函数的区别。
JavaScript开发中ES6+新特性:解释箭头函数的作用以及它与普通函数的区别。
75 1
|
7月前
|
JavaScript 前端开发
Js数据类型判断都有哪几种方式?至少说出5种?它们的区别是什么?
Js数据类型判断都有哪几种方式?至少说出5种?它们的区别是什么?
66 0
下一篇
DataWorks