front-end-example/03-javascript-core

JavaScript Core

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

学完后你应该掌握

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

JavaScript 是什么

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

它回答的是：

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

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

必须建立的 5 个核心意识

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

写逻辑前先问自己：

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

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

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
• 02-data-types-and-conversion/README.md
• 03-operators-and-conditions/README.md
• 04-loops/README.md
• 05-functions/README.md
• 06-arrays/README.md
• 07-objects/README.md
• 08-built-in-methods/README.md
• 09-scope-and-closure/README.md
• 10-final-mini-app/README.md
• 11-var-and-scope/README.md
• 12-this-keyword/README.md
• 13-array-high-order-methods/README.md
• 14-memory-and-execution/README.md
• 15-switch-break-and-empty-values/README.md
• 16-final-review/README.md

过关标准

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

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

学习建议

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

运行调试

• 可以直接双击打开 runner.html
• 在页面里选择练习目录和 starter.js / answer.js
• 点击“运行代码”查看 console.log() 输出和报错
• 改完某个 .js 文件后，回到运行器重新点击一次“运行代码”即可