教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载本篇是 jstips 仓库中 2016-10-28-three-useful-hacks.md第 60 期技巧的深度解读。原文档分享了三个高频、轻量的语法糖用slice(-n)从后向前读取数组、用短路执行条件函数、用||为变量设置默认值。读完本文你将理解这三个技巧的底层运行原理、边界情况与常见陷阱并能结合函数默认参数、空值合并运算符等现代写法做出正确的选型在日常业务代码中写出更简洁、更不易出错的表达式。三个技巧解决什么问题JavaScript 开发者每天都在处理三件小事取数组元素、做条件分支、赋默认值。这三个操作本身并不难但写法却有好坏之分。jstips 第 60 期英文原版见 _posts/en/javascript/2016-10-28-three-useful-hacks.md给出的三个写法共同特点是更短用表达式替代语句减少括号与换行更聚焦把取尾部元素满足条件才执行无值则用默认值这类意图直接表达出来依赖语言内建语义不引入任何库基于Array.prototype.slice、、||的自带行为。下面逐一展开并在每个技巧中补充原理、边界与仓库内其他期数的佐证。技巧一用slice(-n)从后向前获取数组元素原文档给出的代码var newArray [1, 2, 3, 4] console.log(newArray.slice(-1)) // [4] console.log(newArray.slice(-2)) // [3, 4] console.log(newArray.slice(-3)) // [2, 3, 4] console.log(newArray.slice(-4)) // [1, 2, 3, 4]为什么-n表示从尾部开始Array.prototype.slice(begin, end)返回从begin到end不含之间的新数组。当传入的索引为负数时语言规范会将其换算为length 索引例如slice(-1)等价于slice(3)slice(-2)等价于slice(2)。因此slice(-1)→ 取最后 1 个元素[4]slice(-2)→ 取最后 2 个元素[3, 4]slice(-n)的通式即从倒数第 n 个元素开始一直取到数组末尾。边界情况与等价写法n超过数组长度例如对[1, 2, 3, 4]执行slice(-10)换算后是负数索引会被当作0处理返回整个数组[1, 2, 3, 4]不会报错n为 0slice(-0)即slice(0)返回完整副本注意不要用它来取 0 个尾部元素slice是非破坏性的它返回新数组原数组newArray保持不变。这点与pop()取出并移除最后一个元素、length 0清空数组完全不同——关于后者可参考仓库中 2016-01-22-two-ways-to-empty-an-array.md 对list []与list.length 0内存语义差异的剖析。实战场景读取最近 N 条记录如聊天列表取最近 5 条messages.slice(-5)日志尾部查看logs.slice(-50)只展示最新 50 行避免复制整个数组环形/滚动数据结构配合concat做分页式尾部追加可参考仓库中 2016-02-06-deduplicate-an-array.md 对数组复制与引用语义的讨论理解为什么非破坏性操作更适合数据处理链路。技巧二短路条件句condition dosomething()原文档给出对比写法// 常规写法 if (condition) { dosomething() } // 短路写法 condition dosomething()短路求值的本质是短路求值运算符只有当第一个操作数无法决定整个表达式的结果时才会对第二个操作数求值。具体来说若condition为 falsy的结果已经确定为该 falsy 值dosomething()根本不会被调用若condition为 truthy才继续求值并调用dosomething()。这正是当条件为真时才执行的语义只不过把if语句压成了一行表达式。仓库中的 2016-01-27-short-circuit-evaluation-in-js.md 对这一机制有完整讲解当第一个操作数为false时结果必为false当||第一个操作数为true时结果必为true因此第二个操作数可以跳过。注意返回的是操作数而不是布尔值condition dosomething()的返回值分两种情况condition 为 falsy 时返回 condition 本身否则返回dosomething()的返回值。因此不要把这个表达式的结果直接当作布尔值使用如果dosomething()返回undefined整个表达式结果也是undefined若要把结果统一成布尔值可叠加!!即!!(condition dosomething())。!!的 truthy/falsy 强制转换规则参见仓库中 2016-01-30-converting-truthy-falsy-values-to-boolean.md。两个高频变体1. 安全调用避免 Cannot read property of undefined常被用来在对象可能为空时安全访问属性这正是 2016-01-27-short-circuit-evaluation-in-js.md 中演示的经典模式var dog { bark: function() { console.log(Woof Woof); } }; dog.bark(); // dog 未定义时会抛错 dog dog.bark(); // 仅当 dog 存在时才调用安全2. 回调函数保护Node.js 风格的函数中回调参数可能为空直接用callback(err)会抛 TypeError。用短路写法即可优雅兜底这一模式在仓库的 2016-05-06-use-optional-arguments.md 中反复出现if (err) { return callback callback(err); }与if语句的取舍condition dosomething()适合单条、无返回值依赖的调用让代码更紧凑当需要多个语句、else分支或较复杂的逻辑时应回归if语句避免可读性下降条件为false时若你本意是执行另一个函数可写成!condition dosomethingElse()但两个并列的短路表达式不如if/else直观。技巧三用||为变量设置默认值原文档给出的代码var a console.log(a) // undefined a a || default value console.log(a) // default value a a || new value console.log(a) // default value运行原理||同样遵循短路求值若第一个操作数为 truthy直接返回它不再看第二个若第一个操作数为 falsy则返回第二个操作数。于是a a || default value的含义是若a已经有值保持原值若a为空falsy则赋默认值。由于default value是 truthy第二次a a || new value中a已非空结果仍是default value原文档的输出恰好印证了这一点。最大的陷阱falsy 值不止undefined||判断的是 truthy/falsy而不是是否为 null/undefined。因此下面这些合法且常见的值也会被默认值替换var count 0; count count || 10; // 结果变成 10而你可能期望保留 0 var name ; name name || 匿名; // 空字符串被替换 var ratio NaN; ratio ratio || 1; // NaN 被替换 var flag false; flag flag || true; // false 被替换成 true逻辑反转falsy 值的完整集合是false、0、-0、0n、、null、undefined、NaN可对照 2016-01-30-converting-truthy-falsy-values-to-boolean.md 中的!!示例。所以当业务上0、空字符串、false都是合法值时||并不合适。更精准的替代方案函数参数默认值ES6仅在参数为undefined时生效0、、false会原样保留function greet(name 访客) { return Hello, name; } greet(); // Hello, 访客 greet(); // Hello, greet(Tom); // Hello, Tom空值合并运算符??ES2020只对null和undefined兜底适合数字 0、空字符串是有效值的场景var count 0; count count ?? 10; // 0保留 var maybeNull null; maybeNull maybeNull ?? 10; // 10需要区分undefined与null时可参考仓库 2016-01-05-differences-between-undefined-and-null.md 的总结undefined表示未赋值null表示显式的空值两者用相等但用不等。函数入参默认值的经典用法||给函数参数设默认值是最常见的实战场景仓库 2016-01-27-short-circuit-evaluation-in-js.md 中就有完整示例function theSameOldFoo(name){ name name || Bar; console.log(My best friends name is name); } theSameOldFoo(); // My best friends name is Bar theSameOldFoo(Bhaskar); // My best friends name is Bhaskar注意同样的陷阱如果name的合法值可能是空字符串或0请改用上面的 ES6 默认参数或??。三个技巧对照小结技巧写法适用场景必须注意反向取数组arr.slice(-n)取尾部 N 个元素、最近记录非破坏性n0返回整个副本短路条件执行condition fn()条件为真才执行、安全访问、回调保护表达式结果是操作数而非布尔值||设默认值a a \|\| default参数/变量为空时兜底0、、false、NaN都会被替换从仓库结构看这三个技巧并非孤例短路求值第 27 期、truthy/falsy 转换第 30 期、可选参数与回调保护第 54 期等文档都在围绕同一套表达式即控制流的 JavaScript 内建语义展开说明它们是高频且值得熟练掌握的基础能力。建议在团队代码中为这三个写法约定统一的边界如业务上允许0/空字符串时禁用||兜底避免语法糖带来的隐式 bug。延伸阅读仓库内2016-01-27-short-circuit-evaluation-in-js.md短路求值完整原理与安全访问示例2016-01-30-converting-truthy-falsy-values-to-boolean.mdtruthy/falsy 值与!!强制转换2016-01-05-differences-between-undefined-and-null.mdundefined与null的判断与区别2016-05-06-use-optional-arguments.md可选参数与callback callback(err)的实战模式2016-01-22-two-ways-to-empty-an-array.md数组引用语义与length 0的说明2016-02-06-deduplicate-an-array.md基于filter、Set的数组去重与引用语义分析赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐jstips 第 60 期三个提升开发效率的 JavaScript 语法糖技巧slice 负索引、短路求值、|| 默认值jstips 第 60 期三个提升开发效率的 JavaScript 语法糖技巧slice 负索引、短路求值、 || 默认值 本篇技术指南源自 jstips教程jstips 实用技巧三个基于 ES6 扩展运算符的 JavaScript 数组 Hackjstips 实用技巧三个基于 ES6 扩展运算符的 JavaScript 数组 Hack 数组Array在 JavaScript 中无处不在而 ECM教程TwitchDropsMiner终极指南自动化获取游戏奖励的专业解决方案TwitchDropsMiner终极指南自动化获取游戏奖励的专业解决方案 厌倦了为了获取Twitch游戏掉落奖励而长时间观看直播 TwitchDropsMi桌面应用工作流自动化上一篇3分钟掌握fzf的zsh自动补全效率提升10倍的秘密下一篇fzf shell集成提升终端效率的完整方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考