《前端面试题：JS数据类型》

JavaScript 数据类型指南：从基础到高级全解析

一、JavaScript 数据类型概述

JavaScript 作为一门动态类型语言，其数据类型系统是理解这门语言的核心基础。在 ECMAScript 标准中，数据类型分为两大类：

1. 原始类型（Primitive Types）

• 存储在栈内存中
• 按值访问
• 不可变（immutable）
• 包括：Undefined, Null, Boolean, Number, String, Symbol, BigInt

2. 引用类型（Reference Types）

• 存储在堆内存中
• 按引用访问
• 可变（mutable）
• 包括：Object及其子类型（Array, Function, Date, RegExp等）

图：JavaScript 数据类型分类及内存结构

二、原始数据类型详解

1. Undefined 类型

特征：

• 表示变量已声明但未赋值
• 类型为 "undefined"，值为 undefined

let uninitialized;
console.log(typeof uninitialized); // "undefined"
console.log(uninitialized === undefined); // true

常见场景：

• 未初始化的变量
• 函数无返回值
• 函数参数未传递

2. Null 类型

特征：

• 表示"无对象"或"空引用"
• 类型为 "object"（历史遗留问题），值为 null

let empty = null;
console.log(typeof empty); // "object" (特殊历史原因)
console.log(empty === null); // true

面试题：null 和 undefined 的区别？
答案：

• undefined 表示未定义（变量声明未赋值）
• null 表示空对象引用（主动赋值）

3. Boolean 类型

特征：

• 仅有两个值：true 和 false
• 用于逻辑判断和控制流程

let isActive = true;
let isCompleted = false;// 自动转换规则
console.log(Boolean(0)); // false
console.log(Boolean("hello")); // true
console.log(Boolean(null)); // false

真值（Truthy）与假值（Falsy）：

假值（Falsy）	真值（Truthy）
false	true
0, -0, NaN	非零数字
""（空字符串）	非空字符串
null	任何对象
undefined	数组（即使空数组）
	function(){}

4. Number 类型

特征：

• 双精度64位浮点数（遵循IEEE 754标准）
• 表示整数和浮点数
• 特殊值：Infinity, -Infinity, NaN

let integer = 42;
let float = 3.14159;
let hex = 0xFF; // 255
let binary = 0b1010; // 10 (ES6)
let octal = 0o755; // 493 (ES6)// 特殊数值
console.log(1 / 0); // Infinity
console.log(-1 / 0); // -Infinity
console.log(0 / 0); // NaN// 精度问题（IEEE 754）
console.log(0.1 + 0.2 === 0.3); // false

解决精度问题：

// 使用toFixed处理显示
console.log((0.1 + 0.2).toFixed(2)); // "0.30"// 转换为整数计算
const result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

5. String 类型

特征：

• 表示文本数据
• 不可变（任何修改都创建新字符串）
• 支持UTF-16编码

let name = "Alice";
let greeting = 'Hello, ' + name + '!'; // 传统拼接
let template = `Hello, ${name}!`; // 模板字符串(ES6)// 字符串方法
console.log(name.length); // 5
console.log(name.charAt(0)); // "A"
console.log(name.includes("li")); // true
console.log("hello".repeat(3)); // "hellohellohello"

特殊字符：

console.log("First line\nSecond line"); // 换行
console.log("Path: C:\\Windows\\System32"); // 转义
console.log("\u{1F600}"); // 😀 (Unicode表情)

6. Symbol 类型（ES6）

特征：

• 表示唯一标识符
• 避免属性名冲突
• 不可枚举（默认）

// 创建Symbol
const id = Symbol("unique identifier");
const id2 = Symbol("unique identifier");console.log(id === id2); // false (每个Symbol都是唯一的)// 对象属性
const user = {name: "Alice",[id]: 12345 // Symbol作为键
};console.log(Object.keys(user)); // ["name"] (Symbol属性不可枚举)
console.log(Reflect.ownKeys(user)); // ["name", Symbol(unique identifier)]

全局Symbol注册表：

// 创建或获取全局Symbol
const globalId = Symbol.for("global.id");
const sameId = Symbol.for("global.id");console.log(globalId === sameId); // true
console.log(Symbol.keyFor(globalId)); // "global.id"

