《前端面试题：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 数据类型要点

两大类别：
- 原始类型：Undefined, Null, Boolean, Number, String, Symbol, BigInt
- 引用类型：Object, Array, Function, Date, RegExp等
核心特性：
- 原始类型不可变，引用类型可变
- 原始类型按值访问，引用类型按引用访问
- 动态类型系统允许变量类型改变
最佳实践：
- 优先使用 === 严格相等
- 使用 Array.isArray() 检测数组
- 使用 Object.prototype.toString.call() 精确类型检测
- 理解隐式转换规则避免陷阱
现代特性：
- 使用 Symbol 创建唯一标识
- 使用 BigInt 处理大整数
- 使用可选链和空值合并简化代码

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

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

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