10分钟的时间，带你彻底搞懂JavaScript数据类型转换

news2024/11/18 9:22:39

前言

 📫 大家好，我是南木元元，热衷分享有趣实用的文章，希望大家多多支持，一起进步！

 🍅 个人主页：南木元元

目录

JS数据类型

3种转换类型

ToBoolean

ToString

ToNumber

对象转原始类型

隐式类型转换

结语

JS数据类型

首先我们需要知道，js中数据类型分为两大类：基本数据类型和引用数据类型。

7种基本数据类型分别是：

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol
  • BigInt

引用数据类型即对象Object，包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-Date，数学函数-Math，函数对象-Function。

3种转换类型

在JS中，类型转换只有三种情况：

  • 转换成布尔值
  • 转换成字符串
  • 转换成数字

数据类型转换的基本规则见下表：

​

ToBoolean

ToBoolean指其他类型转换为布尔类型的操作。

js中的假值只有0、-0、NaN、""、false、null、undefined，其它值转为布尔型都为true。

console.log(Boolean(0)); // flase
console.log(Boolean(-0)); // flase
console.log(Boolean(NaN)); // flase
console.log(Boolean("")); // flase
console.log(Boolean(null)); // flase
console.log(Boolean(undefined)); // flase
console.log(Boolean(false)); // flase

//其它所有值都转为true，包括所有对象
console.log(Boolean([])); //true
console.log(Boolean({})); //true
console.log(Boolean("0")); //true
console.log(Boolean(1)); //true

ToString

ToString指其他类型的值转换为字符串类型的操作。

转为字符串的规则：

  • null：转为"null"

  • undefined：转为"undefined"

  • Boolean类型：true转为"true"，false转为"false"

  • Number类型：直接转换，如5转为"5"（不过那些极小和极大的数字会使用指数形式，如1e21转为"1e+21"）

  • Symbol类型：直接转换（只允许显式强制类型转换，使用隐式强制类型转换会报错）

  • 数组：转为由逗号分隔的一系列数字组成的字符串 ，如[1,2]转为"1,2"

  • 普通对象：会调用Object.prototype.toString()，返回"[object Object]"，如果对象有自己的 toString() 方法，字符串化时就会调用该方法并使用其返回值。

console.log(String(null)); //'null'
console.log(String(undefined)); //'undefined'
console.log(String(true)); //'true'
console.log(String(false)); //'false'
console.log(String(5)); //'5'
console.log(String(1e21)); //'1e+21'
console.log(String(Symbol("5"))); //"Symbol(5)"
console.log(String([1, 2]));  '1,2'
console.log(String({})); // '[object Object]'

ToNumber

ToNumber指其他类型转换为数字类型的操作。

转为数字的规则：

  • null：转为0
  • undefined：转为NaN
  • Boolean类型：true转为1，false转为 0
  • String类型：如果是纯数字形式，则转为对应的数字，空字符转为0，否则转为NaN
  • Symbol类型：不能转为数字，会报错
  • 对象：会先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log(Number(true)); //1
console.log(Number(false)); // 0
console.log(Number("10")); //10
console.log(Number("")); //0
console.log(Number("10a")); //NaN
console.log(Number(Symbol("a"))); //TypeError: Cannot convert a Symbol value to a number
console.log(Number([])); // 0
console.log(Number(["1"])); // 1
console.log(Number({})); // NaN

对象转原始类型

上面提到了如果是对象，则会先被转为基本类型，那么这个过程到底是怎么样的？

其实，对象转原始类型，会调用内置的ToPrimitive方法，逻辑如下：

  1. 如果有Symbol.toPrimitive()方法，优先调用再返回
  2. 调用valueOf()，如果转换为原始类型，则返回
  3. 调用toString()，如果转换为原始类型，则返回
  4. 如果都没有返回原始类型，会报错

注意：Date是个例外，要先调用toString，再调用valueOf来转换

来看下面的几个例子：

1.有Symbol.toPrimitive()方法，优先调用返回。

var obj = {
  value: 3,
  valueOf() {
    return 4;
  },
  toString() {
    return '5'
  },
  [Symbol.toPrimitive]() {
    return 6
  }
}
console.log(obj + 1); // 输出7

2.toString 返回的不是基本类型值，valueOf 返回的基本类型值。