7. BigInt 类型（ES2020）

特征：

• 表示任意精度的整数
• 解决 Number 类型精度限制
• 字面量加 n 后缀

// 超过Number安全范围
const maxSafe = Number.MAX_SAFE_INTEGER; // 9007199254740991
console.log(maxSafe + 1 === maxSafe + 2); // true!// BigInt解决方案
const bigNum = 9007199254740991n;
console.log(bigNum + 1n); // 9007199254740992n
console.log(bigNum + 2n); // 9007199254740993n// 类型转换
console.log(10n === 10); // false (类型不同)
console.log(10n == 10); // true (值相等)

三、引用数据类型详解

1. Object 类型

特征：

• 键值对集合
• 原型链继承机制
• 引用传递

// 对象创建
const person = {name: "Alice",age: 30,greet() {return `Hello, I'm ${this.name}`;}
};// 动态属性
person.job = "Engineer";
delete person.age;// 属性访问
console.log(person.name); // "Alice"
console.log(person["job"]); // "Engineer"
console.log(person.greet()); // "Hello, I'm Alice"

2. Array 类型

特征：

• 有序数据集合
• 特殊类型的对象
• 索引从0开始

// 数组创建
const fruits = ["Apple", "Banana", "Orange"];// 常用方法
fruits.push("Mango"); // 末尾添加
fruits.pop(); // 移除末尾
fruits.unshift("Strawberry"); // 开头添加
fruits.shift(); // 移除开头// 高阶函数
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]
const sum = numbers.reduce((total, num) => total + num, 0); // 10// 数组解构(ES6)
const [first, second] = fruits;
console.log(first); // "Apple"

3. Function 类型

特征：

• 可执行对象
• 一等公民（可作为参数和返回值）
• 闭包支持

// 函数定义
function add(a, b) {return a + b;
}// 函数表达式
const multiply = function(x, y) {return x * y;
};// 箭头函数(ES6)
const divide = (a, b) => a / b;// 高阶函数
function createMultiplier(factor) {return function(number) {return number * factor;};
}const double = createMultiplier(2);
console.log(double(5)); // 10

4. Date 类型

特征：

• 表示日期和时间
• 基于UTC时间
• 月份从0开始（0=1月）

const now = new Date();
console.log(now.toString()); // "Thu Aug 05 2023 14:30:00 GMT+0800"// 特定日期
const birthday = new Date(1990, 6, 15); // 1990年7月15日// 日期计算
const msDiff = now - birthday;
const years = msDiff / (1000 * 60 * 60 * 24 * 365.25);
console.log(Math.floor(years)); // 年龄// 日期格式化
console.log(now.toLocaleDateString("zh-CN")); // "2023/8/5"

5. RegExp 类型

特征：

• 表示正则表达式
• 用于模式匹配和文本处理

// 创建正则
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
const anotherPattern = new RegExp("\\d{3}-\\d{4}", "g"); // 等价于/\d{3}-\d{4}/g// 使用方法
const text = "Contact: 123-4567, 890-1234";
const matches = text.match(/\d{3}-\d{4}/g); // ["123-4567", "890-1234"]// 测试匹配
console.log(emailPattern.test("user@example.com")); // true
console.log(emailPattern.test("invalid@.com")); // false

四、类型检测与转换

1. 类型检测方法

方法	优点	缺点	示例
typeof	基本类型检测	null返回"object"	typeof "hello" // "string"
instanceof	检测对象类型	不适用基本类型	[] instanceof Array // true
Array.isArray()	精确检测数组	仅适用于数组	Array.isArray([]) // true
Object.prototype.toString.call()	最准确方法	语法较复杂	Object.prototype.toString.call(null) // "[object Null]"

2. 类型转换

显式转换：

// 转数字
console.log(Number("42")); // 42
console.log(parseInt("10px", 10)); // 10
console.log(parseFloat("3.14em")); // 3.14// 转字符串
console.log(String(42)); // "42"
console.log((123).toString()); // "123"// 转布尔
console.log(Boolean(1)); // true
console.log(!!"hello"); // true (双非运算符)

隐式转换：

