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

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

前言

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

基本数据类型转换

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

1.Number(数字):

  • 用于表示整数或浮点数。
javascriptCopy code
var integer = 42;
var float = 3.14;

2.String(字符串):

  • 用于表示文本。
var text = "Hello, World!";

3.Boolean(布尔):

  • 用于表示逻辑值,只能是 truefalse
var isTrue = true;
var isFalse = false;

4.Undefined(未定义):

  • 表示声明了变量但未给其赋值时的默认值。
var undefinedVariable;

5.Null(空):

  • 表示变量没有值,是一种特殊的空值。
var nullValue = null;

6.Symbol(符号):

  • 引入于ECMAScript 6,用于创建唯一的标识符。
var symbol = Symbol("unique");

7.BigInt(大整形):

var big = 123n

基本数据类型转数字型

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

  1. 字符串转数字
console.log(Number('123')); // 123
console.log(Number('hello')); // NaN
  1. 将字符串 '123' 转换为数字。在这种情况下,字符串表示的是一个整数,所以 Number('123') 的结果是数字 123。因此,console.log 会输出 123
  2. 试图将字符串 'hello' 转换为数字。然而,由于字符串 'hello' 不是有效的数字表示,因此 Number('hello') 的结果是 NaN(Not a Number)。NaN 是一个特殊的 JavaScript 值,表示无法表示的或者非数字的值。因此,console.log 会输出 NaN
  1. 布尔类型转数字
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 转数字
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)也是真值。
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,被视为假值。
console.log(Boolean(0));       // false
console.log(Boolean(-0));      // false
console.log(Boolean(NaN));     // false

字符串类型转布尔型

console.log(Boolean('123')); // true
console.log(Boolean(''));    // false

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

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

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

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

Undefin 和 null

console.log((Boolean(undefined)));  // false
console.log(Boolean(null)); //false
  1. Boolean(undefined)
  • undefined 在布尔转换中被视为假值,因此 Boolean(undefined) 的结果是 false
  1. Boolean(null)
  • null 在布尔转换中也被视为假值,因此 Boolean(null) 的结果是 false

基本数据类型转字符串型

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

  1. 数字转字符串:
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. 布尔值转字符串:
console.log(String(true));   // 'true'
将布尔值true转换为字符串,得到字符串 'true'
  1. nullundefined 转字符串:
console.log(String(undefined)); // 'undefined'
console.log(String(null));  // 'null


相关文章
|
JavaScript
JS深拷贝----采用递归实现(例子+难点解析)
JS深拷贝----采用递归实现(例子+难点解析)
127 1
|
3月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
4月前
|
Web App开发 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