第三部分：JavaScript
四、JavaScript基础
4.1 什么是JavaScript？
JavaScript是一种轻量级的解释型脚本语言，最初为网页添加交互功能而设计。如今，JavaScript不仅能在浏览器中运行，还可以在服务器端（Node.js）、移动端（React Native）、桌面应用（Electron）等多种环境中使用。
核心特性：
动态类型：变量类型可以在运行时改变
弱类型：支持隐式类型转换
解释执行：逐行解释执行，无需编译
基于原型：使用原型链实现继承
函数是一等公民：函数可以作为参数和返回值
异步编程：支持回调、Promise、async/await
4.2 JavaScript引入方式
<!-- 方式一：内联脚本（不推荐） -->
<button onclick="alert('Hello')">点击</button>
<!-- 方式二：内部脚本 -->
<script>
console.log('Hello, World!');
document.write('Hello');
</script>
<!-- 方式三：外部脚本（推荐） -->
<script src="script.js"></script>
<!-- 异步加载（不阻塞HTML解析） -->
<script src="async.js" async></script>
<!-- 延迟加载（HTML解析完成后执行） -->
<script src="defer.js" defer></script>
<!-- 模块化脚本 -->
<script type="module">
import { myFunction } from './module.js';
myFunction();
</script>
<!-- 无脚本提示 -->
<noscript>
您的浏览器不支持JavaScript，请启用JavaScript以获得最佳体验。
</noscript>
4.3 变量与数据类型
// ========== 变量声明 ==========
// var：函数作用域，存在变量提升（不推荐使用）
var oldWay = "旧的声明方式";
console.log(hoisted); // undefined（变量提升）
var hoisted = "被提升的变量";
// let：块级作用域，无变量提升（推荐）
let name = "张三";
let age = 25;
let isActive = true;
// const：块级作用域，常量（声明时必须赋值，不可重新赋值）
const PI = 3.14159;
const config = {
apiUrl: "https://api.example.com",
timeout: 5000
};
// config = {}; // 错误：不能重新赋值
config.timeout = 10000; // 可以修改属性
// ========== 数据类型 ==========
// 1. Number（数字）：整数和浮点数
let integer = 42;
let float = 3.14;
let negative = -10;
let infinity = Infinity;
let notANumber = NaN; // 非数字
// 2. String（字符串）
let single = '单引号字符串';
let double = "双引号字符串";
let template = `模板字符串，可以嵌入变量：${name}`;
// 3. Boolean（布尔值）
let isTrue = true;
let isFalse = false;
// 4. Undefined（未定义）
let undefinedVar;
console.log(undefinedVar); // undefined
// 5. Null（空值）
let empty = null;
// 6. Symbol（ES6，唯一值）
let sym1 = Symbol('id');
let sym2 = Symbol('id');
console.log(sym1 === sym2); // false
// 7. BigInt（大整数）
let bigNumber = 9007199254740991n;
// 8. Object（对象）
let person = {
name: "张三",
age: 25,
hobbies: ["阅读", "音乐"]
};
// 9. Array（数组）
let fruits = ["苹果", "香蕉", "橙子"];
// 10. Function（函数）
function greet() {
console.log("Hello!");
}
// ========== 类型检测 ==========
console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"（著名的语言缺陷）
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
// 更准确的类型检测
Array.isArray([]); // true
Object.prototype.toString.call([]); // "[object Array]"
// ========== 类型转换 ==========
// 显式转换
Number("123"); // 123
String(123); // "123"
Boolean(0); // false
Boolean("hello"); // true
// 隐式转换
"5" + 3; // "53"（字符串拼接）
"5" - 3; // 2（算术运算）
"5" * "2"; // 10
"hello" - 1; // NaN
4.4 运算符
// 算术运算符
let a = 10, b = 3;
a + b; // 13
a - b; // 7
a * b; // 30
a / b; // 3.333...
a % b; // 1（取余）
a ** b; // 1000（幂运算）
// 赋值运算符
let x = 5;
x += 3; // x = x + 3 = 8
x -= 2; // x = x - 2 = 6
x *= 2; // x = x * 2 = 12
x /= 3; // x = x / 3 = 4
x %= 2; // x = x % 2 = 0
// 比较运算符
5 == "5"; // true（宽松相等，会类型转换）
5 === "5"; // false（严格相等，不转换类型）
5 != "5"; // false
5 !== "5"; // true
5 > 3; // true
5 < 3; // false
5 >= 5; // true
5 <= 3; // false
// 逻辑运算符
true && false; // false（与）
true || false; // true（或）
!true; // false（非）
// 短路运算
let user = null;
let name = user && user.name; // null（如果左边为假，返回左边）
let port = config.port || 3000; // 默认值
// 三元运算符
let status = age >= 18 ? "成年" : "未成年";
// 空值合并运算符（??）
let value = input ?? "默认值"; // 只有null/undefined时使用默认值
// 可选链操作符（?.）
let userName = user?.profile?.name; // 安全访问深层属性
4.5 流程控制
// if-else语句
let score = 85;
if (score >= 90) {
console.log("优秀");
} else if (score >= 80) {
console.log("良好");
} else if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}
// switch语句
let day = 3;
switch (day) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
default:
console.log("其他");
}
// for循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// for...of（遍历可迭代对象）
let arr = [1, 2, 3, 4, 5];
for (let item of arr) {
console.log(item);
}
// for...in（遍历对象属性）
let person = { name: "张三", age: 25 };
for (let key in person) {
console.log(key + ": " + person[key]);
}
// while循环
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
// do-while循环（至少执行一次）
let j = 0;
do {
console.log(j);
j++;
} while (j < 5);
// break和continue
for (let i = 0; i < 10; i++) {
if (i === 5) break; // 跳出循环
if (i % 2 === 0) continue; // 跳过本次迭代
console.log(i);
}
4.6 函数
// ========== 函数声明 ==========
// 函数声明（存在提升）
function add(a, b) {
return a + b;
}
// 函数表达式
const subtract = function(a, b) {
return a - b;
};
// 箭头函数（ES6）
const multiply = (a, b) => a * b;
const divide = (a, b) => {
if (b === 0) {
throw new Error("除数不能为零");
}
return a / b;
};
// 立即执行函数（IIFE）
(function() {
console.log("立即执行");
})();
// ========== 参数 ==========
// 默认参数
function greet(name = "匿名") {
console.log(`你好，${name}`);
}
// 剩余参数
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4); // 10
// 解构参数
function setUser({ name, age, email = "默认邮箱" }) {
console.log(name, age, email);
}
setUser({ name: "张三", age: 25 });
// ========== 闭包 ==========
function createCounter() {
let count = 0;
return {
increment: () => ++count,
decrement: () => --count,
getCount: () => count
};
}
const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount(); // 2
4.7 数组方法
let arr = [1, 2, 3, 4, 5];
// 遍历
arr.forEach(item => console.log(item));
// 映射
let doubled = arr.map(x => x * 2); // [2,4,6,8,10]
// 过滤
let evens = arr.filter(x => x % 2 === 0); // [2,4]
// 归并
let sum = arr.reduce((acc, cur) => acc + cur, 0); // 15
// 查找
let firstEven = arr.find(x => x % 2 === 0); // 2
// 判断
let hasEven = arr.some(x => x % 2 === 0); // true
let allPositive = arr.every(x => x > 0); // true
// 数组操作
arr.push(6); // 尾部添加
arr.pop(); // 尾部删除
arr.unshift(0); // 头部添加
arr.shift(); // 头部删除
arr.splice(1, 2); // 删除元素
arr.slice(1, 3); // 切片
HTML、CSS和JavaScript是Web开发的三大基石。HTML构建页面结构，CSS负责视觉呈现，JavaScript实现交互功能。掌握这三门技术是成为前端开发者的必经之路。本文从基础语法到高级特性，从理论概念到实战技巧，系统性地梳理了三大技术的核心知识点。希望这篇文章能够帮助你建立完整的前端知识体系，在实际开发中游刃有余。
来源：
https://xcfsr.cn/
