企业官网建设流程全解析

• 文档
• 教程

CoffeeScript 是一门口号是"小"的编译型语言：它在编译期将源码逐句（one-to-one）翻译为等价的 JavaScript，而非在运行时解释执行。作为 JavaScript 的现代后继之一，CoffeeScript 努力输出可读、排版美观且运行流畅的 JavaScript 代码，并兼容所有 JavaScript 运行时。本文以仓库中的 id/coffeescript.md（印尼语版）与 coffeescript.md（英语原版）为核心骨架，逐条讲解注释、赋值、条件、函数、区间、对象、Splat 参数、存在判断与数组推导等核心语法，并给出每条语法的编译产物对照，读完后你便能读懂任何 CoffeeScript 源码，并理解其"语法糖"究竟是如何被编译成普通 JavaScript 的。

1. 设计哲学：编译期转换，而非运行时解释

CoffeeScript 与 JavaScript 的关系不是"解释器/被解释语言"，而是"编译器/目标语言"。文档开篇即点明两个关键事实：

• 编译期转换：CoffeeScript 源码在编译阶段就被转换为等价的 JavaScript，不存在运行时解释器（no interpretation at runtime）；
• 输出质量优先：编译产物刻意保持可读、格式美观（pretty-printed）、平滑运行，并且可以在每一个 JavaScript 运行时中正常工作。

正因如此，学习 CoffeeScript 有一个隐含前提——你需要先理解 JavaScript 的基本语义（文档块注释中明确提示："You should understand most of JavaScript semantics before continuing"）。因为所有 CoffeeScript 特性最终都会落到一段 JavaScript 上，看懂编译产物，就等于看懂了语言机制。

这一点在仓库中也有旁证：项目根目录的 livescript.md 介绍了 LiveScript——一个函数式风格的编译到 JavaScript 的语言，它是 Coco 的分叉，而 Coco 本身又是 CoffeeScript 的分叉。也就是说，CoffeeScript 的"编译到 JS"路线孕育了整个语言家族，理解 CoffeeScript 的编译模型是理解这一系列语言的起点。

2. 注释：#单行与###块注释

CoffeeScript 的注释语法与 Ruby、Python 一脉相承——单行注释使用井号#：

# CoffeeScript 是一种紧跟现代语言潮流的语言 # 因此正如 Ruby 和 Python，CoffeeScript 使用井号标记注释

块注释使用三井号包裹：

### 大段注释以此为例，会被直接编译为 '/ *' 和 '* /' 包裹的 JavaScript 注释。 示例中 => 右侧为编译后的 JavaScript 代码。 ###

注意两者的编译差异：单行#注释在编译产物中通常会被剥离，而###块注释会原样保留为 JavaScript 的/* ... */注释。这使块注释适合承载版权声明、文档说明等需要保留到产物中的信息。

3. 变量赋值：省略var的声明

CoffeeScript 中赋值即声明，无需写var，编译器自动生成：

number = 42 #=> var number = 42; opposite = true #=> var opposite = true;

• 左侧#=>表示该行编译后对应的 JavaScript 输出；
• 变量作用域遵循"就近提升"：CoffeeScript 会在需要时把var声明提升到当前函数作用域顶部，避免污染全局命名空间（这一点在函数一节会看到编译器如何为内部变量自动声明）。

这一设计的价值在于：源码中没有任何var/let/const噪音，作用域规则仍与 JavaScript 保持一致，编译产物完全可以被 JS 开发者直接审阅。

4. 条件语句：后置if与前置if

CoffeeScript 支持将if放在表达式之后（后置条件），这是它最标志性的语法糖之一：

number = -42 if opposite #=> if(opposite) { number = -42; }

读法为"当opposite为真时，执行number = -42"。编译产物就是普通的 JavaScript 单语句if。此外 CoffeeScript 也保留传统的块式写法：

if opposite number = -42 else number = 42

两者编译结果等价，后置写法尤其适合"单行守卫"场景，让主逻辑保持在行首、条件退居行尾，可读性更强。

5. 函数：->箭头、默认参数与隐式返回

CoffeeScript 用->定义函数，函数体可以是一条表达式（隐式返回）或一个缩进块：

square = (x) -> x * x #=> var square = function(x) { return x * x; }

x * x作为函数体最后（也是唯一）的表达式，被自动return。更复杂的例子是带默认参数的块式函数：

fill = (container, liquid = "coffee") -> "Filling the #{container} with #{liquid}..." #=>var fill; # #fill = function(container, liquid) { # if (liquid == null) { # liquid = "coffee"; # } # return "Filling the " + container + " with " + liquid + "..."; #};

这段编译产物揭示了三个底层事实：

1. 默认参数：编译为if (liquid == null) { liquid = "coffee"; }，即仅在参数为null/undefined时取默认值——这是运行时判断而非签名层面的默认值；
2. 字符串插值：#{wadah}语法被编译为字符串拼接"Filling the " + container + " with " + liquid + "..."；
3. 函数变量提升：编译器先在作用域顶部声明var fill;，再赋值为函数表达式，这正是前面提到的声明提升机制，它保证即使函数定义在其调用之后也能正常工作。

6. 区间（Ranges）：[1..5]

