JavaScript 基础

HTML 管结构，CSS 管样式，JavaScript 管逻辑——处理数据、判断条件、循环列表、响应点击、读写页面内容。JavaScript 语言本身的基础语法跟大部分编程语言差不多：变量、类型、条件、循环、函数、数组、对象、JSON、异常。

如果有 Python 基础，会发现很多概念是通的——变量赋值、if 判断、for 循环、函数定义、列表/字典、异常处理。对照着看会快很多，重点留意不一样的地方（变量声明方式、=== 和 == 的区别、箭头函数写法）。

一、运行位置

JavaScript 写在 .js 文件里，HTML 通过 <script> 引入：

html

<!-- index.html -->
<body>
  <h1>文章管理</h1>
  <script src="app.js"></script>
</body>

// app.js
console.log("hello");

console.log 的输出在浏览器开发者工具（F12）的 Console 面板里看到。基础语法可以直接在 Console 里试，敲一行回一行。

二、变量

JavaScript 用 const 和 let 声明变量。跟 Python 不一样——Python 直接赋值，JS 必须先声明：

const title = "文章管理";   // const：赋值后不再改
let count = 3;             // let：后面还会改

count = count + 1;         // let 可以重新赋值
// title = "别的";          // 报错，const 不能重新赋值

能用 const 就用 const，需要变化才用 let。变量名用小驼峰（articleTitle、totalCount），跟 Python 的下划线风格（article_title）不同。

三、类型

常见类型：字符串（"hello"）、数字（42、3.14）、布尔（true、false）、null（主动设为空）、undefined（没赋值时的默认值）、对象（{ name: "张三" }）、数组（["HTML", "CSS"]）。

null 和 undefined 容易混——null 是你主动设成空，undefined 是根本没赋值。从后端拿数据时，某个字段没返回就是 undefined，要留意。

const name = "CSS";
const progress = 60;
const finished = false;
const tags = ["html", "css"];
const article = {
  title: "CSS 基础",
  status: "已发布",
};

查看类型用 typeof。注意 typeof [] 返回 "object"——JS 里数组本质是对象，判断数组要用 Array.isArray(tags)。

四、字符串

JS 字符串用单引号或双引号都行。模板字符串（反引号）能嵌变量，相当于 Python 的 f-string：

const title = "Python 入门";
const author = "张三";

// 模板字符串（反引号 + ${变量}）
const message = `《${title}》作者：${author}`;
console.log(message);  // 《Python 入门》作者：张三

常用方法跟 Python 类似：str.length（长度，是属性不是方法）、str.split(",")（分割）、str.trim()（去首尾空白）、str.includes("keyword")（是否包含）、str.replace("old", "new")（替换）、str.toUpperCase()（转大写）。

五、条件判断

if、else if、else 跟 Python 结构一样，只是加括号：

const score = 82;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("通过");
} else {
  console.log("未通过");
}

比较运算有个 JS 特有的坑——用 === 不用 ==。=== 是严格相等（类型和值都一样才 true），== 会做隐式类型转换（"3" == 3 返回 true），容易出 bug：

写法	含义
`===`	严格相等（类型和值都相同）
`!==`	严格不相等
`>` / `<`	大于 / 小于
`&&` / `\|\|` / `!`	并且 / 或者 / 取反

六、循环

数组遍历用 for...of（跟 Python 的 for...in 类似）：

const tags = ["html", "css", "js"];

for (const tag of tags) {
  console.log(tag);
}

数组方法更常用——map（转换）、filter（筛选）、find（查找）、forEach（遍历）：

const articles = [
  { title: "Python 入门", status: "已发布" },
  { title: "Go 并发", status: "草稿" },
  { title: "Rust 安全", status: "已发布" },
];

// map：每个元素转成新值，返回新数组
const titles = articles.map((a) => a.title);
// ['Python 入门', 'Go 并发', 'Rust 安全']

// filter：筛选符合条件的
const published = articles.filter((a) => a.status === "已发布");
// [{ title: 'Python 入门', ... }, { title: 'Rust 安全', ... }]

// find：找到第一个匹配的
const go = articles.find((a) => a.title === "Go 并发");

(a) => a.title 是箭头函数——JS 版的 lambda。map 和 filter 返回新数组，不修改原数组；forEach 只遍历执行操作，不返回值。

方法	返回什么	用途
`map`	新数组	每个元素转换
`filter`	新数组	筛选符合条件的
`find`	第一个匹配元素（或 undefined）	查找
`forEach`	无	遍历执行操作

七、函数

普通函数和箭头函数两种写法：

// 普通函数
function formatTitle(title) {
  return `《${title}》`;
}

// 箭头函数（等价）
const formatTitle = (title) => {
  return `《${title}》`;
};

// 箭头函数简写（只有一行 return 时）
const formatTitle = (title) => `《${title}》`;

参数默认值：

const greet = (name = "匿名") => `Hello, ${name}`;

greet("张三");  // Hello, 张三
greet();        // Hello, 匿名

八、对象

对象是键值对集合，相当于 Python 的字典：

const article = {
  title: "Python 入门",
  author: "张三",
  pages: 120,
};

// 取值（两种写法）
console.log(article.title);        // 点号
console.log(article["author"]);    // 方括号

// 改值
article.pages = 128;
article.status = "已发布";          // 新增字段

对象解构——从对象里取几个字段赋给变量，写法简洁：

const { title, author } = article;
console.log(title, author);  // Python 入门 张三

对象数组是页面里最常见的数据形态——从后端拿到的文章列表就是这种结构：

const articles = [
  { title: "Python 入门", status: "已发布" },
  { title: "Go 并发", status: "草稿" },
];

后面渲染列表、表格、卡片，基本都是从对象数组生成 HTML。

九、JSON

JSON 是数据交换格式，写法接近 JS 对象但更严格——属性名和字符串必须用双引号。前后端传数据用的就是 JSON。

// JS 对象转 JSON 字符串
const article = { title: "Python 入门", done: true };
const text = JSON.stringify(article);
// '{"title":"Python 入门","done":true}'

// JSON 字符串转 JS 对象
const raw = '{"title":"Go 并发","done":false}';
const parsed = JSON.parse(raw);
console.log(parsed.title);  // Go 并发

JSON.stringify 和 JSON.parse 是一对——一个把对象变成字符串（发给后端），一个把字符串变成对象（从后端收到后解析）。后面学 fetch 调 API 时会反复用到这两个。

十、异常处理

try...catch 跟 Python 的 try...except 类似：

try {
  const data = JSON.parse("{bad json}");
  console.log(data);
} catch (error) {
  console.log("解析失败:", error.message);
}

主动抛异常用 throw new Error("消息")。页面交互里，很多错误会转成提示文字显示给用户，而不是让异常直接暴露在 Console 里——用户体验更好。

十一、常见问题

现象	常见原因	排查入口
`xxx is not defined`	变量没声明或作用域不对	Console 错误信息
`Cannot read properties of undefined`	对空值取属性	检查数据有没有这个字段
JSON 解析失败	字符串不是合法 JSON	`JSON.parse` 输入内容
条件判断不对	用了 `==` 触发隐式转换	改成 `===`
`const` 报错	给 const 变量重新赋值	改成 `let`

JS 排查先看 Console。错误信息有文件名和行号，点进去能定位代码位置。

JavaScript 基础 ​

一、运行位置 ​

二、变量 ​

三、类型 ​

四、字符串 ​

五、条件判断 ​

六、循环 ​

七、函数 ​

八、对象 ​

九、JSON ​

十、异常处理 ​

十一、常见问题 ​