摘要:更多信息嵌套三元运算符之前改造后我承认,一开始,使用嵌套三元运算符的想法的确令人倒胃口。当然使用三元运算符具有两面性,但就我个人而言,嵌套三元运算符真的越来越吸引我了。
在这篇文章中,我介绍了一些编程时尝试使用的模式。这些模式是多年来我自己在工作中实践的结果,也有是从同事那里偷偷学到的。
这些模式没有特定的顺序,只是一个简单的集合。
提前退出(early exits)function transformData(rawData) { // check if no data if (!rawData) { return []; } // check for specific case if (rawData.length == 0) { return []; } // actual function code goes here return rawData.map((item) => item); }
我将这种模式称为“提前退出(early exits)”,但有些人也将此称为“保镖模式(the Bouncer Pattern)”或“保护条款("guard clauses)”。撇开命名不谈,该模式采用的方法是首先检查无效的情况,然后从该函数返回,否则它将继续使用该函数的预期情况并执行。
对我来说,这种方法有一些我非常喜欢的优点:
有助于思考无效和边界情况,以及在这种情况下该如何处理。
避免对意外情况进行意外和不必要的代码处理
这样使我更能清楚地处理每种情况
一旦使用这种方式,您就可以快速地浏览函数并理解流程和执行,这通常遵循自顶向下的方法,即从无效的情况—>小情况—>预期情况。
更多信息:保镖模式(the Bouncer Pattern)
2. 用对象字面量替代 Switch// Switch let createType = null; switch (contentType) { case "post": createType = () => console.log("creating a post..."); break; case "video": createType = () => console.log("creating a video..."); break; default: createType = () => console.log("unrecognized content type"); } createType(); // Object literal const contentTypes = { post: () => console.log("creating a post..."), video: () => console.log("creatinga video..."), default: () => console.log("unrecognized content type") }; const createType = contentTypes[contentType] || contentTypes["default"]; createType();
接下来就是要移除 Switch。在写 case 的时候我经常会犯错误,也会忘记写 break,这会引起各种有趣的问题。当我编写代码时,switch语句并没有体现太多的价值。
我更喜欢使用对象字面量,原因如下:
不用担心 cace 或 break。
更容易阅读并快速了解正在发生的事情
对象字面量很容易写
代码量少
3. 用一次循环处理两个数组const exampleValues = [2, 15, 8, 23, 1, 32]; const [truthyValues, falseyValues] = exampleValues.reduce((arrays, exampleValue) => { if (exampleValue > 10) { arrays[0].push(exampleValue); return arrays; } arrays[1].push(exampleValue); return arrays; }, [[], []]);
这种模式没什么特别的,我应该早点意识到,但我发现自己过滤一组元素,以获得所有匹配特定条件的元素,然后在另一种情况下要再做一次。这意味着对一个数组进行两次循环,但我可以只做一次。
原来它有一个名字(bifurcate),我从 30secondsofcode.org借鉴过来的。如果你从未去过那个网站,我建议你去那里。有很多有用的信息和代码。
我知道 reduce 可能会让人望而生畏,也不太清楚会发生什么,但如果你能适应它,在遍历集合时,您可以真正利用它来构建所需的任何数据结构。他们应该叫它 builder 而不是 reduce。
4. 不要用 foo 做变量// bad const foo = y && z; // good const isPostEnabled = isPost && postDateValid;
这看起来很明显,但我相信我们都见过这样做的代码。花点时间,尽你最大的努力取个合适的名字。
这对于在职的专业人士或处于教育他人位置的人来说尤其重要。应该使用变量命名来帮助解释,在代码的上下文中发生了什么事情。
别人能够在阅读您的代码时,并大致可以理解要解决的问题。
更多信息:The art of naming variables
5. 嵌套三元运算符// 之前 let result = null; if (conditionA) { if (conditionB) { result = "A & B"; } else { result = "A"; } } else { result = "Not A"; } // 改造后 const result = !conditionA ? "Not A" : conditionB ? "A & B" : "A";
我承认,一开始,使用嵌套三元运算符的想法的确令人倒胃口。它看起来是一种编写条件的巧妙方式。
然后我开始编写业务逻辑,发现自己使用了嵌套的 if else 语句和一些非常可疑的条件逻辑。
我认为使用 if 和 else更容易阅读,因为它们是实际的单词,有语义化,但当它们嵌套后,我开始很难理解发生了什么,并在心里默默跟踪所有情况。
我认为这种模式取决于你、你的团队的偏好。我在代码库中也很好的使用这种方式。当然使用三元运算符具有两面性,但就我个人而言,嵌套三元运算符真的越来越吸引我了。
更多信息:Nested Ternaries are Great by Eric Elliot
如果对你有帮助,请关注【前端技能解锁】:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105780.html
摘要:负责部门大大小小的事务,大到方案制定与落实,小到吃饭喝酒大保健。这都是我喜欢的表现行动。想做就马上做,喜欢就坚持做希望年后的你们不会后悔你现在的决定有点胡说八道了,大家多多体谅本文参与了我的编程之路计划,欢迎正在阅读的你也加入,一起分享。 爆照 showImg(https://segmentfault.com/img/bVtmco); 有女朋友,但是不能爆照。哈哈哈哈...... 目前...
摘要:作为函数式编程语言,带来了很多语言上的有趣特性,比如柯里化和反柯里化。在一些函数式编程语言中,会定义一个特殊的占位变量。个人理解不知道对不对延迟执行柯里化的另一个应用场景是延迟执行。不断的柯里化,累积传入的参数,最后执行。作为函数式编程语言,JS带来了很多语言上的有趣特性,比如柯里化和反柯里化。 这里可以对照另外一篇介绍 JS 反柯里化 的文章一起看~ 1. 简介 柯里化(Currying)...
摘要:可能是世界上最受欢迎的编码挑战网站,自十多年前首次推出以来它一直都是几十万用户的家。在线评测是成千上万的编码挑战的宝库,这让你忙上几个星期。允许用户添加自己的挑战,组织编程竞赛,并争取最高的排名。 原文地址:https://www.evget.com/article...每个人都知道编程正在成为几乎每个行业的重要组成部分,它对组织的帮助和对大型系统的维护是独一无二的,因此越来越多的人开...
摘要:六个月前,我辞掉了初级开发者的工作,并去东南亚旅行了五个月。我的目标了解更多资料我原本计划去东南亚旅行个月,我也有信心在旅行回来后能够找到一份更好的工作。申请工作我下一站旅行地是老挝境内一个偏远的攀爬区。 金三银四,谨以此文献给所有正在准备跳槽的你。 showImg(https://segmentfault.com/img/bVbhXVQ?w=640&h=640);六个月前,我辞掉了初...
阅读 882·2021-09-09 09:32
阅读 2767·2021-09-02 10:20
阅读 2630·2021-07-23 11:24
阅读 802·2019-08-30 15:54
阅读 3609·2019-08-30 15:54
阅读 1314·2019-08-30 11:02
阅读 2805·2019-08-26 17:40
阅读 1096·2019-08-26 13:55