JavaScript 基础语法

第 8 章 · JavaScript 基础语法

本章目标：掌握 JavaScript 变量、类型系统、条件与循环、函数、数组方法、严格模式与调试技巧，为 academy-demo 编写可测试工具函数与后续 DOM 交互（ch09）打基础。

学时建议：2.5 小时（含 50 分钟编码与控制台调试）

前置：frontend-web ch01～03；能在浏览器打开控制台（F12 → Console）。

8.1 引入方式与项目结构

academy-demo/js/
├── utils.js   # 本章：纯函数工具库
└── app.js     # 入口：初始化（ch09 绑定事件）

<script src="js/utils.js" defer></script>
<script src="js/app.js" defer></script>

defer：不阻塞 HTML 解析，按序执行，适合操作 DOM 的脚本。

8.2 严格模式

'use strict';

// 严格模式下会报错：
// mistypedVar = 1;           // ReferenceError
// function fn(a, a) {}       // SyntaxError（重复参数）

academy-demo 约定：utils.js 与 app.js 首行均写 'use strict';。

8.3 变量声明

const SITE_NAME = 'academy-demo';  // 推荐默认
let activeFilter = 'all';           // 需要重新赋值时
// var —— 已不推荐

const 对象/数组仍可改属性，不能整体重新赋值：course.hours = 10 ✅，course = {} ❌。

8.4 类型系统

const price = 199;
const tags = ['HTML', 'CSS', 'JS'];
const meta = { name: '小明', level: '入门' };

Array.isArray(tags);  // true
typeof tags;          // "object"

比较与转换：始终用 ===；Number('42')、String(199) 显式转换。实用语法：course?.teacher?.name ?? '待公布'。

8.5 条件与循环

const courses = [
  { id: 1, title: 'HTML 基础', level: '入门', hours: 12 },
  { id: 2, title: 'CSS Flex', level: '进阶', hours: 8 },
  { id: 3, title: 'JS 语法', level: '入门', hours: 15 },
];

let totalHours = 0;
for (const course of courses) {
  if (course.level === '入门') totalHours += course.hours;
}

function badgeByLevel(level) {
  switch (level) {
    case '入门': return 'badge-beginner';
    case '进阶': return 'badge-advanced';
    default: return 'badge-default';
  }
}

8.6 函数

function greet(name) {
  return `你好，${name}，欢迎来到 ${SITE_NAME}`;
}

const formatPrice = (n) => `¥${Number(n).toFixed(2)}`;
const add = (a, b) => a + b;

function listCourses(courses, prefix = '【课程】') {
  return courses.map((c) => `${prefix}${c.title}`);
}