// toString 返回的不是基本类型值，valueOf 返回的基本类型值
var obj = {
  toString: function () {
    return {};
  },
  valueOf: function () {
    return null;
  },
};
console.log(String(obj)); // "null"

 3.valueOf和toString都没有返回原始类型，会报错。

// 先判断valueOf⽅法，再判断toString⽅法，返回的都不是基本类型值，报错
var obj = {
  valueOf: function () {
    return {};
  },
  toString: function () {
    return {};
  },
};
console.log(Number(obj)); // Uncaught TypeError: Cannot convert object to primitive value

隐式类型转换

在开发中，为什么建议大家使用===而不是==呢？

其实主要原因就是需要避免==所带来的隐式类型转换，下面就来看看js中有着很多坑的隐式转换。

JavaScript中的隐式类型转换主要发生在+、-、*、/以及==、>、<这些运算符之间。而这些运算符只能操作基本类型值，所以在进行这些运算前的第一步就是将两边的值用上面的ToPrimitive方法转换成基本类型，再进行操作。

不同操作符的隐式转换规则不同。

  • +操作符

两边有至少一个string类型变量时，两边的变量都会被隐式转换为字符串；其他情况下两边的变量都会被转换为数字。

1 + "23"; // '123'
1 + false; // 1
1 + Symbol(); // Uncaught TypeError: Cannot convert a Symbol value to a number
"1" + false; // '1false'
false + true; // 1
  •  -、*、\操作符

一律转换成数值后计算。

1 * "23"; // 23
1 * false; // 0
1 / "aa"; // NaN
  • <和>比较符

两边都是字符串，则比较字母表顺序；其他情况下，转换为数字再比较。

"ca" < "bd"; // false
"a" < "b"; // true
"12" < 13; // true
false > -1; // true
  • ==操作符

==的隐式转换规则相对来说比较复杂，它的转换规则如下：

  1. 两边的类型是否相同，相同的话就比较值的大小
  2. 判断两边是否是null和undefined，是的话就返回true
  3. 判断的类型是否是String和Number，是的话，把String类型转换成Number，再进行比较
  4. 判断其中一方是否是Boolean，是的话就把Boolean转换成Number，再进行比较
  5. 如果其中一方为Object，且另一方为String、Number或者Symbol，会将Object转换成字符串，再进行比较

其实可以概括一下：两边的值都尽量转成Number。

console.log(3 == true); //false
console.log("0" == false); //true
console.log("0" == 0); //true
console.log({ a: 1 } == true); //false
console.log({ a: 1 } == "[object Object]"); //true

了解了上面的规则后，来看下面几道经典的题。

1.[]==[]的结果是什么？为什么？

答案为false。

原因：==两边都是对象的话，仅当它们引用同一个对象时返回true。数组是引用数据类型，在创建两个不同的数组时，引用的是两个不同的对象，所以不同。

2.[] == ![]结果是什么？为什么？

答案为true。

原因：先算右边（!的优先级要大于==），右边的结果是布尔值，那么根据上面==的隐式转换规则4，两边都转换成数字然后进行比较。左边[]转换为数字为0。右边![] 首先是转换为布尔值，由于[]作为一个引用类型转换为布尔值为true，因此![]为false，进而在转换成数字，变为0。0 == 0 ， 所以结果为true。

3.如何让if(a == 1 && a == 2)条件成立？

其实就是利用==的隐式类型转换以及对象转原始类型的过程。

var a = {
  value: 0,
  valueOf: function() {
    this.value++;
    return this.value;
  }
};
// 利用隐式类型转换，对象需要先转原始类型，再应用隐式类型转换规则
console.log(a == 1 && a == 2);//true

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~ 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1270260.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Go语言多线程爬虫万能模板：实现高效数据采集

Go语言多线程爬虫万能模板：实现高效数据采集

随着互联网的快速发展&#xff0c;网络爬虫已经成为数据采集的重要工具。Go语言作为高性能编程语言之一&#xff0c;具有出色的并发性能和丰富的网络库&#xff0c;非常适合用于编写多线程爬虫。本文将介绍一个基于Go语言的多线程爬虫万能模板&#xff0c;并阐述其设计思路、核…
阅读更多...
精密制造ERP系统包含哪些模块?精密制造ERP软件是做什么的

