JavaScript基础语法之变量声明和数据类型

JavaScript中变量是存储数据的容器，数据类型则定义了这些容器中内容的性质，掌握变量声明和数据类型是学习JavaScript的基石。

一、变量声明

1.1 变量声明的本质

变量是用于存储值的标识符，JavaScript通过关键字声明变量，赋值操作使用=运算符：

let age = 18; // 声明变量并赋值
age = 20;     // 修改变量值

1.2 三种声明方式对比（var/let/const）

1.2.1 var：函数作用域的“老派选手”

• 特性：函数作用域、变量提升、可重复声明
• 案例：变量提升导致的“幻觉”

  console.log(name); // 输出undefined（变量提升）
  var name = "Alice";
  
  function fn() {
    var age = 20; // age仅在fn函数内可见
  }
  

• 注意：重复声明不会报错，但会覆盖前值

  var count = 10;
  var count = 20; // 合法，count变为20
  

1.2.2 let：块级作用域的“新生代”

• 特性：块级作用域（{}内有效）、禁止重复声明、无变量提升（TDZ）
• 案例：块级作用域演示

  {
    let topic = "JavaScript";
    console.log(topic); // 输出"JavaScript"
  }
  console.log(topic); // 报错：topic未定义
  

• 暂时性死区（TDZ）：声明前使用会报错

  console.log(score); // 报错：score未定义
  let score = 90;
  

1.2.3 const：常量声明的“守护者”

• 特性：块级作用域、声明时必须初始化、值不可变（针对基本类型）
• 案例：常量声明与对象引用

  const PI = 3.1415; // 合法，基本类型不可变
  // PI = 3.14; // 报错：Assignment to constant variable
  
  const user = { name: "Bob" }; // 合法，对象引用不可变
  user.age = 30; // 合法，修改对象属性不违反const规则
  

二、数据类型

2.1 原始数据类型（Primitive Types）

2.1.1 字符串（String）

• 特性：不可变、单/双/模板字符串
• 案例：模板字符串动态拼接

  const name = "Charlie";
  const intro = `大家好，我是${name}，今年${age}岁`; // ES6模板字符串
  

2.1.2 数值（Number）

• 特性：双精度浮点型、特殊值（Infinity/-Infinity/NaN）
• 案例：数值精度陷阱

  0.1 + 0.2; // 0.30000000000000004（浮点精度问题）
  Number.isInteger(2.5); // false（检查是否为整数）
  

2.1.3 布尔（Boolean）

• 特性：仅true和false两个值
• 案例： falsy值列表

  Boolean(0); // false
  Boolean(""); // false
  Boolean(null); // false
  Boolean(undefined); // false
  Boolean(NaN); // false
  

2.1.4 null & undefined

• 区别：
  • null：主动赋值表示“空值”
  • undefined：变量声明未赋值的默认值
• 案例：类型判断

  let value;
  console.log(value); // undefined
  value = null;
  console.log(value); // null
  

2.1.5 Symbol（ES6新增）

• 特性：唯一标识符、常用于对象属性
• 案例：避免属性名冲突

  const id = Symbol("id");
  const user = { [id]: 1001 }; // 唯一属性名
  

2.1.6 BigInt（ES2020新增）

• 特性：处理超过Number安全范围的整数（±2^53）
• 案例：大整数运算

  const maxSafe = 9007199254740991n; // 末尾加n表示BigInt
  const result = maxSafe + 2n; // 9007199254740993n
  

2.2 引用数据类型（Reference Types）

2.2.1 对象（Object）

• 特性：键值对集合、动态类型
• 案例：对象字面量与属性操作

  const book = {
    title: "JavaScript入门",
    author: "张三",
    year: 2023
  };
  book.price = 59.9; // 添加新属性
  delete book.year; // 删除属性
  

2.2.2 数组（Array）

• 特性：有序集合、元素类型不限
• 案例：数组的动态性

  const fruits = ["苹果", "香蕉", "橙子"];
  fruits.push("葡萄"); // 末尾添加元素
  fruits[3] = "提子"; // 修改元素
  

2.2.3 函数（Function）

• 特性：可作为值传递、支持匿名函数
• 案例：函数赋值与调用

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

三、类型转换

3.1 显式类型转换（强制转换）

3.1.1 转字符串

String(123); // "123"
(123).toString(); // "123"（注意括号优先级）

3.1.2 转数值

Number("123"); // 123
parseInt("45px", 10); // 45（第二个参数指定进制）
parseFloat("3.14em"); // 3.14

3.1.3 转布尔

Boolean("false"); // true（非空字符串为true）
Boolean(0); // false

3.2 隐式类型转换（运算符触发）

3.2.1 字符串拼接（+运算符）

1 + "2"; // "12"（数字1转为字符串）
true + true; // 2（布尔转数值）

3.2.2 数值运算（-/*/%）

"10" - 2; // 8（字符串转数值）
"abc" - 1; // NaN（无法转换则为NaN）

3.2.3 布尔判断（if/while条件）

if ("") { console.log("真"); } // 不执行（空字符串为falsy）
if ({} || null) { console.log("真"); } // 执行（对象为truthy）

四、常见问题与最佳实践

4.1 变量声明的陷阱

• ❌ 避免使用var：优先使用let/const，防止作用域污染
• ❌ const声明对象时的误区：

  const obj = {}; // 合法，obj引用不可变
  obj.prop = "value"; // 合法，对象属性可修改
  // obj = {}; // 报错，不能重新赋值
  

4.2 数据类型判断

4.3 类型转换最佳实践

• 使用===进行严格比较，避免隐式转换：

  0 === false; // false（类型不同）
  0 == false; // true（隐式转换为数值比较）
  

• 复杂类型转换使用Number()/String()等显式方法，提高可读性

总结
核心知识图谱

变量声明
├─ var（函数作用域，可重复声明）
├─ let（块级作用域，禁止重复）
└─ const（块级作用域，常量声明）
数据类型
├─ 原始类型（String/Number/Boolean/null/undefined/Symbol/BigInt）
└─ 引用类型（Object/Array/Function等）

类型转换
├─ 显式转换（String()/Number()/Boolean()）
└─ 隐式转换（运算符触发，需谨慎处理）

学习建议

1. 刻意练习：通过LeetCode简单题练习变量操作（如两数之和）
2. 调试工具：使用浏览器控制台typeof/console.log观察类型变化
3. 避免误区：牢记const针对引用不可变，对象属性可修改

若这篇内容帮到你，动动手指支持下！关注不迷路，干货持续输出！
ヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