lesson58：JavaScript 入门核心知识：变量声明、数据类型与运算符详解
·
目录
JavaScript（简称 JS）是 web 开发的基石之一，无论是网页交互、后端开发（Node.js）还是移动应用，都离不开它的身影。本文将从变量声明、数据类型和运算符三个核心知识点入手，通过通俗易懂的语言和实例代码，帮助初学者快速入门 JS。
一、变量声明：如何存储数据？
变量是存储数据的容器，就像现实中的“盒子”，可以存放数字、文本等信息。JS 中声明变量有三种方式：var、let 和 const，它们的特性和使用场景各不相同。
1.1 var：函数作用域的“老派”声明（不推荐）
var 是 ES5 及之前的变量声明方式，存在函数作用域和变量提升特性，容易导致意外问题，目前已不推荐优先使用。
核心特性：
- 函数作用域：变量仅在函数内可访问，若在函数外声明则为全局变量。
- 变量提升：声明会被提升到作用域顶部，但赋值不会。
- 允许重复声明：同一作用域内可重复声明同一变量，覆盖之前的值。
示例代码：
// 变量提升：声明被提升到顶部，赋值留在原地
console.log(a); // 输出：undefined（未赋值）
var a = 10;
// 函数作用域
function test() {
var b = 20;
console.log(b); // 输出：20（函数内可访问）
}
test();
console.log(b); // 报错：b is not defined（函数外不可访问）
// 重复声明
var c = 30;
var c = 40; // 不报错，覆盖为 40
console.log(c); // 输出：401.2 let：块级作用域的“现代”声明（推荐）
let 是 ES6 新增的声明方式，解决了 var 的作用域问题，推荐用于需要重新赋值的变量。
核心特性：
- 块级作用域：变量仅在
{}（如if、for、函数）内可访问。 - 无变量提升：必须先声明后使用，否则报错。
- 禁止重复声明：同一作用域内重复声明会报错。
示例代码：
// 块级作用域（if 语句块）
if (true) {
let d = 50;
console.log(d); // 输出：50（块内可访问）
}
console.log(d); // 报错：d is not defined（块外不可访问）
// 无变量提升
console.log(e); // 报错：Cannot access 'e' before initialization
let e = 60;
// 禁止重复声明
let f = 70;
let f = 80; // 报错：Identifier 'f' has already been declared1.3 const：不可修改的常量声明（推荐）
const 也是 ES6 新增，用于声明不可重新赋值的变量（常量），通常用于存储固定值（如配置、数学常量）。
核心特性：
- 块级作用域：与
let相同，仅在块内可访问。 - 必须初始化：声明时必须赋值，否则报错。
- 不可重新赋值：但对象/数组的属性/元素可修改（仅限制引用地址）。
示例代码：
// 基本类型常量（不可修改）
const PI = 3.1415;
PI = 3.14; // 报错：Assignment to constant variable
// 引用类型常量（可修改属性/元素）
const user = { name: "Alice" };
user.age = 20; // 允许修改属性
console.log(user); // 输出：{ name: "Alice", age: 20 }
const arr = [1, 2, 3];
arr.push(4); // 允许修改元素
console.log(arr); // 输出：[1, 2, 3, 4]变量声明最佳实践：
- 优先使用
const，避免意外修改。 - 若需重新赋值，使用
let。 - 彻底放弃
var，避免作用域和提升问题。
二、数据类型：JS 中的“数据分类”
JS 是动态类型语言（变量类型可随时变化），数据类型分为两大类：基本数据类型和引用数据类型。
2.1 基本数据类型（7种）
基本类型直接存储值，占用空间小，存于栈内存。
| 类型 | 描述 | 示例 |
|---|---|---|
String | 字符串（文本） | "Hello" 或 'JS' |
Number | 数字（整数/浮点数） | 42 或 3.14 |
Boolean | 布尔值（真/假） | true 或 false |
Null | 空值（主动表示“无”） | let a = null |
Undefined | 未定义（变量声明未赋值） | let b;（此时 b 为 undefined） |
Symbol | 唯一值（ES6 新增，用于对象属性） | const id = Symbol('id') |
BigInt | 大整数（解决 Number 精度问题） | 9007199254740993n（末尾加 n） |
示例代码：
// String
const str = "Hello JS";
console.log(typeof str); // 输出：string
// Number（注意：Number 有精度限制，超过 2^53-1 会失真）
const num = 123;
const float = 45.67;
console.log(typeof num); // 输出：number
// Boolean
const isTrue = true;
console.log(typeof isTrue); // 输出：boolean
// Null（特殊：typeof 会返回 'object'，需单独判断）
const empty = null;
console.log(typeof empty); // 输出：object（历史遗留问题）
console.log(empty === null); // 输出：true（正确判断方式）
// Undefined
let undef;
console.log(undef); // 输出：undefined
console.log(typeof undef); // 输出：undefined
// Symbol（唯一且不可变）
const s1 = Symbol("key");
const s2 = Symbol("key");
console.log(s1 === s2); // 输出：false（即使描述相同，值也不同）
// BigInt（处理大整数）
const big = 9007199254740993n;
console.log(big + 1n); // 输出：9007199254740994n2.2 引用数据类型（主要是 Object）
引用类型存储引用地址（指向堆内存中的值），占用空间大，可动态添加属性。常见引用类型：
Object：普通对象（键值对集合）。Array：数组（有序数据集合）。Function：函数（可执行代码块）。Date、RegExp等内置对象。
示例代码：
// Object（对象）
const person = { name: "Bob", age: 20 };
person.gender = "male"; // 动态添加属性
console.log(person); // 输出：{ name: 'Bob', age: 20, gender: 'male' }
// Array（数组）
const fruits = ["apple", "banana"];
fruits.push("orange"); // 添加元素
console.log(fruits); // 输出：['apple', 'banana', 'orange']
// Function（函数）
function greet() {
return "Hello";
}
console.log(greet()); // 输出：Hello2.3 基本类型 vs 引用类型：核心区别
- 赋值行为：基本类型赋值时复制值，引用类型赋值时复制引用地址（修改新变量会影响原变量）。
// 基本类型赋值（复制值） let a = 10; let b = a; b = 20; console.log(a); // 输出：10（a 不受影响） // 引用类型赋值（复制地址） const obj1 = { x: 1 }; const obj2 = obj1; obj2.x = 2; console.log(obj1.x); // 输出：2（原对象被修改）
三、运算符：JS 中的“数据操作工具”
运算符用于对数据进行计算或比较，常见分类如下：
3.1 算术运算符（7种）
用于数学计算，返回数值结果。
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
+ | 加法 | 5 + 3 | 8 |
- | 减法 | 10 - 4 | 6 |
* | 乘法 | 3 * 6 | 18 |
/ | 除法 | 12 / 4 | 3 |
% | 取余（模） | 10 % 3 | 1 |
++ | 自增 | let a=5; a++ | 5（先返回后+1，最终 a=6） |
-- | 自减 | let b=5; --b | 4（先-1后返回，最终 b=4） |
示例代码：
const a = 10;
const b = 3;
console.log(a + b); // 13
console.log(a % b); // 1（10 除以 3 余 1）
let c = 5;
console.log(c++); // 5（先输出后自增，c 变为 6）
console.log(++c); // 7（先自增后输出，c 变为 7）3.2 赋值运算符（= 及扩展）
将右侧值赋给左侧变量，扩展运算符可简化赋值+运算。
| 运算符 | 示例 | 等价于 |
|---|---|---|
= | a = 5 | a = 5 |
+= | a += 3 | a = a + 3 |
-= | a -= 2 | a = a - 2 |
*= | a *= 4 | a = a * 4 |
/= | a /= 2 | a = a / 2 |
示例代码：
let x = 10;
x += 5; // 等价于 x = x + 5
console.log(x); // 15
x *= 2; // x = x * 2
console.log(x); // 303.3 比较运算符（返回布尔值）
用于比较两个值，返回 true 或 false。重点区分 == 和 ===：
| 运算符 | 描述 | 示例（结果） |
|---|---|---|
== | 相等（自动类型转换） | '5' == 5 → true（字符串转数字） |
=== | 严格相等（不转类型） | '5' === 5 → false（类型不同） |
!= | 不相等（自动类型转换） | '5' != 5 → false |
!== | 严格不相等（不转类型） | '5' !== 5 → true |
> | 大于 | 10 > 5 → true |
< | 小于 | 3 < 8 → true |
示例代码：
// == 会自动转换类型（不推荐，易出错）
console.log(5 == "5"); // true（字符串转数字）
console.log(true == 1); // true（布尔转数字：true→1）
// === 严格比较（推荐，避免类型转换问题）
console.log(5 === "5"); // false（类型不同）
console.log(null === undefined); // false（类型不同）3.4 逻辑运算符（与/或/非）
用于组合条件判断，返回原始值（不一定是布尔值）。
| 运算符 | 描述 | 特性（短路逻辑） |
|---|---|---|
&& | 逻辑与 | 左侧为假则返回左侧值，否则返回右侧值 |
| ` | ` | |
! | 逻辑非 | 取反（返回布尔值） |
示例代码：
// && 短路：左侧为假直接返回
console.log(false && "右侧"); // false（左侧为假）
console.log("左侧" && "右侧"); // 右侧（左侧为真）
// || 短路：左侧为真直接返回（常用于设置默认值）
console.log("已有值" || "默认值"); // 已有值（左侧为真）
console.log(undefined || "默认值"); // 默认值（左侧为假）
// ! 取反（两次 !! 可将值转为布尔值）
console.log(!true); // false
console.log(!!0); // false（0 转为布尔值是 false）
console.log(!!"hello"); // true（非空字符串转为 true）3.5 三元运算符（条件简化）
语法：条件 ? 表达式1 : 表达式2（条件为真执行表达式1，否则执行表达式2）。
示例代码：
const age = 18;
const status = age >= 18 ? "成年" : "未成年";
console.log(status); // 输出：成年（条件为真）
// 等价于 if-else：
if (age >= 18) {
status = "成年";
} else {
status = "未成年";
}四、总结与实践建议
本文介绍了 JS 入门的三大核心知识点：
- 变量声明：优先用
const和let，避免var； - 数据类型：区分基本类型（值存储）和引用类型（地址存储）；
- 运算符：重点掌握
===、逻辑短路、三元运算符等高频用法。
实践建议：
- 用浏览器控制台（F12 → Console）实时测试代码；
- 尝试用变量、数据类型和运算符组合实现简单逻辑（如计算两数之和、判断奇偶数）；
- 后续学习方向：流程控制（if/for）、函数、对象等。
JS 入门不难，但细节较多，多写多练才能真正掌握。加油，未来的前端工程师！ 🚀
更多推荐
43
0- 0
已为社区贡献5条内容
所有评论(0)