JS代码书写规则
格式速补：JS 代码最基本的书写规则
这一节专治”看到 JS 代码不知道怎么读”。每条规则都标了 Python 差异——哪种差异会导致你看懵。
规则 1：代码块用 { }，不是缩进
JS 用大括号 { } 包裹代码块，Python 用缩进。这是最直观的差异。
// ===== JS：{} 定义代码块，缩进只是好看 =====
function sayHi() { // { 开始函数体
console.log("你好"); // 缩进是为了人眼好读，JS 不强制
console.log("世界");
} // } 结束函数体
// ===== Python 对照 =====
// def say_hi():
// print("你好") ← 必须缩进，缩进就是代码块
// print("世界")
关键差异：
-
Python：缩进就是代码块的边界（少一个空格就报错）
-
JS：
{ }才是代码块的边界，缩进随便（但为了可读性要统一）
// ✅ 这两种写法 JS 都认：
if (true) {
console.log("缩进没了但合法"); // 能跑！因为 {} 才是边界
}
if (true) {
console.log("有缩进，好看"); // 推荐这样写
}
// Python 里第一个写法直接 IndentationError
规则 2：语句结尾的分号 ;
// 标准写法：每句结尾加分号
let name = "张三"; // 分号表示"这句话说完了"
console.log(name); // 每行都以分号结尾
// JS 引擎会自动补分号（ASI：自动分号插入），所以不写也行：
let age = 20 // 没加分号，JS 在换行处自动补
console.log(age) // 同上
推荐：
-
和团队项目都加分号
-
看到没分号的代码也要能读懂——很多人不写
规则 3：注释的三种写法
// ① 单行注释：双斜杠 //（= Python 的 #）
// 这行是注释，不会执行
let x = 1; // 行尾也可以写注释
// ② 多行注释：/* ... */（= Python 的 """ ... """）
/*
这是
多行注释
里面的内容都不会执行
*/
// ③ JSX 里的注释：{/* ... */}（React .tsx/.jsx 文件里用）
// JSX 里直接写 // 会被当成文字渲染出来，必须包在 { } 里
return (
<div>
{/* 这是 JSX 里的注释，不会渲染到页面上 */}
<h1>标题</h1>
</div>
);
| 注释类型 | JS/TS | Python | 场景 |
|---|---|---|---|
| 单行 | // 注释 | # 注释 | 普通文件 |
| 多行 | /* 注释 */ | """ 注释 """ | 普通文件 |
| JSX 内 | {/* 注释 */} | 无对应 | React .tsx 文件 |
规则 4：字符串有三种写法
// ===== 三种引号，作用略有不同 =====
// ① 双引号 ""（最传统）
let name1 = "张三";
// ② 单引号 ''（效果和双引号一样，很多人喜欢用）
let name2 = '李四';
// ③ 反引号 ``（模板字符串，可以插变量和换行）
let name3 = '王五';
let msg = `你好，${name3}！ // ${} 里放变量或表达式
今天天气真好。`; // 可以直接换行！
// 普通引号不能换行：
// let bad = "你好， ← ❌ 报错！普通引号里不能直接换行
// 世界";
// 要换行必须用 \n：
let ok = "你好，\n世界"; // \n = 换行符，和 Python 一样
| 引号 | 用途 |
|---|---|
"" 双引号 | 普通字符串 |
'' 单引号 | 和双引号一样，看个人喜好 |
`` 反引号 | 模板字符串：可插变量 ${}，可直接换行 |
规则 5：JS 区分大小写
let name = "张三";
let Name = "李四"; // name 和 Name 是不同的变量！
// Python 同理
规则 6：空格和换行
// JS 基本不 care 空格和换行（和 Python 相反）
console.log ( 1 + 2 ); // ✅ 能跑！（但不推荐这样写）
// 换行随意，只要不在字符串或关键字中间断开
let sum = 1
+ 2
+ 3; // ✅ 能跑
// 推荐：每行放一条语句，加分号
规则 7：() 括号的三种用途
这是 Python 程序员最常困惑的——JS 里 () 出现在不同位置，意思不同：
// ① 函数调用：函数名后面加 () 才会执行
function greet() { return "hi"; }
greet; // 这是函数本身（一个值），不执行
greet(); // 这是调用函数，拿到返回值 "hi"
// Python 完全一样
// ② 控制结构条件：if/for/while 后面必须加 ()
if (x > 1) { } // () 写条件
for (let i = 0; i < 5; i++) { } // () 写循环三要素
// Python 对照：Python 不需要加 ()，直接 if x > 1:
// ③ 分组运算：和数学一样
let result = (1 + 2) * 3; // 9
// Python 完全一样
速记：看到 fn() → 调用函数；看到 if(...) → 条件判断；看到 (...) → 分组优先计算。
规则 8：定义 vs 调用 —— 不加括号就是引用
// ===== 这是 JS 初学者最容易搞混的点 =====
function sayHi() {
console.log("hi");
}
// 情况 A：直接写函数名（不加括号）→ 引用——"把这个函数给你，你到时候再调"
setTimeout(sayHi, 1000); // ✅ 1秒后执行 sayHi
const fn = sayHi; // ✅ 把函数赋给 fn
// 情况 B：加了括号 → 调用——立刻执行，并把返回值传出去
const result = sayHi(); // 立刻输出 "hi"，result = undefined
setTimeout(sayHi(), 1000); // ❌ 立刻执行 sayHi，把 undefined 传给 setTimeout
// React 事件里最常见的坑：
// <button onClick={handleClick}> // ✅ 传函数引用
// <button onClick={handleClick()}> // ❌ 渲染时就调用了！
// <button onClick={() => handleClick()}> // ✅ 传箭头函数，点击时才调
这一条对八股文特重要：八股文里大量 setTimeout(function() { ... }, 0) 和 Promise.then(fn)——你必须分清”传函数”和”调函数”。
速记卡（面试闪卡）
Q1：一句话讲清「JS代码书写规则」到底是什么？
A：JS 用大括号划代码块而非缩进，分号可省略由引擎自动补；八股高频坑是函数名加不加括号：不加传引用，加了立刻执行。
Q2：代码块 / 分号 / 注释 —— 怎么理解？
A：JS 用 {} 框代码块，缩进只是好看（Python 缩进就是边界）；分号结尾是规范但引擎有 ASI 自动补，不写也能跑；注释有 // 单行、/* / 多行、JSX 里用 {/ */}（直接写 // 会被当文字渲染）。
Q3：字符串 / 大小写 / 空格 —— 怎么理解？
A：字符串三种：""、” 一样，“ 是模板字符串能插 ${变量} 还换行；JS 区分大小写，name 和 Name 是两个变量；JS 基本不 care 空格换行（和 Python 相反），但推荐一行一句加分号。
Q4：括号三用途与定义vs调用 —— 怎么理解？
A：括号三用途：fn() 调用、if() 条件、(1+2)*3 分组。最易混——写函数名不加括号是”传引用”（把函数交出去回头再调，如 setTimeout(sayHi,1000)），加括号是”立刻执行”。React 里 onClick={handleClick} 传引用，onClick={handleClick()} 渲染时就调了。
Q5：对八股为什么重要 —— 怎么理解？
A：八股题里大量 setTimeout(fn,0)、Promise.then(fn)、React 事件，核心都是分清”传函数”还是”调函数”。搞混会出现”页面一渲染就发请求""定时器全乱”。像把遥控器（引用）和按下去（调用）搞反。
Q6：核心速记主线有哪些？
-
代码块用 {}，缩进只是好看（不同于 Python）
-
分号可省略，ASI 自动补，团队最好统一
-
字符串三写法，“ 模板串可插变量换行
-
函数名不加括号传引用，加了立刻执行（八股高频）
口诀
A：JS 用花括号，不缩进，
分号省略自动补；
加括号就叫调用，
没括号就传引用。
相关链接
-
📋 目录：00-JavaScript
-
📚 学习清单：八股文学习路线图