JavaScript 数据类型详解：从基础到深入

JavaScript 数据类型详解：从基础到深入

个人主页：康师傅前端面馆

在 JavaScript 中，数据类型是编程的基础。JavaScript 是一种弱类型语言，变量本身没有明确的类型限制，而是根据赋给它的值来决定其类型。理解 JavaScript 的基本数据类型、引用类型以及类型检查方法，是掌握这门语言的关键一步。

一、JavaScript 数据类型的分类

JavaScript 中的数据类型可以分为两大类：

1. 基本数据类型（Primitive Types）

这些是最简单的数据单位，不可再分。

类型	描述
undefined	变量未定义时的默认值
null	表示"空"或"无"的值
boolean	布尔值，只有 true 和 false
number	数值类型，包括整数和浮点数，也包含 NaN 和 Infinity
string	字符串类型，表示文本信息
symbol	ES6 引入，用于创建唯一的标识符
bigint	ES2020 引入，用于表示任意精度的整数

let name = "Alice"; // string
let age = 25;       // number
let isStudent = true; // boolean
let id = Symbol("id"); // symbol
let bigNumber = 9007199254740991n; // bigint

2. 引用数据类型（Reference Types）

这些类型存储的是对象的引用地址，而不是实际值。

• object：对象、数组、函数等都属于 object 类型
• function：虽然被归为 object 类型，但具有可调用特性

let person = { name: "Bob", age: 30 }; // object
let numbers = [1, 2, 3];                // array (也是 object)
let greet = function() { console.log("Hello!"); }; // function

二、基本数据类型详解

1. undefined

表示一个变量声明了但没有被赋值。

let x;
console.log(x); // undefined

⚠️ 注意：不要手动将变量设置为 undefined，应使用 null 来表示"空值"。

2. null

表示一个"空"或"无效"的引用值，常用于有意清空变量。

let user = null;
console.log(user); // null

⚠️ 特别注意：typeof null 返回 "object"，这是一个历史遗留错误。

3. boolean

布尔值用于逻辑判断，只有两个取值：true 和 false。

let isLoggedIn = true;
if (isLoggedIn) {
  console.log("用户已登录");
}

4. number

JavaScript 中所有数字都是 number 类型，包括整数、浮点数、特殊值如 NaN 和 Infinity。

let count = 10;
let price = 19.99;
let notANumber = NaN;
let infinity = Infinity;

⚠️ 浮点数精度问题：

console.log(0.1 + 0.2 === 0.3); // false

5. string

字符串是字符序列，可以用单引号 ' '、双引号 " " 或模板字符串 定义。

let greeting = "Hello";
let template = `欢迎 ${greeting}!`; // 模板字符串

6. symbol

用于创建唯一标识符，不会与其他属性名冲突。

let id = Symbol("user_id");
let user = {
  [id]: 123
};
console.log(user[id]); // 123

7. bigint

用于处理大于 Number.MAX_SAFE_INTEGER 的整数。

let bigIntValue = 9007199254740991n;
console.log(typeof bigIntValue); // "bigint"

三、引用数据类型详解

1. object

对象是键值对集合，是最常用的复杂数据结构。

let person = {
  name: "Alice",
  age: 28,
  sayHello: function() {
    console.log("Hello");
  }
};

2. array

数组是一种特殊的对象，用于有序存储多个值。

let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"

3. function

函数是 JavaScript 中的一等公民，可以作为参数传递、返回值等。

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

4. const 与引用类型的特殊行为

虽然 const 声明的变量不能重新赋值，但当变量是对象或数组时，其内部属性或元素仍然可以被修改 。这是因为 const 限制的是变量的内存地址不可变，而不是对象内容本身。

示例 1：修改对象属性

const user = { name: "Alice", age: 25 };
user.age = 30; // 合法，修改对象属性
console.log(user); // { name: "Alice", age: 30 }

// user = { name: "Bob" }; // 报错：Assignment to constant variable.

示例 2：修改数组元素

const colors = ["red", "green"];
colors.push("blue"); // 合法，修改数组内容
console.log(colors); // ["red", "green", "blue"]

// colors = ["yellow"]; // 报错：Assignment to constant variable.

原理说明

• const 保证的是变量指向的内存地址不变
• 对象和数组是引用类型，变量存储的是指向堆内存的指针
• 修改对象属性或数组元素不会改变指针的值，因此允许操作

四、类型检查与转换

1. 使用 typeof 判断类型

适用于基本类型（除 null 外），不适用于对象。

console.log(typeof "hello"); // "string"
console.log(typeof 123);     // "number"
console.log(typeof true);    // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);    // "object" ------ 错误！

2. 使用 instanceof 判断对象类型

适用于判断某个对象是否是某个构造函数的实例。

let arr = [1, 2, 3];
console.log(arr instanceof Array); // true

3. 显式类型转换

可以使用内置函数进行类型转换：

let str = "123";
let num = Number(str); // 转换为数字
let bool = Boolean(str); // 转换为布尔值

4. 隐式类型转换

JavaScript 在运算中会自动进行类型转换，可能导致意外结果。

console.log("5" - 3);  // 2
console.log("5" + 3);  // "53"
console.log("5" < 6);  // true

五、最佳实践总结

实践建议	说明
使用 const 和 let 替代 var	更安全的作用域控制
不要手动将变量设为 undefined	推荐使用 null 表示空值
使用 === 和 !== 进行比较	避免隐式类型转换带来的问题
对象和数组使用深拷贝避免副作用	如使用 JSON.parse(JSON.stringify(obj))
使用 Linter 工具检测潜在类型错误	如 ESLint、TypeScript
使用 TypeScript 提高类型安全性	在大型项目中推荐使用静态类型系统

六、附录：常用类型判断方法汇总

类型	推荐判断方式
undefined	typeof x === 'undefined'
null	x === null
boolean	typeof x === 'boolean'
number	typeof x === 'number' 或 Number.isNaN()
string	typeof x === 'string'
symbol	typeof x === 'symbol'
bigint	typeof x === 'bigint'
array	Array.isArray(x)
object	typeof x === 'object' && x !== null
function	typeof x === 'function'