教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载导读JavaScript 代码由两种基础语法单元构成表达式Expression与语句Statement。理解二者的本质区别是掌握运算符求值、函数返回、条件渲染、箭头函数隐式返回等一系列进阶写法的前提。本文以 30-seconds-of-code 仓库中 expression-statement 一文 为骨架结合仓库内 三元运算符、箭头函数、变量声明、运算符速查表 等文章系统讲解两者的定义、分类、可嵌套性以及表达式语句这一特殊形态读完你将能准确判断任意一段代码属于哪类语法单元并写出更简洁、更符合语言习惯的代码。一、定义表达式求值语句执行JavaScript 区分表达式与语句这是语言规范层面的根本划分表达式Expression任何可以解析为一个值的有效代码单元。它向 JavaScript 求值引擎交付一个结果这个结果可以是数字、字符串、布尔值、对象、函数甚至是undefined。语句Statement执行某种动作的代码单元。它通常不产生值或者说不以产生值为目的而是完成声明变量、定义函数、控制流程、发起循环等任务。用一句话概括表达式有值语句有动作。这是判断一个语法单元类别的最快标准。二、从代码示例理解两者的区别原文档给出了一组最直观的对比示例我们先完整复现并逐行注释// 语句Statements let x 0; // 变量声明语句声明变量并完成赋值动作 function add(a, b) { return a b; } // 函数声明语句定义函数 if (true) { console.log(Hi); } // 条件控制语句根据条件执行分支 // 表达式Expressions x; // 解析为 0 —— 变量引用表达式 3 x; // 解析为 3 —— 算术运算符表达式 add(1, 2); // 解析为 3 —— 函数调用表达式观察重点let x 0;整体是一条声明语句但它的右侧0却是一个表达式——语句可以包裹表达式作为其组成部分x;单独出现时是一个合法的表达式语句它求值后得到0但结果未被使用if (true) { ... }是典型的控制流语句它本身不产生值只控制执行路径add(1, 2)是函数调用调用必然返回一个值即使没有return也会返回undefined所以函数调用永远属于表达式。三、表达式的常见形态表达式并非只有一种长相凡是能产出值的写法都属于表达式常见形态包括形态示例解析结果字面量42、hello、true、[1, 2]、{ a: 1 }该字面量本身变量引用x、obj.prop、arr[0]被引用变量的当前值运算符表达式3 x、a b、count ? a : b运算结果函数调用add(1, 2)、Math.max(1, 2)函数返回值函数表达式function () {}、() {}函数对象本身赋值表达式x 5整体求值为5被赋的值这里有两个容易忽略的细节值得展开1赋值也是表达式。x 5整体求值后等于5因此它可以被嵌套在其他表达式中如let y (x 5);这也是链式赋值a b c之所以合法的原因。2运算符表达式的值由操作数决定。仓库中的 前缀与后缀运算符一文 是同一个表达式形态不同、求值结果不同的最佳案例前缀i表达式的值是更新后的值而后缀i表达式的值是原始值let i 0; let j i; // i 1表达式 i 的值为 1所以 j 1 let k i; // i 2表达式 i 的值为 1原始值所以 k 1可见即便语法只差一个位置表达式的求值结果也可能完全不同——这正是理解表达式求值语义的实践意义。四、语句的常见形态语句是 JavaScript 程序的骨架常见形态包括类别示例变量声明语句let x 0;、const PI 3.14;函数声明语句function add(a, b) { return a b; }条件语句if (...) {...} else {...}、switch (...) {...}循环语句for (...)、while (...)、do...while (...)跳转语句return、break、continue、throw块语句{ ... }仅用于组合多条语句仓库中的 变量声明详解一文 专门讨论了var、let、const三种声明语句的差异函数作用域 vs 块级作用域、提升行为、是否挂在全局对象上、是否允许重复声明阅读时请留意这些差异全部发生在语句层面与表达式无关。值得注意的是function add(a, b) { ... }这种函数声明是语句而const add (a, b) a b;的右侧(a, b) a b则是函数表达式详见箭头函数一文。二者一个是语句、一个是表达式这也解释了为什么箭头函数可以直接出现在赋值、传参、数组元素等值的位置上。五、表达式语句语法位置的灵活性原文档的核心结论是一对不对称的规则凡是 JavaScript 期望一个语句的地方你都可以写一个表达式这种用法称为表达式语句expression statement反之凡是期望一个表达式的地方你不能写语句。也就是说表达式与语句的兼容关系是单向的可写语句的位置 ⊃ 可写表达式的位置表达式可向上兼容 表达式的位置 ⨯ 不可写语句语句不可向下兼容为什么表达式可以充当语句因为求值出一个值本身也是一种无害的动作结果只是被丢弃而已。常见的表达式语句有x; // 递增表达式语句只关心副作用不关心求值结果 obj.method(); // 方法调用表达式语句值被丢弃 console.log(Hi); // 调用表达式语句为什么语句不能充当表达式因为语句不产出值而 JavaScript 引擎在表达式位置必须拿到一个值才能继续求值。例如下面这段代码是非法的// 错误示范if 语句是语句不能出现在表达式位置 const result if (condition) { 10 } else { 20 }; // SyntaxError // 正确做法使用三元运算符本身是表达式 const result condition ? 10 : 20;这正是仓库中 三元运算符一文 要解决的问题当if...else语句的目标仅仅是产出某个值时用表达式形态的三元运算符替代代码更短、还能直接参与赋值或隐式返回。六、实战用表达式简化语句式代码理解了表达式可以放在任何期望语句或值的位置这一特性后许多仓库内的文章就有了共同的底层逻辑1. 三元运算符替代 if...else三元运算符一文 展示了用表达式取代赋值型条件语句的经典改造// 语句式写法 let x; if (someCondition) { x 10; } else { x 20; } // 表达式式写法 const x someCondition ? 10 : 20;更进一步三元表达式配合箭头函数的隐式返回可以把整个取值逻辑压缩为一行表达式// 语句式写法 const conditionalX (condition, x) { if (condition) return x; else return x 5; } // 表达式式写法箭头函数隐式返回表达式结果 const conditionalX (condition, x) condition ? x : x 5;箭头函数的隐式返回之所以可行正是因为condition ? x : x 5是一个表达式能够直接充当函数的返回值详见 箭头函数一文 中关于单一表达式可省略花括号与 return的论述。2. 对象字面量查找替代 switch 语句用对象字面量替代 switch 一文 的底层思路同样是用表达式对象字面量 属性访问表达式取代语句switchconst switchFn (lookupObject, defaultCase _default) expression (lookupObject[expression] || lookupObject[defaultCase])(); const knownFruit () console.log(Known fruit); const unknownFruit () console.log(Unknown fruit); const logFruit { apples: knownFruit, oranges: knownFruit, default: unknownFruit }; const fruitSwitch switchFn(logFruit, default); fruitSwitch(apples); // Logs: Known fruit fruitSwitch(pineapples); // Logs: Unknown fruit这里的(lookupObject[expression] || lookupObject[defaultCase])()整条链都由表达式构成可以被安全地放入箭头函数的隐式返回位置。3. 何时仍然必须使用语句表达式的确能简化不少代码但语句并非一无是处。在以下场景必须使用语句形态需要执行多条操作if分支体内含多个语句时不能强行塞进单个表达式需要return/break/continue/throw这些跳转动作是语句表达式无法表达提前退出需要声明变量或函数let/const/function声明本身就是语句分支逻辑复杂或需多级嵌套如仓库 三元运算符一文 提到的嵌套三元表达式通常不被鼓励此时回退到if...else语句反而更清晰。此外若在严格模式use strict 一文下编写代码语句的解析规则会更严格如禁止with语句、禁止重复参数名但表达式与语句的基本划分不变。七、记忆要点与延伸阅读表达式有值语句有动作看到代码先问它产出值吗产出即表达式函数声明是语句函数表达式是表达式箭头函数天生是表达式因此能出现在值的位置表达式可当语句用语句不能当表达式用这是两者的核心不对称性运算符表达式的求值顺序与语义前缀/后缀、三元?:、逻辑/||、逗号,等各自遵循特定的求值规则可对照 JavaScript 运算符速查表 逐项查阅。本文对应的原始文章收录于 JavaScript 类型文章集合同时被列入 面试精选集合其旧路径/articles/s/javascript-expression-statement已在 redirects.yaml 中配置重定向到现路径。如果你想继续深入该主题建议按顺序阅读以下仓库内文章三元运算符介绍 —— 用表达式取代 if...else 的完整实战箭头函数介绍 —— 函数表达式与隐式返回的深入讲解前缀与后缀运算符 —— 同一表达式不同求值结果的典型案例var、let 与 const 的区别 —— 声明语句的三种形态与差异JavaScript 运算符速查表 —— 各运算符表达式的求值语义总览。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30-seconds-of-interviews 面试题精讲深入理解 JavaScript 表达式Expression与语句Statement的区别30 seconds of interviews 面试题精讲深入理解 JavaScript 表达式Expression与语句Statement的区别教程前端Rust By Practice 实战深入理解语句与表达式——块表达式、分号与单元类型Rust By Practice 实战深入理解语句与表达式——块表达式、分号与单元类型 导读 语句与表达式是 Rust 区别于 C/Java 等语句式语言文档教程示例工程33-js-concepts表达式与语句JavaScript语法核心概念深度解读33 js concepts表达式与语句JavaScript语法核心概念深度解读 引言为什么需要理解表达式与语句的区别 在JavaScript开发中你是教程前端文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考