两个点..表示包含两端点的闭区间，编译为展开的数组字面量：

list = [1..5] #=> var list = [1, 2, 3, 4, 5];

若使用[1...5]（三个点）则是开区间，排除终点，等价于[1, 2, 3, 4]。区间常与数组推导、循环配合使用，构成"生成序列"的惯用写法。

7. 对象字面量：缩进式键值对

CoffeeScript 的对象可以省略花括号与逗号，用缩进表示层级：

math = root: Math.sqrt square: square cube: (x) -> x * square x #=> var math = { # "root": Math.sqrt, # "square": square, # "cube": function(x) { return x * square(x); } #};

三个要点：

• 键与值之间用冒号分隔，无需逗号；
• 值可以是已有变量（如square）、内置对象属性（如Math.sqrt）或内联函数；
• 内联函数(x) -> x * square x演示了 CoffeeScript 的隐式调用：square x等价于square(x)，函数调用可以省略括号（写为square x）。

编译产物显示，对象键被加上了引号、内联函数被展开为普通函数表达式，整体与手写 JS 完全等价。

8. Splats：...不定参数

在参数名后加...可将剩余实参收集为数组，编译产物使用arguments与slice实现：

race = (winner, runners...) -> print winner, runners #=>race = function() { # var runners, winner; # winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : []; # return print(winner, runners); # };

• winner取arguments[0]；
• runners收集从第 1 个参数开始的所有剩余参数（__slice.call(arguments, 1)），若实参不足则得到空数组[]。

这正是 CoffeeScript 对 JavaScript 不定参数（rest parameters）的经典实现方式，在 ES6 原生 rest 语法出现之前，它保证了旧运行时的兼容性。

9. 存在判断：elvis?运算符

在变量后加?可以判断变量"存在"，即既非undefined也非null：

alert "I knew it!" if elvis? #=> if(typeof elvis !== "undefined" && elvis !== null) { alert("I knew it!"); }

编译产物可见其完整语义：typeof elvis !== "undefined" && elvis !== null。?还可以后置于属性访问（如object?.method）实现"存在则访问，否则短路"的安全导航，避免因中间环节为null而抛错。

10. 数组推导（Array Comprehensions）：for ... in与when过滤

CoffeeScript 用推导式生成新数组，语法紧凑且编译产物规范：

cubes = (math.cube num for num in list) #=>cubes = (function() { # var _i, _len, _results; # _results = []; # for (_i = 0, _len = list.length; _i < _len; _i++) { # num = list[_i]; # _results.push(math.cube(num)); # } # return _results; #})();

编译产物是一个立即执行函数（IIFE）：先建结果数组_results，遍历list后逐个push，最后返回。CoffeeScript 借此保证了推导结果不会泄漏内部循环变量。

推导式还能与when子句组合实现带过滤的循环：

foods = ['broccoli', 'spinach', 'chocolate'] eat food for food in foods when food isnt 'chocolate' #=>foods = ['broccoli', 'spinach', 'chocolate']; # #for (_k = 0, _len2 = foods.length; _k < _len2; _k++) { # food = foods[_k]; # if (food !== 'chocolate') { # eat(food); # } #}

• isnt是 CoffeeScript 对!==的别名（相应的is对应===）；
• when子句编译为循环体内的if守卫，跳过不满足条件的元素。

整体读法为："对foods中的每个food，当food不是'chocolate'时执行eat food"。

11. 深入仓库：多语言版本与配套资源

本文所依据的 CoffeeScript 教程是 "Learn X in Y minutes" 项目的一部分，该项目以"带注释的可运行代码"形式速览各语言（见 README.md）。仓库中该教程存在多个翻译版本，包括 id/coffeescript.md（印尼语）、zh-cn/coffeescript.md（简体中文）、de/coffeescript.md、fr/coffeescript.md、ru/coffeescript.md 等，各版本均使用 YAML frontmatter 记录贡献者与译者信息（该 frontmatter 的格式与类型校验由 lint/frontmatter.py 中的validate_yaml_keys逻辑保证）。对照阅读不同语言版本，可以更精确地理解原文语义。

若想继续深入 CoffeeScript 家族，仓库根目录的 livescript.md 值得一读：LiveScript 与 CoffeeScript 共享大部分底层语义，并额外引入了柯里化、函数组合、模式匹配等函数式特性，其定位正是"在 CoffeeScript 路线上的进一步演进"。原文档还推荐了 Smooth CoffeeScript 与 CoffeeScript Ristretto 两本扩展读物，可作为系统学习进阶内容的参考。

小结：读懂编译产物，就掌握了 CoffeeScript

CoffeeScript 的全部"魔法"都体现在文档示例中#=>右侧的编译产物里：默认参数是运行时null检查、字符串插值是+拼接、Splat 是arguments切片、存在判断是typeof与null双重检查、数组推导是 IIFE 加push。正因如此，CoffeeScript 学习曲线平缓——你不需要理解抽象虚拟机，只需对照等价 JavaScript 即可验证每一条语法的真实行为。掌握了上述十个核心语法点，你便具备了阅读、编写和审校 CoffeeScript 代码的完整能力。

• 文档
• 教程