精密制造ERP系统包含哪些模块?精密制造ERP软件是做什么的

不同种类的精密制造成品有区别化的制造工序、工艺流转、品质标准、生产成本、营销策略等&#xff0c;而多工厂、多仓库、多车间、多部门协同问题却是不少精密制造企业遇到的管理难题。 有些产品结构较为复杂&#xff0c;制造工序繁多&#xff0c;关联业务多&#xff0c;传统的…
阅读更多...
ruoyi-vue 整合EMQX接收MQTT协议数据

ruoyi-vue 整合EMQX接收MQTT协议数据

EMQX安装完成后&#xff0c;需要搭建客户端进行接收数据进一步对数据处理&#xff0c;下面介绍基于若依分离版开源框架来整合EMQX方法。 1.application.yml 添加代码 mqtt:hostUrl: tcp://localhost:1883username: devpassword: devclient-id: MQTT-CLIENT-DEVcleanSession: …
阅读更多...
leetcode 15. 三数之和（优质解法）

leetcode 15. 三数之和（优质解法）

代码&#xff1a; class Solution {public static List<List<Integer>> threeSum(int[] nums) {Arrays.sort(nums);List<List<Integer>> listsnew ArrayList<>();int lengthnums.length;for(int i0;i<length-3;){int lefti1;int rightlength…
阅读更多...
springboot基础配置及maven运行

springboot基础配置及maven运行

目录 1、spring快速开始&#xff1a; 2、通过idea工具打开导入包 3、maven打包 1、springboot快速开始&#xff1a; 环境依赖&#xff1a;jdk17 Spring | Quickstart spring初始化包下载&#xff1a; 点击generate&#xff0c;下载包 2、通过idea工具打开导入包 我之前写了…
阅读更多...
RK3568 android 13 内置 google GMS服务

RK3568 android 13 内置 google GMS服务

需求&#xff1a;Android 系统在国外使用安装app很多需要gms服务&#xff0c;否则无法正常使用&#xff0c;所以出厂前必须要把GMS包集成进系统 1.下载gms包https://download.csdn.net/download/qq_46524402/88136401 2.解压gms包 并放到Android SDK根目录的vender文件夹下 3…
阅读更多...
内网渗透隧道技术一netsh

内网渗透隧道技术一netsh

隧道技术 百度百科&#xff1a; 网络隧道技术指的是利用一种网络协议来传输另一种网络协议&#xff0c;它主要利用网络隧道协议来实现这种功能。网络隧道技术涉及了三种网络协议&#xff0c;即网络隧道协议、隧道协议下面的承载协议和隧道协议所承载的被承载协议 在网络安全中…
阅读更多...
通往数百万量子比特的商业化之路——

通往数百万量子比特的商业化之路——

在已知物理定律的限制下&#xff0c;我们能制造出的最好的计算机是什么&#xff1f;争夺这一头衔的是通用、容错和可扩展的量子计算机。 这台建立在量子理论基础上的机器能够运行任何量子算法&#xff0c;检测并纠正任何可能危及计算的错误&#xff0c;并容纳大量量子比特。 当…
阅读更多...
开发电脑软件学什么语言?哪些语言最适合?

开发电脑软件学什么语言?哪些语言最适合?

随着信息技术的不断发展&#xff0c;电脑软件已经成为人们日常生活和工作中不可或缺的一部分&#xff0c;许多人都希望学习如何开发电脑软件&#xff0c;而选择一种合适的编程语言是成功的关键&#xff0c;下面将介绍几种最适合开发电脑软件的编程语言&#xff0c;以及一些基础…
阅读更多...
自动提交日志脚本（2）状态机管理

自动提交日志脚本（2）状态机管理

使用状态机作为管理 """ filename:statusHandle.py author:LinXingNan time:2023-11-27 """ import os from enum import Enumimport configHandle import emailReport import logHandle import timeHandle import logging from datetime impo…
阅读更多...
flask中路由route根据字典ID展示部分内容，字典名展示全部内容

flask中路由route根据字典ID展示部分内容，字典名展示全部内容

