JavaScript类型体系详解

一、原始类型(Primitive Types)

JavaScript共有 7种原始数据类型,其中6种为基础类型:

特殊说明:

  1. nulltypeof返回"object"(纯纯语言bug,null本身就是一个基础类型)
  2. NaN !== NaN,需用Number.isNaN()检测
  3. 另外的BigInt字面量必须带n后缀

二、对象类型(Object Types)

所有非原始类型的值都是对象,包含 9大核心内置对象

1. Object

javascript 复制代码
// 对象基类
const obj = new Object();
const literalObj = {};

2. Array

javascript 复制代码
// 数组对象
const arr = new Array(3);
const literalArr = [1, 2, 3];

3. Function

javascript 复制代码
// 函数对象
const func = new Function('a', 'b', 'return a + b');
function sum(a, b) { return a + b; }

4. Date

javascript 复制代码
// 日期时间处理
const now = new Date();
console.log(now.toISOString()); // "2023-08-20T08:30:00.000Z"

5. RegExp

javascript 复制代码
// 正则表达式对象
const regex = new RegExp('\\d+', 'g');
const literalRegex = /\d+/g;

6. Error

javascript 复制代码
// 错误对象体系
try {
  throw new Error('Custom message');
} catch (e) {
  console.log(e instanceof Error); // true
}

7. Math

javascript 复制代码
// 数学工具对象(单例)
console.log(Math.PI); // 3.141592653589793
console.log(Math.random()); // 0~1随机数

8. Promise

javascript 复制代码
// 异步操作容器(ES6)
const promise = new Promise((resolve) => {
  setTimeout(() => resolve('Done'), 1000);
});

总结图:

三、类型系统特征

1. 包装对象(Wrapper Objects)

原始类型可通过构造函数临时包装为对象:

javascript 复制代码
const strPrimitive = "hello";
const strObject = new String(strPrimitive);

console.log(typeof strPrimitive); // "string"
console.log(typeof strObject);    // "object"

2. 类型检测方法对比

3. 类型转换规则

javascript 复制代码
// 显式转换
Number("123");     // 123
String(true);      // "true"
Boolean([]);       // true

// 隐式转换
"5" + 3 = "53"     // 字符串拼接
"5" - 3 = 2        // 数字运算

四、特殊对象类型

1. 全局对象

  • 浏览器环境:window
  • Node.js环境:global
  • ES2020新增:globalThis

2. 类型化数组

javascript 复制代码
// 二进制数据处理
const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);

3. 集合对象

javascript 复制代码
// ES6新增数据结构
const map = new Map();
const set = new Set();

五、最佳实践建议

  1. 优先使用字面量语法

    javascript 复制代码
    // Good
    const arr = [];
    const obj = {};
    
    // Bad
    const arr = new Array();
    const obj = new Object();
  2. 严格类型检查

    javascript 复制代码
    // 检测数组类型
    Array.isArray(someVar);
    
    // 检测NaN
    Number.isNaN(someVar);
  3. 避免隐式类型转换

    javascript 复制代码
    // 使用全等运算符
    if (x === 42) { ... }
    
    // 显式转换
    const num = parseInt(str, 10);//如果第一个字符无法转换,则返回NaN

理解JavaScript类型体系是掌握语言核心的关键,开发者应特别注意原始类型与对象类型的本质区别,合理选择数据类型和操作方法。

相关推荐
Z兽兽几秒前
React@18+Vite项目配置env文件
前端·react.js·前端框架
SuniaWang7 分钟前
《Spring AI + 大模型全栈实战》学习手册系列 · 专题六:《Vue3 前端开发实战:打造企业级 RAG 问答界面》
java·前端·人工智能·spring boot·后端·spring·架构
A_nanda1 小时前
根据AI提示排查vue前端项目
前端·javascript·vue.js
happymaker06261 小时前
web前端学习日记——DAY05(定位、浮动、视频音频播放)
前端·学习·音视频
~无忧花开~1 小时前
React状态管理完全指南
开发语言·前端·javascript·react.js·前端框架
LegendNoTitle2 小时前
计算机三级等级考试 网络技术 选择题考点详细梳理
服务器·前端·经验分享·笔记·php
@大迁世界2 小时前
1.什么是 ReactJS?
前端·javascript·react.js·前端框架·ecmascript
BJ-Giser3 小时前
Cesium 基于EZ-Tree的植被效果
前端·可视化·cesium
王码码20354 小时前
Flutter for OpenHarmony:Flutter 三方库 algoliasearch 毫秒级云端搜索体验(云原生搜索引擎)
android·前端·git·flutter·搜索引擎·云原生·harmonyos
发现一只大呆瓜4 小时前
深入浅出 AST:解密 Vite、Babel编译的底层“黑盒”
前端·面试·vite