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

前言

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

基本数据类型转换

JavaScript中有七种原始数据类型,分别是数字类型(Number)字符串类型(String)布尔类型(Boolean)未定义类型(Undefined)空值类型(Null)符号类型(Symbol)BigInt类型。我们现在来基础介绍一下先:

  1. Number(数字):

    • 用于表示整数或浮点数。
    js 复制代码
    javascriptCopy code
    var integer = 42;
    var float = 3.14;
  2. String(字符串):

    • 用于表示文本。
    js 复制代码
    var text = "Hello, World!";
  3. Boolean(布尔):

    • 用于表示逻辑值,只能是 truefalse
    js 复制代码
    var isTrue = true;
    var isFalse = false;
  4. Undefined(未定义):

    • 表示声明了变量但未给其赋值时的默认值。
    js 复制代码
    var undefinedVariable;
  5. Null(空):

    • 表示变量没有值,是一种特殊的空值。
    js 复制代码
    var nullValue = null;
  6. Symbol(符号):

    • 引入于ECMAScript 6,用于创建唯一的标识符。
    js 复制代码
    var symbol = Symbol("unique");
  7. BigInt(大整形):

    js 复制代码
    var big = 123n

基本数据类型转数字型

这里我们使用Number() 函数,可以显式地将其他数据类型转换为数字。当我们console.log(Number())时,括号里为空,那么将输出0

  1. 字符串转数字
js 复制代码
console.log(Number('123')); // 123
console.log(Number('hello')); // NaN   
    1. 将字符串 '123' 转换为数字。在这种情况下,字符串表示的是一个整数,所以 Number('123') 的结果是数字 123。因此,console.log 会输出 123
    1. 试图将字符串 'hello' 转换为数字。然而,由于字符串 'hello' 不是有效的数字表示,因此 Number('hello') 的结果是 NaN(Not a Number)。NaN 是一个特殊的 JavaScript 值,表示无法表示的或者非数字的值。因此,console.log 会输出 NaN
  1. 布尔类型转数字
js 复制代码
console.log(Number(true)); // 1
console.log(Number(false)); // 0
  1. 第一个语句:console.log(Number(true));

    试图将布尔值 true 转换为数字。在 JavaScript 中,布尔值 true 在进行数字转换时被转换为数字 1。因此,Number(true) 的结果是 1console.log 输出的结果为 1

  2. 第二个语句:console.log(Number(false));

    这行代码试图将布尔值 false 转换为数字。在 JavaScript 中,布尔值 false 在进行数字转换时被转换为数字 0。因此,Number(false) 的结果是 0console.log 输出的结果为 0

Number(true) 结果为 1,因为布尔值 true 在转换为数字时被视为 1Number(false) 结果为 0,因为布尔值 false 在转换为数字时被视为 0

  1. Undefined 和 NUll 转数字
js 复制代码
console.log(Number(undefined)); // NaN 
console.log(Number(null));  // 0
  1. 第一个语句:console.log(Number(undefined));

    这行代码试图将 undefined 转换为数字。由于 undefined 表示变量已声明但未初始化,它在进行数字转换时会得到 NaN(Not a Number)。因此,Number(undefined) 的结果是 NaNconsole.log 输出的结果为 NaN

  2. 第二个语句:console.log(Number(null));

    这行代码试图将 null 转换为数字。在 JavaScript 中,null 在进行数字转换时被转换为数字 0。因此,Number(null) 的结果是 0console.log 输出的结果为 0

总结:

  • Number(undefined) 结果为 NaN,因为 undefined 无法转换为数字。
  • Number(null) 结果为 0,因为 null 在转换为数字时被视为 0
  1. 符号类型 (Symbol) 和 BigInt 类型:符号类型 (Symbol) 和 BigInt 类型无法直接转换为数字类型,会直接报错。

基本数据类型转布尔型

在JavaScript中,可以使用 Boolean() 构造函数将其他数据类型转换为布尔类型。Boolean() 函数会根据传入的值进行布尔类型的转换。

  1. 数字类型转布尔类型

在JavaScript中,将数字类型转换为布尔值遵循一些规则。这涉及到"truthy"(真值)和"falsy"(假值)的概念。以下是一些规则:

  1. Truthy 值(真值):

    • 大多数数字(除了 0NaN)都被视为真值。
    • 正数、负数、正无穷大(Infinity)都是真值。
    • 小数、负无穷大(-Infinity)也是真值。
    js 复制代码
    console.log(Boolean(1));        // true
    console.log(Boolean(-1));       // true
    console.log(Boolean(0.5));      // true
    console.log(Boolean(Infinity));  // true
  2. Falsy 值(假值):

    • 数字 0 被视为假值。
    • 负零 -0 也被视为假值。
    • 非数值的数字,如 NaN,被视为假值。
    js 复制代码
    console.log(Boolean(0));       // false
    console.log(Boolean(-0));      // false
    console.log(Boolean(NaN));     // false

字符串类型转布尔型

js 复制代码
console.log(Boolean('123')); // true
console.log(Boolean(''));    // false

这段代码使用 console.log 打印了两个语句的执行结果:

  1. Boolean('123')

    • 非空字符串 '123' 被视为真值,因此 Boolean('123') 的结果为 true
  2. Boolean('')

    • 空字符串 '' 被视为假值,因此 Boolean('') 的结果为 false

在JavaScript中,字符串类型的转换规则是:

  • Truthy 值(真值):

    • 所有非空字符串都被视为真值。
  • Falsy 值(假值):

    • 空字符串 '' 被视为假值。

Undefin 和 null

js 复制代码
console.log((Boolean(undefined)));  // false
console.log(Boolean(null)); //false
  1. Boolean(undefined)

    • undefined 在布尔转换中被视为假值,因此 Boolean(undefined) 的结果是 false
  2. Boolean(null)

    • null 在布尔转换中也被视为假值,因此 Boolean(null) 的结果是 false

基本数据类型转字符串型

在JavaScript中,String() 是一个全局对象的构造函数,可以用于将其他数据类型转换为字符串。

  1. 数字转字符串:
js 复制代码
console.log(String(123)); // '123'
console.log((String(0)));  // '0'
console.log(String(NaN));  // 'NaN'
console.log(String(Infinity));  // 'Infinity'
    1. String(123)
    • 将数字 123 转换为字符串,得到字符串 '123'
    1. String(0)
    • 将数字 0 转换为字符串,得到字符串 '0'
    1. String(NaN)
    • 将特殊的数值 NaN 转换为字符串,得到字符串 'NaN'
    1. String(Infinity)
    • 将特殊的数值 Infinity 转换为字符串,得到字符串 'Infinity'
  1. 布尔值转字符串:
js 复制代码
     console.log(String(true));   // 'true'

将布尔值true转换为字符串,得到字符串 'true'

  1. nullundefined 转字符串:
js 复制代码
console.log(String(undefined)); // 'undefined'
console.log(String(null));  // 'null
相关推荐
Tiffany_Ho几秒前
【TypeScript】知识点梳理(三)
前端·typescript
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ1 小时前
html+css+js实现step进度条效果
javascript·css·html
小白学习日记2 小时前
【复习】HTML常用标签<table>
前端·html
john_hjy2 小时前
11. 异步编程
运维·服务器·javascript
风清扬_jd2 小时前
Chromium 中JavaScript Fetch API接口c++代码实现(二)
javascript·c++·chrome
丁总学Java2 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele2 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
It'sMyGo3 小时前
Javascript数组研究09_Array.prototype[Symbol.unscopables]
开发语言·javascript·原型模式