feat: Add JavaScript core exercises and solutions

- Implemented exercises for array high-order methods, memory and execution, switch statements, and final review.
- Added starter and answer files for each exercise to facilitate learning.
- Created a runner HTML file to execute JavaScript code and display console outputs.
- Updated README files to include exercise objectives, tasks, and usage instructions.
This commit is contained in:
charlie
2026-03-13 11:09:19 +08:00
parent 4495ae0e28
commit 877acb5a8f
51 changed files with 1949 additions and 5 deletions

View File

@@ -0,0 +1,197 @@
# 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` 文件后,回到运行器重新点击一次“运行代码”即可