JavaScript基础语法：变量、数据类型与运算符详解
(6) feilong.org 修订于2026-08-16 08:04:17 js教程什么是JavaScript？
JavaScript是一种动态类型的脚本语言，广泛用于Web开发中。它能够操作网页内容、处理用户交互并实现复杂的逻辑功能。作为前端开发的核心技术之一，掌握其基础语法是构建现代Web应用的基石。本文将深入解析变量声明、数据类型以及运算符等核心概念。
变量：存储与管理数据
在JavaScript中，变量用于存储可变的数据值。通过关键字var、let和const可以声明变量，它们的区别在于作用域和可变性。
声明方式对比
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// var 声明（函数级作用域） var x = 10; if (true) { var y = 20; } console.log(x); // 输出 10 console.log(y); // 输出 20 // let/const 声明（块级作用域） let a = 30; const b = 40; if (true) { let c = 50; const d = 60; } console.log(a); // 输出 30 console.log(b); // 输出 40 // console.log(c); // 报错：c未定义 |
注意事项：
- var存在变量提升（hoisting），而
|
1 |
let/const |
不会。
- const声明的常量不可重新赋值，但对象和数组的引用可修改。
数据类型：理解值的本质
JavaScript支持多种数据类型，可分为基本类型（primitive types）与引用类型（reference types）。
基本类型
| 类型 | 示例 | 特点 |
|------------|--------------|--------------------------|
| 数字 | 42, -3.14 | 包括整数和浮点数 |
| 字符串 | "hello" | 使用单引号或双引号包裹 |
| 布尔值 | true/false | 表示逻辑真/假 |
| null | null | 表示空值 |
| undefined | undefined | 变量未赋值时的默认值 |
| symbol | Symbol("id") | 创建唯一标识符 |
类型检测方法：
|
1 2 3 4 |
console.log(typeof 42); // "number" console.log(typeof "hello"); // "string" console.log(typeof null); // "object"（历史遗留问题） console.log(Object.prototype.toString.call(null)); // "[object Null]" |
引用类型
引用类型存储的是对象的引用，而非值本身。常见类型包括：
- 对象（Object）：键值对集合
- 数组（Array）：有序数据序列
- 函数（Function）：可执行代码块
|
1 2 3 4 5 6 7 |
let obj = { key: "value" }; let arr = [1, 2, 3]; function greet() { console.log("Hello"); } console.log(obj.key); // 输出 "value" console.log(arr[0]); // 输出 1 greet(); // 输出 Hello |
引用类型特性：
- 赋值操作会复制引用地址，修改对象会影响原始数据。
- 使用
|
1 |
=== |
比较时，需注意深浅拷贝问题。
运算符：执行操作的工具
运算符用于对变量和值进行操作，包括算术、比较、逻辑等类型。
算术运算符
|
1 2 3 4 5 6 |
let num1 = 10, num2 = 3; console.log(num1 + num2); // 加法：13 console.log(num1 - num2); // 减法：7 console.log(num1 * num2); // 乘法：30 console.log(num1 / num2); // 除法：3.333... console.log(num1 % num2); // 取余：1 |
比较运算符
|
1 2 3 4 |
console.log(5 == "5"); // 等值比较：true（类型转换） console.log(5 === "5"); // 严格相等：false console.log(null === undefined); // false console.log(NaN === NaN); // false（特殊值） |
隐式类型转换规则：
- 字符串与数字比较时，字符串会尝试转为数字。
- 布尔值在运算中会被转为0或1。
逻辑运算符
|
1 2 3 |
console.log(true && "hello"); // 输出 "hello"（短路） console.log(false || 42); // 输出 42（默认值返回） console.log(!true); // 输出 false |
注意事项：
-
|
1 |
&& |
和
|
1 |
|| |
运算符会返回操作数本身，而非布尔值。
- 布尔上下文中的值如0、空字符串等会被视为false。
总结与实践建议
JavaScript的基础语法是构建复杂功能的起点。通过合理使用变量声明方式、理解数据类型特性以及掌握运算符行为，开发者能够编写更可靠且高效的代码。
学习建议：
1. 熟悉
|
1 |
let/const |
替代var的最佳实践。
2. 避免隐式类型转换引发的逻辑错误。
3. 通过实际项目练习变量作用域和引用类型的使用。
掌握这些基础概念后，可进一步探索函数、对象等高级特性，为开发动态网页奠定坚实基础。
更新网址：https://feilong.org/javascript-basics-variables-data-types-operators
最初发布：20260816 08:04:17 feilong.org 于广州
加入收藏夹，查看更方便。