异常教程

JavaScript 数据类型（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，数据类型是构建程序的基础。无论是存储用户输入、处理 API 响应，还是设计复杂的算法，开发者都需要对 JavaScript 数据类型有清晰的理解。对于编程初学者而言，掌握这些类型能避免常见的逻辑错误；而对中级开发者来说，深入理解类型特性则能提升代码的健壮性和性能。本文将从基础到进阶，结合实际案例，系统性地讲解 JavaScript 数据类型的核心概念与应用技巧。

一、JavaScript 的基础数据类型

JavaScript 是一种动态类型语言，变量无需声明类型即可直接使用。根据数据是否可变（mutability）和内存存储方式的不同，JavaScript 的数据类型可分为两类：原始类型（Primitive Types）和引用类型（Reference Types）。

1.1 原始类型：不可变的“简单值”

原始类型直接存储在内存栈（stack）中，其值是不可变的。当对原始类型变量进行赋值或操作时，JavaScript 会创建一个新的值，而非修改原有值。原始类型包括以下 7 种：

类型描述示例
number表示整数和浮点数，JavaScript 中所有数字均以 64 位浮点数形式存储let age = 25;
string字符串类型，用单引号、双引号或反引号包裹let name = "Alice";
boolean布尔值，只有 true 和 false 两种可能let isLoggedIn = true;
null表示“空值”或“无对象”，常用于显式表示变量未指向任何对象let user = null;
undefined表示变量已声明但未赋值，或函数未显式返回值let x; console.log(x); // undefined
symbolES6 新增类型，用于创建唯一的、不可变的标识符let id = Symbol("unique");
bigintES11 新增类型，用于表示任意精度的整数，避免浮点数精度丢失let big = 123456789012345678901234567890n;

示例代码：原始类型的不可变性

let a = 10;  
let b = a;  
b = 20;  
console.log(a); // 输出 10，原始值 a 未被修改

1.2 引用类型：可变的“复杂对象”

引用类型存储在内存堆（heap）中，变量实际保存的是指向堆中对象的引用地址。当对引用类型变量进行赋值时，两个变量会共享同一个内存地址。常见的引用类型包括：

类型描述示例
object通用对象，可存储属性和方法let person = { name: "Bob" };
array数组类型，有序集合，可通过索引访问元素let numbers = [1, 2, 3];
function函数类型，可作为值传递或返回function greet() { ... }

示例代码：引用类型的共享特性

let arr1 = [1, 2, 3];  
let arr2 = arr1;  
arr2.push(4);  
console.log(arr1); // 输出 [1, 2, 3, 4]，原数组被修改

二、类型转换与类型检查

JavaScript 的动态类型特性带来了灵活性，但也需要开发者谨慎处理类型转换和类型检查。

2.1 显式类型转换（Type Casting）

通过特定方法将值转换为另一种类型：

  • Number()：将字符串或布尔值转换为数字。
  • String()：将其他类型转换为字符串。
  • Boolean()：将值转换为布尔值（true 或 false）。

示例代码：类型转换的常见场景

// 字符串转数字  
let num = Number("123"); // 123  
// 数字转字符串  
let str = String(456); // "456"  
// 布尔值转换  
let isTrue = Boolean("Hello"); // true（非空字符串转为 true）

2.2 隐式类型转换（Type Coercion）

JavaScript 会自动进行类型转换，但需注意潜在的逻辑错误：

console.log(5 + " apples"); // 输出 "5 apples"（数字转字符串）  
console.log("3" - 1);       // 输出 2（字符串转数字）

2.3 类型检查：typeof 和 instanceof

  • typeof：返回值的原始类型字符串，对引用类型返回 object（除 function 返回 function）。
  • instanceof：检测对象是否由特定构造函数创建。

示例代码：类型检查的实践

console.log(typeof "Hello"); // "string"  
console.log(typeof null);    // "object"（历史遗留问题，需注意）  

let date = new Date();  
console.log(date instanceof Date); // true

2.4 特殊值的处理：NaN 和 undefined

  • NaN（Not-a-Number）：非数字值，唯一特性是 NaN !== NaN。
  • undefined：变量未初始化或函数未返回值时的默认值。

示例代码：避免陷阱

console.log(NaN === NaN); // false  
// 检查 NaN 的正确方式  
console.log(isNaN("NaN")); // true（注意：此方法并非绝对可靠）  

function getUser() {  
  // 未返回任何值  
}  
let user = getUser();  
console.log(user === undefined); // true（在非严格模式下）

三、进阶概念：对象与原型链

3.1 对象（Object）的结构与操作

对象是键值对的集合，支持动态增删属性：

let car = {  
  brand: "Toyota",  
  year: 2022,  
  startEngine: function() {  
    console.log("Engine started!");  
  }  
};  
car.color = "Red"; // 动态添加属性  
car.startEngine(); // 调用方法

3.2 原型链（Prototype Chain）

JavaScript 通过原型链实现继承。每个对象都有一个 [[Prototype]] 属性，指向其原型对象。

示例代码：原型链的简单演示

function Animal(name) {  
  this.name = name;  
}  
Animal.prototype.speak = function() {  
  return "I am an animal!";  
};  

let cat = new Animal("Whiskers");  
console.log(cat.speak()); // "I am an animal!"

四、数据类型在实际开发中的应用

4.1 处理用户输入：字符串与数字的转换

// 将表单输入的字符串转换为数字  
let ageInput = document.getElementById("age").value;  
let age = Number(ageInput);  
if (isNaN(age)) {  
  console.log("请输入有效的年龄");  
}

4.2 数组与对象的遍历

// 遍历数组  
let fruits = ["Apple", "Banana", "Orange"];  
fruits.forEach(fruit => console.log(fruit));  

// 遍历对象属性  
let person = { name: "John", age: 30 };  
for (let key in person) {  
  if (person.hasOwnProperty(key)) {  
    console.log(key + ": " + person[key]);  
  }  
}

4.3 高级数据类型：Map 和 Set

ES6 引入的 Map 和 Set 提供了更灵活的数据结构：

// Map 允许使用对象作为键  
let map = new Map();  
map.set({ key: "id" }, "123");  
console.log(map.get({ key: "id" })); // undefined（新对象地址不同）  

// Set 存储唯一值  
let uniqueNumbers = new Set([1, 2, 2, 3]);  
console.log(uniqueNumbers.size); // 3

五、常见误区与最佳实践

5.1 类型判断的陷阱

// 错误示例：直接比较对象引用  
let obj1 = { a: 1 };  
let obj2 = { a: 1 };  
console.log(obj1 === obj2); // false（比较地址而非内容）  

// 正确做法：逐项比较属性  
function areEqual(objA, objB) {  
  return JSON.stringify(objA) === JSON.stringify(objB);  
}

5.2 避免 null 和 undefined 的混淆

let user = null; // 显式表示未找到用户  
let result = undefined; // 表示未初始化或未返回值

结论

JavaScript 数据类型构成了程序的基石，从简单的 number 到复杂的 object，每种类型都有其独特的使用场景和注意事项。对于开发者而言，掌握类型特性、合理利用类型转换和检查方法，并理解原型链等进阶概念，能显著提升代码质量与开发效率。随着 ES6+ 新特性的引入，如 Symbol 和 BigInt，JavaScript 的数据类型体系也在不断进化，开发者需持续关注语言更新，以应对复杂场景的挑战。

通过本文的系统性讲解，希望读者能建立起对 JavaScript 数据类型 的全面认知，并在实际项目中灵活运用这些知识，写出更健壮、高效的代码。

最新发布

查看更多文章