// 字符串拼接
console.log("Value: " + 10); // "Value: 10"// 数学运算
console.log("5" * "2"); // 10 (自动转数字)
console.log("5" + "2"); // "52" (字符串拼接)// 相等比较
console.log(1 == "1"); // true (类型转换)
console.log(1 === "1"); // false (严格相等)

五、核心面试题解析

1. 如何准确判断数组类型？

// 最佳实践
function isArray(target) {return Array.isArray(target);
}// 兼容方案
function isArrayCompat(target) {return Object.prototype.toString.call(target) === "[object Array]";
}

2. 深拷贝如何实现？

// JSON方法（有局限）
const deepCopy = obj => JSON.parse(JSON.stringify(obj));// 递归实现
function deepClone(source) {if (source === null || typeof source !== "object") {return source;}const clone = Array.isArray(source) ? [] : {};for (let key in source) {if (source.hasOwnProperty(key)) {clone[key] = deepClone(source[key]);}}return clone;
}

3. 如何理解闭包及其应用场景？

答案：
闭包是函数与其词法环境的组合，使函数可以访问其定义时的作用域。应用场景：

• 封装私有变量
• 函数工厂
• 模块模式
• 回调函数

// 计数器闭包
function createCounter() {let count = 0;return {increment() {count++;return count;},decrement() {count--;return count;},getCount() {return count;}};
}const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2

4. == 和 === 的区别是什么？

答案：

• ==：抽象相等，会进行类型转换
• ===：严格相等，要求类型和值都相同

console.log(1 == "1"); // true (类型转换)
console.log(1 === "1"); // false (类型不同)console.log(null == undefined); // true (特殊规则)
console.log(null === undefined); // false

5. 如何检测NaN？

// 标准方法
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("text")); // false// 传统方法
function isNaN(value) {return value !== value; // NaN是唯一不等于自身的值
}

六、高级数据类型技巧

1. 类型守卫

// TypeScript中的类型守卫
function processValue(value: string | number) {if (typeof value === "string") {return value.toUpperCase();}return value.toFixed(2);
}// JavaScript中的类型检查
function formatValue(value) {if (typeof value === "string") {return value.trim().toUpperCase();}if (Array.isArray(value)) {return value.join(", ");}return value.toString();
}

2. 可选链操作符（?.）

const user = {profile: {name: "Alice",address: {city: "Beijing"}}
};// 传统方式
const city = user && user.profile && user.profile.address && user.profile.address.city;// 可选链
const citySafe = user?.profile?.address?.city;
console.log(citySafe); // "Beijing"// 函数调用
const result = someObject?.someMethod?.();

3. 空值合并运算符（??）

// 设置默认值
const config = {timeout: 0
};// 传统方式（0会被覆盖）
const timeout = config.timeout || 1000; // 1000// 空值合并（仅对null/undefined生效）
const timeoutCorrect = config.timeout ?? 1000; // 0

七、总结：JavaScript 数据类型要点

1. 两大类别：

   • 原始类型：Undefined, Null, Boolean, Number, String, Symbol, BigInt
   • 引用类型：Object, Array, Function, Date, RegExp等

2. 核心特性：

   • 原始类型不可变，引用类型可变
   • 原始类型按值访问，引用类型按引用访问
   • 动态类型系统允许变量类型改变

3. 最佳实践：

   • 优先使用 === 严格相等
   • 使用 Array.isArray() 检测数组
   • 使用 Object.prototype.toString.call() 精确类型检测
   • 理解隐式转换规则避免陷阱

4. 现代特性：

   • 使用 Symbol 创建唯一标识
   • 使用 BigInt 处理大整数
   • 使用可选链和空值合并简化代码

掌握数据类型的重要性：
深入理解JavaScript数据类型是成为高级开发者的基础。它不仅影响代码的正确性和性能，还决定了开发者能否充分利用JavaScript的动态特性构建健壮的应用程序。通过本文的学习，你应该能够：

1. 准确区分各种数据类型
2. 正确处理类型转换和比较
3. 避免常见类型相关陷阱
4. 应用现代类型特性提升代码质量

最后建议：在复杂项目中考虑使用TypeScript，它能在编译时提供强大的类型检查，显著减少运行时类型错误。