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:
197
03-javascript-core/README.md
Normal file
197
03-javascript-core/README.md
Normal 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` 文件后,回到运行器重新点击一次“运行代码”即可
|
||||
Reference in New Issue
Block a user