前端开发·6 分钟阅读·作者：小白学编程
JavaScript 入门：从变量到函数，30 分钟看懂核心语法
用最少的术语解释 JavaScript 的核心：变量、类型、流程控制、函数、数组、对象。每个概念都有可运行示例。
为什么先学 JavaScript？
如果你想做前端、做网页、做能上线的东西，JavaScript 几乎是绕不过去的。原因：
- 它是浏览器唯一原生支持的编程语言
- 它能在前端、后端（Node.js）、移动端（React Native）、桌面端（Electron）通用
- 入门门槛低：打开浏览器按 F12，控制台就能跑代码
打开任何浏览器，按 F12 → Console，跟着这篇文章敲就行。
1. 变量：给数据起名字
let name = "小白";
const age = 20; // const 表示不能再被赋值
let isStudent = true;
console.log(name, age, isStudent);
// 输出：小白 20 true
let vs const 的选择
能用
const就用const，需要重新赋值才用let。
为什么？因为 const 让你的代码更可预测。var 是老的写法，2025 年了，别用。
2. 数据类型：JS 关心的"7 种东西"
// 原始类型
"hello" // string 字符串
42 // number 数字
true // boolean 布尔
null // null "什么都没有"
undefined // undefined "还没赋值"
Symbol("k") // symbol 唯一标识（高级用法）
9007199254740993n // bigint 超大整数
// 引用类型（一切复杂结构都是它）
{ name: "Tom" } // object
[1, 2, 3] // array（其实也是 object）
() => {} // function（也是 object）
typeof 可以告诉你某个值是什么类型：
typeof "hello" // "string"
typeof 42 // "number"
typeof [] // "object" ← 数组也是 object
typeof null // "object" ← 著名"历史 bug"
3. 算术与比较
// 算术
1 + 2 // 3
10 % 3 // 1 （取余）
2 ** 10 // 1024（次方）
// 字符串拼接
"hello" + " " + "world" // "hello world"
`Hi, ${name}!` // 模板字符串（推荐）
// 比较
1 == "1" // true ← 宽松相等：会做类型转换
1 === "1" // false ← 严格相等：不转换
黄金法则：永远用
===和!==，不要用==和!=。
4. 条件与循环
const score = 85;
if (score >= 90) {
console.log("优秀");
} else if (score >= 60) {
console.log("及格");
} else {
console.log("加油");
}
循环：
// 推荐：for...of 直接遍历值
const nums = [10, 20, 30];
for (const n of nums) {
console.log(n);
}
// 经典 for
for (let i = 0; i < nums.length; i++) {
console.log(i, nums[i]);
}
几乎不要用
for...in来遍历数组，那是给对象用的。
5. 函数：可以重复使用的"零件"
// 写法 1：函数声明
function add(a, b) {
return a + b;
}
// 写法 2：箭头函数（推荐用于"一行的"小函数）
const add = (a, b) => a + b;
// 调用
add(1, 2); // 3
默认参数 & 解构
function greet(name = "陌生人") {
console.log(`你好，${name}`);
}
greet(); // 你好，陌生人
greet("Tom"); // 你好，Tom
// 解构：把对象/数组里的值"取出来"
const user = { name: "Tom", age: 18 };
const { name, age } = user; // 等价于 const name = user.name; ...
console.log(name, age);
6. 数组：最常用的容器
const fruits = ["apple", "banana", "orange"];
fruits.length // 3
fruits[0] // "apple"
fruits.push("kiwi") // 末尾添加
fruits.pop() // 末尾删除
fruits.includes("apple") // true
三个最常用的高阶方法
const nums = [1, 2, 3, 4, 5];
// map：变换 ── "把每个元素改造一下，得到新数组"
nums.map(n => n * 2);
// [2, 4, 6, 8, 10]
// filter：筛选 ── "只保留满足条件的"
nums.filter(n => n % 2 === 0);
// [2, 4]
// reduce：归约 ── "把整个数组压缩成一个值"
nums.reduce((sum, n) => sum + n, 0);
// 15
掌握 map / filter / reduce 是写出"现代风格 JS"的标志。
7. 对象：用键值对组织数据
const user = {
name: "Cascade",
age: 1,
sayHi() {
console.log(`Hi, I'm ${this.name}`);
},
};
user.name // "Cascade"
user["age"] // 1
user.sayHi(); // Hi, I'm Cascade
常用对象操作
Object.keys(user) // ["name", "age", "sayHi"]
Object.values(user)
Object.entries(user) // [["name","Cascade"], ...]
// 解构 + 重命名 + 默认值
const { name: n, role = "user" } = user;
8. 异步：避开新手的最大陷阱
JavaScript 是单线程的，但很多操作（比如网络请求）需要等待。async / await 让你写起来像同步：
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
const data = await res.json();
return data;
}
// 调用
fetchUser(1).then(user => console.log(user));
看到
await旁边一定要有async，这是新手最常忘的事。
9. 一个完整的小练习：猜数字
把下面这段代码贴到浏览器 Console，体会一下：
function guessGame() {
const target = Math.floor(Math.random() * 100) + 1;
let attempt = 0;
while (true) {
const input = prompt("猜一个 1-100 的数字：");
if (input === null) return; // 用户取消
const guess = Number(input);
attempt++;
if (guess === target) {
alert(`猜对了！用了 ${attempt} 次。`);
return;
}
alert(guess < target ? "太小了" : "太大了");
}
}
guessGame();
50 行不到，你已经写出了一个"完整的程序"。
接下来学什么？
- 学完 JavaScript 的 DOM 操作 → 让网页能"动"起来
- 学一个框架：React 或 Vue（推荐 React）
- 学 TypeScript：JS 加上类型系统，是大型项目的标配
「为学日益。」 慢慢加，每天进步一点点，半年后回头看，你会惊讶于自己走了这么远。