前端新手一篇带你了解js的数据基本类型，数据类型判断以及数据类型转化

爱健身爱学习的芥末
9 阅读8分钟

JS 数据基本类型，数据类型判断以及数据类型转化

在 JS 编程里，数据类型是构建程序逻辑的基础。不管是前端开发还是后端操作，都需要清晰的把握数据特性，判断方式以及转化规则。

一、数据类型

JS 中数据类型包括两大类：

1. 基本数据类型

（一）Number 类型
  1. 数字范围界定：有几个特殊值，Number.MAX_VALUE 是能表示的最大数值，Number.MIN_VALUE 是最小正数值 。还有 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER ，用来限定安全整数的范围，超出的话计算可能出问题 。
  2. IEEE 754 规范那些事：因为计算机内部用二进制搞计算，不是十进制，所以像 0.1 + 0.2 结果不是精准的 0.3 。尾数部分只有 53 位（科学计数法里二进制第一位默认省略 ），这决定了数值能表示的范围 。要是遇到无限循环的二进制数，会被截取到 53 位尾数，还得四舍五入，就有精度损失。
  3. 关于 NaN：isNaN 比较 “松”，不光 NaN ，非数字的内容也可能判成 true 。但 Number.isNaN 比较严格，会先检查是不是数字类型，如果不是的话直接返回 false ，判断更靠谱。
（二）其他基本类型

  • Boolean：就两个值，true 和 false ，用来判断条件真假，比如 if 语句里常用。

  • String：字符串，用引号（单引号、双引号、反引号 ）包起来的文本，像 "你好" ，能存各种文字内容。

  • Null：一个值 null ，一般表示 “空对象指针”，比如变量声明了，但想让它暂时不指向具体对象，就赋值 null。

  • Undefined：变量声明了没赋值，就会自动变成 undefined ，意思就是 “未定义”。

  • Symbol：生成唯一值，防止属性名的冲突；作为隐藏属性，类似于仅你可打开查看的对象；定义特定语言可进行下一步。

  • BigInt：用于表示任意精度的整数。

基本数据类型有一个特点：就是一旦被创建值，它的值就不能被修改。当想对它的值进行修改，理论上是并不是修改它的值，而是创造一个新的值并返回。

还有一个容易混的点：null 跟 undefined 的区别
null 在 JS 诞生的时候就出现了，表示空值或者无；是被设置为对象类型的特殊值。但随着 JS 的发展，开发者觉得需要创造一个新的值去表示一个变量被声明但是没有赋值或者访问一个不存在的变量或者对象时的默认返回值。

引用类型 Object 类型

（一）内置对象

有一堆内置的，比如：

  • Array：是数组，可存一组数据，Array.prototype 是数组的原型，能继承好多方法，像 push 、pop 这些。
  • String 、Number 、Boolean：这几个是对应的对象形式，和基本类型不同，能调用更多方法，不过平时写代码基本类型用得多，需要时会自动转成对象。
  • Function：函数对象，函数在 JS 里也是一种对象，能赋值给变量、当参数传递。
  • Date：处理日期和时间的，能获取当前时间、设置指定时间，做倒计时、日历功能常用。
  • RegExp（regular expression） ：正则表达式，可以用来做字符串匹配，比如验证手机号、邮箱格式。
  • Error：标准化处理程序中的错误，让有问题的地方容易被发现。
（二）对象相关方法
  • defineProperty：可以精细控制对象属性的行为，比如控制属性能不能改、能不能遍历。
  • preventExtensions：阻止对象新增属性，existing 的属性还能改。
  • seal：更严（密封），禁止新增属性 / 禁止删除属性 / 锁定属性配置 / 允许修改已有的属性值。
  • freeze：在最严格（冰冻），阻止对象被修改，无法进行 新增属性 / 修改属性值 / 删除属性 / 修改属性特性。

数据类型判断

了解完了 JS 的数据的基本类型和 object 类型，我们需要知道如何对一些数据进行判断从而进行下一步的操作。

  1. 基本数据类型判断：typeof
    JS 有一个办法是 typeof，不需要对象为前缀进行调用，只要将变量的值放在 typeof 后面再加上一个括号就可以返回布尔值。
    使用如下：

javascript

typeof arr / typeof(arr)

示例代码：

javascript

let a = 2；
console.log(typeof a);

  1. 引用数据类型的判断：instanceof
    可判断对象的原型链 （举个例子想判断小明是不是上海人，只要判断他的爷辈是不是上海人，如果他的爷爷是上海人，那小明也是上海人，这就是判断原型链）。
    可以用很简单的示例代码：

javascript