from flask import Flask, jsonify , request,render_template,app Flask(__name__)app.config[JSON_AS_ASCII] Falsebooks [{"id": 1, "name": 三国演义},{"id": 2, "name": 水浒传},{"id": 3, "name": 西游记…
阅读更多...
【UE】热成像效果

【UE】热成像效果

效果 步骤 1. 新建一个空白项目&#xff0c;勾选“光线追踪”选项 2. 添加一个第一人称游戏内容包到项目 3. 打开第一人称角色蓝图“BP_FirstPersonCharacter”&#xff0c;添加一个后期处理组件 在事件图表中设置通过按键N来切换不同的后期处理效果 将后期处理设置引脚提升为…
阅读更多...
后端Long型数据传到前端js后精度丢失的问题

后端Long型数据传到前端js后精度丢失的问题

假设一个场景&#xff0c;MybatisPlus的雪花算法生成long类型主键ID&#xff0c;存入数据库&#xff0c;前端获取到数据后&#xff0c;要执行一个更新操作&#xff08;updateById&#xff09;&#xff0c;但这时会出现无法成功更新的情况&#xff01;这是因为前端在长度大于17位…
阅读更多...
TCP/IP封装

TCP/IP封装

数据如何通过网络发送&#xff1f;为什么 OSI 模型需要这么多层&#xff1f; 下图显示了数据在网络传输时如何封装和解封装。 步骤1&#xff1a;当设备A通过HTTP协议通过网络向设备B发送数据时&#xff0c;首先在应用层添加HTTP头。 步骤2&#xff1a;然后将TCP或UDP标头添加…
阅读更多...
Python数据清洗--运用3δ准则检测异常值

Python数据清洗--运用3δ准则检测异常值

1.3δ准则检测异常值的基本原理 当数据为连续型变量、服从或近似服从正态分布时&#xff0c;可运用3δ准则检测异常值。在该准则条件下&#xff0c;数据值与均值的偏差如果超过标准差的3倍&#xff0c;那么该数据值就会被视为异常值。即针对样本xi&#xff0c;如果满足&#x…
阅读更多...
【Linux--进程】

【Linux--进程】

目录 一、基本概念1.1描述进程-PCB1.2task_struct中内容分类 二、了解进程2.1查看进程2.2通过系统调用获取进程标识符 三、fork创建进程3.1fork()函数3.2写时拷贝 四、进程的状态4.1操作系统学科里的进程状态&#xff08;运行、阻塞、挂起&#xff09;4.具体的Linux状态是如何维…
阅读更多...
MySQL之undo日志

MySQL之undo日志

聊聊undo log 什么是undo log undo log&#xff08;回滚事务&#xff09;&#xff0c;在事务没有提交前&#xff0c;MySQL将记录更新操作的反向操作到undo log日志中&#xff0c;以便进行回退保证事务的原子性 undo log的作用 1.提供回滚操作 我们在进行数据更新操作的时候…
阅读更多...
【Android Jetpack】Lifecycle 感知生命周期

【Android Jetpack】Lifecycle 感知生命周期

文章目录 背景示例LifeCycle的原理LifecycleOwner自定义LifecycleOwnerLifecycleObserver 示例改进使用LifecycleService解耦Service与组件整个应用进程的生命周期ProcessLifecycleOwner 背景 在Android应用程序开发中&#xff0c;解耦很大程度上表现为系统组件的生命周期与普…
阅读更多...
C++学习之路（十三）C++ 用Qt5实现一个工具箱（增加一个Base64加解密功能）- 示例代码拆分讲解

C++学习之路（十三）C++ 用Qt5实现一个工具箱（增加一个Base64加解密功能）- 示例代码拆分讲解

上篇文章&#xff0c;我们用 Qt5 实现了在小工具箱中添加了《XML文本格式化功能》功能。为了继续丰富我们的工具箱&#xff0c;今天我们就再增加一个平时经常用到的功能吧&#xff0c;就是「 Base64加解密 」功能。下面我们就来看看如何来规划开发一个这样的小功能并且添加到我…
阅读更多...
改造http.server为简单的文件下载服务

改造http.server为简单的文件下载服务

改造 修改http.server.SimpleHTTPRequestHandler&#xff0c;实现简单的文件上传下载服务 simple_http_file_server.py&#xff1a; # !/usr/bin/env python3import datetime import email import html import http.server import io import mimetypes import os import posi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023