JavaScript 核心语法速览

JavaScript 是前端开发的基础语言，TypeScript 和 React 都建立在它之上。先把 JS 核心搞懂，后面学什么都顺。

1. 变量

// 三种声明方式
var name = "Mary";  // 旧写法，现在不用
let age = 25;       // 可以重新赋值
const PI = 3.14;    // 不能重新赋值（常量）

// 现代写法：能用 const 就用 const，否则用 let，不用 var
const name = "Mary";
let count = 0;
count = 1;    // ✅
name = "Bob"; // ❌ const 不能重新赋值

2. 基本数据类型

// 字符串
const str = "你好";
const str2 = '你好';          // 单引号也行
const str3 = `你好 ${name}`; // 模板字符串，可以插入变量

// 数字
const num = 42;
const pi = 3.14;

// 布尔
const isTrue = true;
const isFalse = false;

// 空值
const a = null;      // 明确表示"没有值"
const b = undefined; // 未定义

3. 对象

对象是键值对的集合，是 JS 里最常用的数据结构。

const post = {
  title: "你好世界",
  date: "2026-04-05",
  tags: ["Next.js", "TypeScript"],
};

// 取值
post.title;     // "你好世界"
post["title"];  // 效果一样

// 修改
post.title = "新标题";

// 解构：直接从对象里取出字段
const { title, date } = post;
// 等价于：
// const title = post.title;
// const date = post.date;

4. 数组

const tags = ["Next.js", "TypeScript", "React"];

// 取值（下标从 0 开始）
tags[0]; // "Next.js"
tags[1]; // "TypeScript"

// 常用方法
tags.length;            // 3，数组长度
tags.push("新标签");    // 末尾加一个
tags.includes("React"); // true，判断是否包含

// map：遍历每个元素，返回新数组
const upper = tags.map((tag) => tag.toUpperCase());
// ["NEXT.JS", "TYPESCRIPT", "REACT"]

// filter：过滤，返回满足条件的元素
const long = tags.filter((tag) => tag.length > 5);
// ["Next.js", "TypeScript"]

// find：找到第一个满足条件的元素
const found = tags.find((tag) => tag === "React");
// "React"

5. 函数

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数（现代写法，更简洁）
const add = (a, b) => {
  return a + b;
};

// 只有一行 return 可以省略花括号和 return
const add = (a, b) => a + b;

add(1, 2); // 3

6. 条件判断

const age = 18;

// if/else
if (age >= 18) {
  console.log("成年");
} else {
  console.log("未成年");
}

// 三元表达式（一行写完）
const result = age >= 18 ? "成年" : "未成年";
//             ↑ 条件      ↑ 真    ↑ 假

7. async/await（异步）

有些操作需要等待结果（比如读文件、请求网络），用 async/await 处理：

// 加 async 的函数里可以用 await 等待结果
async function getPost() {
  const post = await readFile("hello.md"); // 等文件读完再继续
  return post;
}

// 不用 await 的话代码会直接跑下去，数据还没回来就用了

8. 几个常用的现代语法

// 可选链：左边是 null/undefined 时不报错，返回 undefined
posts?.length

// ?? 空值合并：左边是 null/undefined 时取右边的值
const tags = post.tags ?? [];

// 展开运算符：合并数组或对象
const allTags = [...tags1, ...tags2];
const newPost = { ...post, title: "新标题" };

掌握这些，读懂大部分前端代码就没问题了。