# JavaScript Core

这部分只解决一个问题：你能不能用 JavaScript 把数据、条件、循环和函数这些基础逻辑写清楚。

## 学完后你应该掌握

- 变量声明和赋值
- `var`、`let`、`const` 的区别
- 常见数据类型
- 运算符和条件判断
- `if` / `else` / `switch` 的基本使用
- `for` / `while` 的循环写法
- 函数声明、参数和返回值
- 数组和对象的基础操作
- `this` 的基础指向
- 常见内置方法和数组高阶函数
- `switch`、`break`、`undefined`、`null` 的常见场景
- 内存、执行顺序和引用关系的初步理解
- 作用域和闭包的基本概念
- 如何把几个基础知识点组合成一个小程序

## JavaScript 是什么

JavaScript 负责的是页面和程序里的逻辑。

它回答的是：

- 数据怎么保存
- 条件怎么判断
- 重复逻辑怎么执行
- 功能怎么封装
- 多个数据怎么组织

如果 HTML 是骨架，CSS 是外观，那么 JavaScript 就是行为和思考过程。

## 必须建立的 5 个核心意识

### 1. 先想输入、过程、输出

写逻辑前先问自己：

- 输入是什么
- 中间要做什么处理
- 最后要输出什么结果

### 2. 变量不是“魔法盒子”，而是有意义的命名

```js
const userName = "小周";
const completedCount = 5;
```

变量名应该表达含义，而不是只写 `a`、`b`、`x`。

### 3. 条件和循环是在表达规则

- 条件：满足什么情况就做什么
- 循环：同一件事要重复做多少次

### 4. 函数是为了复用，不是为了凑语法

当一段逻辑会重复出现，或者本身是一个完整动作时，就应该考虑封装成函数。

### 5. 数据结构决定你怎么写逻辑

- 单个值：用变量
- 一组同类值：用数组
- 一个事物的多个属性：用对象

## 高频概念速记

### 变量

- `var`
- `const`
- `let`

### 数据类型

- `string`
- `number`
- `boolean`
- `undefined`
- `null`
- `object`

### 条件和比较

- `if`
- `else`
- `switch`
- `===`
- `!==`
- `>`
- `<`
- `&&`
- `||`
- `!`

### 循环

- `for`
- `while`
- `break`
- `continue`

### 函数

- `function`
- `return`
- 参数
- 返回值
- `this`

### 数据结构

- `Array`
- `Object`

### 常见数组方法

- `map`
- `filter`
- `reduce`
- `find`
- `some`
- `every`

## 学习顺序

1. 变量和输出
2. 数据类型
3. 运算符和条件
4. 循环
5. 函数
6. 数组
7. 对象
8. 常见方法
9. 作用域和闭包
10. 基础阶段综合练习
11. `var` 和作用域差异
12. `this`
13. 数组高阶函数
14. 内存和执行过程
15. `switch`、`break` 和空值判断
16. 总复习

## 练习目录

- [01-variables-and-console/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/01-variables-and-console/README.md)
- [02-data-types-and-conversion/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/02-data-types-and-conversion/README.md)
- [03-operators-and-conditions/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/03-operators-and-conditions/README.md)
- [04-loops/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/04-loops/README.md)
- [05-functions/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/05-functions/README.md)
- [06-arrays/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/06-arrays/README.md)
- [07-objects/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/07-objects/README.md)
- [08-built-in-methods/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/08-built-in-methods/README.md)
- [09-scope-and-closure/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/09-scope-and-closure/README.md)
- [10-final-mini-app/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/10-final-mini-app/README.md)
- [11-var-and-scope/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/11-var-and-scope/README.md)
- [12-this-keyword/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/12-this-keyword/README.md)
- [13-array-high-order-methods/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/13-array-high-order-methods/README.md)
- [14-memory-and-execution/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/14-memory-and-execution/README.md)
- [15-switch-break-and-empty-values/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/15-switch-break-and-empty-values/README.md)
- [16-final-review/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/16-final-review/README.md)

## 过关标准

如果你能独立做到下面这些，就说明你的 JavaScript 基础已经立住了：

- 能写出清晰的变量声明和赋值
- 能分清常见数据类型，并知道什么时候需要类型转换
- 能写条件判断处理不同分支
- 能用循环处理一组数据
- 能把逻辑封装成函数并返回结果
- 能读写数组和对象里的数据
- 能理解 `var`、`let`、`const` 的常见区别
- 能判断普通函数、对象方法、箭头函数里的 `this` 常见差异
- 能使用几个常见字符串、数组方法和高阶函数
- 能区分 `undefined` 和 `null`，并在合适位置使用 `switch`、`break`
- 能理解基础的值传递、引用传递和执行顺序
- 能理解局部作用域和闭包的基本效果
- 能独立写出一个小型控制台程序

## 学习建议

- 每个练习先自己写，再看答案
- 先保证逻辑正确，再考虑写得更短
- 遇到报错先读报错信息，不要急着猜
- 多用 `console.log()` 观察变量变化

## 运行调试

- 可以直接双击打开 [runner.html](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/runner.html)
- 在页面里选择练习目录和 `starter.js` / `answer.js`
- 点击“运行代码”查看 `console.log()` 输出和报错
- 改完某个 `.js` 文件后，回到运行器重新点击一次“运行代码”即可