下面给你整理一份 针对初学者的 JavaScript 八种类型实用小技巧总结，从基础数据类型到引用类型，附带易懂示例和实用技巧，让你对 JS 类型理解更透彻。

1️⃣ 八种基本类型概览

在 JavaScript 中，八种类型可以分为两类：

  1. 基本类型（Primitive Type）：Number、String、Boolean、Symbol、BigInt、undefined、null
  2. 引用类型（Reference Type）：Object（数组、函数、对象等都属于 Object）

2️⃣ Number（数字类型）

const num = 42;
const floatNum = 3.14;

小技巧：

  • 检查 NaN：
Number.isNaN(0/0) // true
  • 安全整数：
Number.MAX_SAFE_INTEGER // 2^53 -1
  • 数字格式化：
(12345.678).toFixed(2) // "12345.68"

3️⃣ String（字符串类型）

const str = "Hello World";

小技巧：

  • 模板字符串：
const name = "Alice";
const msg = `Hello, ${name}!`; // Hello, Alice!
  • 字符串切片：
str.slice(0,5) // "Hello"
  • 字符串转数字：
Number("123") // 123
parseInt("123.45") // 123

4️⃣ Boolean（布尔类型）

const isTrue = true;

小技巧：

  • 快速转换：
!!0       // false
!!"abc"   // true
  • 逻辑运算：
true && false // false
true || false // true

5️⃣ Symbol（符号类型）

const sym = Symbol('id');

小技巧：

  • 保证对象属性唯一：
const obj = {};
const key = Symbol('key');
obj[key] = 123;
console.log(obj[key]); // 123
  • 防止命名冲突：
const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // false

6️⃣ BigInt（大整数类型）

const big = 123456789012345678901234567890n;

小技巧：

  • 支持超大整数运算：
const a = 9007199254740993n;
const b = 10n;
console.log(a + b); // 9007199254741003n
  • 注意：BigInt 和 Number 不能直接混合运算

7️⃣ undefined 与 null

let a;       // undefined
let b = null; // null

小技巧：

  • 区别：
typeof undefined // "undefined"
typeof null      // "object" （历史遗留问题）
  • 快速判断：
if (a == null) { // a 为 null 或 undefined
  console.log('空值');
}

8️⃣ Object（对象类型）

const obj = { name: 'Alice', age: 20 };
const arr = [1,2,3];
const func = () => 42;

小技巧：

  • 克隆对象：
const newObj = {...obj}; // 浅拷贝
  • 深拷贝（简单场景）：
const deep = JSON.parse(JSON.stringify(obj));
  • 判断数组：
Array.isArray(arr) // true
  • 对象遍历：
for (let key in obj) console.log(key, obj[key]);
Object.keys(obj).forEach(k => console.log(k, obj[k]));

9️⃣ typeof 快速总结

类型typeof 返回值
Number“number”
String“string”
Boolean“boolean”
Symbol“symbol”
BigInt“bigint”
undefined“undefined”
null“object”
Object/Array/Function“object” / “function”

✅ 小技巧：

  • 判断 null 和对象：
value === null
typeof value === 'object' && value !== null
  • 判断函数：
typeof func === 'function'

10️⃣ 实用技巧总结

  1. 安全转换：Number(), String(), Boolean()
  2. 空值判断：value == null 同时判断 null/undefined
  3. 数组判断：Array.isArray()
  4. 深拷贝对象：JSON.parse(JSON.stringify(obj))
  5. 符号唯一性：Symbol()
  6. 大数安全运算：BigInt
  7. 模板字符串替代拼接：`${}`
  8. 快速布尔转换：!!value