JavaScript 数据类型详解

基本数据类型

1. Number（数字）

• 包括整数和浮点数
• 特殊值：Infinity（无穷大）、-Infinity（负无穷大）、NaN（非数字）
• 示例：

  let num1 = 10 // 整数
  let num2 = 3.14 // 浮点数
  let num3 = Infinity // 无穷大
  let num4 = NaN // 非数字

2. String（字符串）

• 由字符组成的序列
• 可以用单引号、双引号或反引号（模板字符串）表示
• 示例：

  let str1 = 'Hello' // 单引号
  let str2 = 'World' // 双引号
  let str3 = `Hello ${str2}` // 模板字符串

3. Boolean（布尔值）

• 只有两个值：true 和 false
• 用于条件判断
• 示例：

  let isTrue = true
  let isFalse = false

4. Null（空值）

• 表示一个空对象指针
• 类型为 object（历史遗留问题）
• 示例：

  let empty = null
  console.log(typeof empty) // 输出 "object"

5. Undefined（未定义）

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

  let unassigned
  console.log(unassigned) // 输出 "undefined"

6. Symbol（符号）

• ES6 新增，用于创建唯一标识符
• 示例：

  let sym1 = Symbol('description')
  let sym2 = Symbol('description')
  console.log(sym1 === sym2) // 输出 false

7. BigInt（大整数）

• ES2020 新增，用于表示任意精度的整数
• 示例：

  let bigNum = 123456789012345678901234567890n

引用数据类型

1. Object（对象）

• 键值对的集合
• 示例：

  let person = {
    name: 'John',
    age: 30,
    greet: function () {
      console.log('Hello!')
    }
  }

2. Array（数组）

• 有序的数据集合
• 示例：

  let numbers = [1, 2, 3, 4, 5]
  let fruits = ['apple', 'banana', 'orange']

3. Function（函数）

• 可执行的代码块
• 示例：

  function add(a, b) {
    return a + b
  }

4. Date（日期）

• 表示日期和时间
• 示例：

  let now = new Date()
  let birthday = new Date('2000-01-01')

5. RegExp（正则表达式）

• 用于匹配字符串中的模式
• 示例：

  let pattern = /\d+/
  let result = pattern.test('123') // 输出 true

类型转换

1. 隐式转换

• JavaScript 会自动进行类型转换
• 示例：

  console.log('5' + 5) // 输出 "55"（字符串拼接）
  console.log('5' - 5) // 输出 0（数字减法）

2. 显式转换

• 使用函数进行强制类型转换
• 示例：

  let num = Number('123') // 转换为数字
  let str = String(123) // 转换为字符串
  let bool = Boolean(0) // 转换为布尔值

JavaScript 变量提升详解

什么是变量提升？

变量提升是 JavaScript 中的一种行为，指的是变量和函数声明会被提升到其作用域的顶部。

变量提升的原理

1. 变量声明提升

• 使用 var 声明的变量会被提升到作用域顶部
• 变量的初始化不会被提升
• 示例：

  console.log(x) // 输出 undefined
  var x = 10
  console.log(x) // 输出 10

  实际上，上面的代码会被解析为：

  var x
  console.log(x) // 输出 undefined
  x = 10
  console.log(x) // 输出 10

2. 函数声明提升

• 函数声明会被整体提升到作用域顶部
• 示例：

  greet() // 输出 "Hello!"
  function greet() {
    console.log('Hello!')
  }

变量提升的注意事项

1. let 和 const 不会被提升

• let 和 const 声明的变量存在「暂时性死区」
• 示例：

  console.log(y) // 报错：ReferenceError: Cannot access 'y' before initialization
  let y = 20

2. 函数表达式不会被提升

• 函数表达式的变量会被提升，但函数体不会
• 示例：

  console.log(add) // 输出 undefined
  add(1, 2) // 报错：TypeError: add is not a function
  var add = function (a, b) {
    return a + b
  }

3. 作用域

• 变量提升只发生在当前作用域
• 示例：

  function foo() {
    console.log(z) // 输出 undefined
    var z = 30
  }
  foo()
  console.log(z) // 报错：ReferenceError: z is not defined

变量提升的影响

1. 优点

• 可以在声明前使用变量和函数，增加了代码的灵活性
• 有助于理解 JavaScript 的作用域机制

2. 缺点

• 可能导致变量被意外覆盖
• 代码可读性降低，逻辑顺序混乱
• 容易产生 bug

最佳实践

1. 使用 let 和 const：避免变量提升带来的问题
2. 先声明后使用：遵循变量和函数声明在前，使用在后的原则
3. 使用函数表达式：明确函数的定义和使用顺序
4. 模块化：使用 ES6 模块系统，减少作用域混乱

示例对比

不良实践（使用 var）

function badExample() {
  console.log(a) // undefined
  if (true) {
    var a = 10
    console.log(a) // 10
  }
  console.log(a) // 10（意外的全局变量）
}

良好实践（使用 let）

function goodExample() {
  // console.log(b); // 报错：Cannot access 'b' before initialization
  if (true) {
    let b = 10
    console.log(b) // 10
  }
  // console.log(b); // 报错：b is not defined（正确的块级作用域）
}

通过理解 JavaScript 的数据类型和变量提升机制，可以编写更加健壮、可维护的代码。