const xiaoming = new person（）；
console.log（xiaoming instanceof person）；

  1. 对于任何类型的可以用：Object.prototype.toString (obj)
    在这个方法只需要加 call（），就可以拿到 obj 的数据原型，但是返回值是由【“object”“class” 和 “”】拼接得成。

介绍了 typeof（快速区分基本类型，不过对引用类型除函数外多返回 “object” ）、instanceof（基于原型链判断引用类型具体构造 ）、Object.prototype.toString.call（精准识别各类数据类型，返回格式规范 ）等方法，帮我们在编码时明确变量类型，为后续逻辑处理铺路 。

数据类型转化

在 JavaScript 运行过程中，数据类型常常需要相互转化，可能是代码逻辑自动触发（隐式转化 ），也可能是开发者主动处理（显式转化 ），了解转化规则，能避免类型不兼容导致的错误 。
数据类型转化具体可以分为 3 种:

  1. 基本数据类型转基本数据类型
  2. 引用数据类型转基本数据类型
  3. 基本数据类型转引用数据类型

1. 基本数据类型转基本数据类型

将一种原始类型（如字符串，数值，布尔值等）转化为另一种原始类型。

  • 隐式转化：例如数字加字符串会自动变成字符串。
  • 显式转化：需要手动讲数字变成字符串，两个再相加。

2. 引用数据类型转基本数据类型

将对象，数组等引用类型转化为字符串，数值等原始类型。
转化规则：JS 会自动调用 valueOf（） 或 toString（） 方法，也可主动用。

  • 隐式转化：

    javascript

    let arr = [1，2];
let str = arr + ""; // 结果为"1,2"

  • 显式转化：需要手动加入 arr.toString/arr.join(",")。

3. 基本数据类型转引用数据类型

类似于给一个简单的对象套上 “功能盒子”。
基本类型是 “裸数据”，引用数据就是 “装数据的盒子”，转化就是把 “裸数据装进盒子”。

  • 隐式转化：JS 偷偷套盒子（用完就扔）

    • 例子 1：基本类型调用对象方法

      javascript

      let num = 10;
console.log(num.toString(2)); // 输出“1010”

      底层逻辑：数字 10 是基本类型，本身并没有 toString（）方法，但是 JS 偷偷创建一个 number 的盒子（new Number（10）），让它调用 toString（），用完就销毁。

    • 例子 2：字符串获取长度

      javascript

      let str = "abc";
console.log(str.length); // 输出3

      底层逻辑：字符串 “abc” 是基本类型，JS 偷偷创建 String 对象盒子，调用 length 属性，用完就销毁盒子。

  • 显示转化：需要主动用 new 创建盒子

    javascript

    let strPrimitive = "hh";
let strObject = new String("hh");

console.log(strPrimitive == strObject); // 输出true
console.log(strPrimitive === strObjetc); // 输出false

三个避坑法：

  1. 隐式套盒子：基本类型调用方法时，JS 自动借盒子，用完就扔，不用操心。

  2. 显式套盒子：用 new Number () 等创建对象，但 99% 的场景不需要，因为会出错（比如 new Boolean (false) 转布尔为 true）。

  3. 牢记本质：基本类型是 “苹果”，包装对象是 “装苹果的盒子”，苹果和盒子不是同一个东西。

涵盖基本类型间转化（如 Number 与 String 相互转换、其他类型转 Boolean 等场景 ）、引用类型转基本类型（遵循对象转原始值规则 ）、基本类型转引用类型（基本类型包装成对象 ），清楚这些规则，能在不同数据交互场景（如接口传参、运算处理 ）中，让数据格式适配需求，避免类型不兼容问题 。

总结

JS 数据类型体系是编程的基础，基本类型直接存储简单值，覆盖数值、文本、逻辑等基础场景，Symbol 保障属性的唯一，BigInt 突破大数运算限制；引用类型通过引用构建复杂结构，数组、函数、日期等类型分别适配列表管理、逻辑封装、时间处理等需求 。

类型判断方面，typeof 适合快速区分基础场景，instanceof 聚焦引用类型原型链关联，Object.prototype.toString.call 则提供精准 “万能判断”，三者互补覆盖不同识别需求 。

类型转化围绕基本与引用、基本间的转换展开：基本类型转换适配运算、展示等场景，引用转基本遵循 valueOf→toString 规则，基本转引用则通过包装对象让简单值具备对象方法能力 。

最后

本人是一名海外大学 it 专业的大一新生，刚刚接触到前端这个圈子，可能在文章中会出现一些小纰漏或者理解方面的不透彻，如果可以的话，希望路过的各位大佬可以给一点指导意见。感谢大家的支持！！！

avatar
文章
阅读
粉丝