文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文以 Modern JavaScript Tutorialen.javascript.info仓库中 基础运算符与数学运算 章节的配套练习 The postfix and prefix forms 及其 官方解答 为主体深入剖析 JavaScript 中/--运算符的前缀形式与后缀形式在返回值上的本质区别并在此基础上延伸到表达式求值顺序、运算符优先级与代码可读性等实战要点。读完本文你将能准确预测任何含自增自减表达式的结果并写出可读性更佳的代码。一、练习题目四个变量的最终值仓库中 task.md 给出了一道经典入门题重要性标记为importance: 5属于最高优先级的基础练习let a 1, b 1; let c a; // ? let d b; // ?请判断执行完毕后变量a、b、c、d分别等于多少。这道题的价值在于它同时考察了赋值语句的执行顺序、自增运算符的副作用以及前缀/后缀形式的返回值差异三个知识点。二、官方解答与逐步推演根据仓库中的 solution.md最终答案是a 2b 2c 2d 1官方解答用一段可直接运行的代码验证了这一点let a 1, b 1; alert( a ); // 2, prefix form returns the new value alert( b ); // 1, postfix form returns the old value alert( a ); // 2, incremented once alert( b ); // 2, incremented once逐步推演如下let c a;这是前缀形式。运算符先对a执行a a 1此时a变为2随后把新值2作为表达式结果返回并赋给c。因此a 2、c 2。let d b;这是后缀形式。运算符先把b的旧值1作为表达式结果返回并赋给d随后才执行b b 1此时b变为2。因此b 2、d 1。注意两个易错点第一无论前缀还是后缀a和b都确实被自增了一次所以它们最终都是2第二二者差异只体现在表达式本身返回的值上——前缀返回新值后缀返回旧值。三、深入原理为什么前缀返回新值、后缀返回旧值章节正文 article.md 在 Increment/decrement 一节中给出了完整理论增量使变量增加1减量--使变量减少1它们等价于counter counter 1/counter counter - 1的简写运算符可以放在变量之前前缀形式counter或变量之后后缀形式counter两种形式对变量本身的修改完全相同唯一区别在于表达式返回的值前缀形式返回自增/自减之后的新值后缀形式返回自增/自减之前的旧值。正文通过两个对照例子直观说明了这一点let counter 1; let a counter; // 前缀形式counter 先变 2再返回 2 alert(a); // 2let counter 1; let a counter; // 后缀形式先返回旧值 1counter 再变 2 alert(a); // 13.1 理解所有运算符都返回值这一前提要彻底理解上述差异需要先建立正文中强调的一个观念JavaScript 中所有运算符都会返回一个值。、-如此赋值运算符如此/--也不例外。正文专门讨论了赋值运算符的返回值特性见 Assignment returns a value 小节x value在把value写入x的同时会返回该值因此它可以作为更大表达式的一部分let a 1; let b 2; let c 3 - (a b 1); // (a b 1) 的结果是 3 alert( a ); // 3 alert( c ); // 0同理/--在执行副作用修改变量的同时也会产生一个返回值前缀与后缀的差异正是返回值取自修改前还是修改后。3.2 一个形象的记忆方法可以把后缀形式理解为先取票、后上车先把当前值取出来作为表达式结果再执行自增前缀形式则是先上车、后取票先完成自增再把新值作为表达式结果。只要分清表达式结果与变量最终值是两回事这类题目就不会再出错。四、实战场景与易错点扩展4.1 后缀形式在循环中的经典误用最常见的使用场景是for循环的更新语句。仓库正文在 Comma 一节给出过循环示例for (a 1, b 3, c a * b; a 10; a) { // ... }这里的a单独作为语句使用结果被丢弃因此前缀/后缀没有区别。但如果把a放进更复杂的表达式差异立刻显现。正文 Increment/decrement among other operators 的示例let counter 1; alert( 2 * counter ); // 4counter 先变 2再乘以 2let counter 1; alert( 2 * counter ); // 2先取旧值 1 乘以 2counter 随后变 2同样的两行代码仅仅因为的位置不同输出就从4变成了2。这正是/--出现在表达式中时最容易被忽略的陷阱。4.2 优先级视角自增自减高于绝大多数算术运算正文的运算符优先级表摘录显示自增/自减与前缀一元运算的优先级很高优先级名称符号14一元加14一元负-13幂**12乘*12除/11加11减-2赋值正文指出自增/自减的优先级高于大多数其他算术运算因此2 * counter会先计算counter再执行乘法而赋值运算符优先级极低2所以let c a;一定是先求值完右侧表达式再把结果赋给c——这与本练习的推演逻辑完全一致。结合同目录另一道练习 Assignment result 可以进一步体会赋值会返回被赋的值这一机制let a 2; let x 1 (a * 2); // a 变为 4x 1 4 54.3 约束只能作用于变量正文给出了一个重要警告自增/自减只能应用于变量试图对字面量使用如5会直接报错。因为该运算符需要原地修改一个可写的位置而不是产生一个新值。4.4 三个结论速查正文在 Increment/decrement 小节末尾总结了三种情形可直接作为速查表不使用返回值前缀与后缀没有区别counter;与counter;效果相同需要自增后的新值必须用前缀形式如alert( counter ); // 1需要自增前的旧值必须用后缀形式如alert( counter ); // 0。五、编码规范建议一行只做一件事正文对该主题给出的最终建议值得单独强调虽然把/--嵌入复杂表达式在技术上完全合法但通常会让代码可读性下降。一行代码同时完成取值、自增、参与运算多件事快速纵向扫读时很容易漏看counter这样的副作用。正文推荐的风格是一行一个动作let counter 1; alert( 2 * counter ); // 先使用当前值 counter; // 再单独自增同样地赋值链a b c 2 2虽然合法从右向左依次赋值正文也建议拆成多行c 2 2; b c; a c;这种显式优于隐式的写法更利于快速扫读与后续维护——毕竟本题前缀/后缀差异存在的根源就是隐式副作用带来的不确定性。六、小结与延伸练习本练习的最终答案a 2、b 2、c 2、d 1。核心结论一句话概括前缀形式x返回自增后的新值后缀形式x返回自增前的旧值但两种形式都会让变量本身加 1。如果你希望进一步巩固本主题相关的知识可以继续阅读运算符与数学计算的完整章节article.md覆盖字符串拼接、一元/二元运算符、优先级表、赋值返回值、逗号运算符等相邻主题同目录关联练习Assignment result考察赋值表达式返回值与 Primitive conversions questions考察类型转换在运算符中的表现整个基础语法阶段的学习路径JavaScript Fundamentals 目录可按照变量、类型、运算符、控制流的顺序系统掌握。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐Modern JavaScript 教程精讲前置prefix与后置postfix自增/自减运算符深入解析Modern JavaScript 教程精讲前置prefix与后置postfix自增/自减运算符深入解析 本文以 Modern JavaScript文档/教程前端LeetCode 2483 店铺最小罚款Minimum Penalty for a Shop前缀后缀统计与四类扫描解法精讲LeetCode 2483 店铺最小罚款Minimum Penalty for a Shop前缀后缀统计与四类扫描解法精讲 本指南围绕 LeetCode示例工程教程JavaScript 变量实战声明、赋值与传递 —— Modern JavaScript Tutorial 练习详解JavaScript 变量实战声明、赋值与传递 —— Modern JavaScript Tutorial 练习详解 本篇指南围绕 Modern JavaSc文档/教程前端上一篇UnifiedBus超节点革命性异构硬件统一抽象平台终极指南下一篇Formily React 指南formily/react 的架构、模型绑定与三种开发模式创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考