三个灵感闪现的 JS 实验正向和逆向思维齐活了灵感闪现某天正在认真的敲代码看着刚刚写下的这行代码突发奇想如果逆向思维去写这行代码会是什么结果。「一生二二生三」我从一行代码联想到数行 JS 代码何不试试看于是接下来的故事顺其自然的发生了。接下来的文字也自然而然的被创作了出来。文章速读本文从正向和逆向两个不同的思维点出发实验了几个不同 JS 功能。阅读文章可以有以下收获JS 实验开始includes 不是一劳永逸的法子编程欢乐小剧场一年轻人为何唉声叹气。某代码改漏了太不严谨了。一哪里我看看。某这里表单里新增一个表单项结果条件判断漏加了。一确实分散的条件判断就会有漏改的风险。某有改善的方法不。一当然。某键盘奉上。一种情况合并多个条件判断是使用 includes 最常见的用法。如下的功能中需要判断输入的字符串是否包含作者自己的名字。function func(name) {if (name ye || name yi) {return self;}return other; } let nameStr zhang; let res func(nameStr); console.log(res); // other如果再增加一个判断是否有作者好友的名字。条件会不断增加不优雅且容易漏掉。includes 判断一个数组是否包含一个指定的值如果包含则返回 true否则返回 false。function func(name) {let list [ye, yi, shang, ying, yan];if (list.includes(name)) {return self;}return other; } let nameStr shang; let res func(nameStr); console.log(res); // self只需要维护 list 数组即可不需要不停增加判断条件。这个功能用法还挺常见常用的。但是用了它不代表代码可以一劳永逸因为还有一种情况不仅增加了判断条件还增加了条件中需要判断的项。另一种情况某其实我还有个困惑。一说说看。某有时候改了表单项的 name 值表单 UI里改了判断里忘记改了。一确实分散的设置就会有漏改的风险。某这种情况也能集中处理一当然。某键盘和膝盖双双奉上。先简单描述一下需求在一组用户信息中如果当有订单产生的时候部分用户信息不能修改。一般情况下会把不能修改的信息的唯一 key 值放入 keyList 数组中然后通过其 includes 进行判断。当 includes 的值是 true 的时候当前信息类型的 disabled 值设置为 true。let obj [{key: name,value: ye,},{key: age,value: 18,},{key: speciality,value: tale telling,},{key: hobby,value: read,}, ]; let keyList [speciality, hobby]; let orderFlag true; obj.map(e {if (orderFlag keyList.includes(e.key)) {e.disabled true;} }); console.log(obj);打印结果但是由于种种原因需要改动其中一个 key 值但是判断的 keyList 数组中的值忘记修改了。这个时候得到在最终结果就不准确了。这种情况可以换一种方式。let obj [{key: name,value: ye,},{key: age,value: 18,},{key: speciality,value: tale telling,editJudgeFlag: true, // 是否需要判断可以编辑的布尔值},{key: hobbys,value: read,editJudgeFlag: true, // 是否需要判断可以编辑的布尔值}, ]; let orderFlag true; obj.map(e {if (orderFlag e.editJudgeFlag) {e.disabled true;} }); console.log(obj);数组数据走配置化还是很方便的。不需要维护判断的 keyList 数组直接为需要进行判断的元素添加 editJudgeFlag。当 editJudgeFlag 为 true 且满足订单判断条件时当前信息类型的 disabled 值设置为 true。打印结果小结单一的条件判断可以用 includes 实现。也可以用数组的 some 方法可以凭个人喜好进行选择。如果数据是数组类型或者能重组成数组类型走配置化更为方便。finally 听说好用编程欢乐小剧场某来吧是时候做个决定了。一我不知道怎么回答多说的讯息。某我们的异步请求到底用不用 finally让我们来统一下。一好问题啊赞。某所以一我们一起来看看怎么写更合理。某键盘奉上。try…catch and finallyfinally 块中的语句会在 try 块和 catch 之后执行。这里有两个而且。无论是否抛出异常finally 块中的语句都会执行。如果抛出异常即便没有 catch 处理异常finally 块中的语句也会执行。try {await request({ url: http://localhost:${server.address().port} }); } finally {server.close(); }如上server 都会执行关闭操作。正向思维借 finally 的特质合并「按钮防重数据重置」功能现实项目中新增/编辑数据的弹窗是不可重复提交的且提交之后无论提交成功与否表单数据需要置空实际情况可能比举例中更复杂一些。通常我们的功能处理如下http(params).then(() {message.success(操作成功);}).finally(() {// 重置数据setData({});// 设置按钮不可点击setConfirmLoading(false);});既然 finally 块中的语句也会执行便可以把 try…catch 中相同的处理提炼到 finally 块中可减少重复的设置。逆向思维如果 try 语句中有 returnfinally 依旧会执行吗function func() {try {return try;} finally {return finally;} } let res func(); console.log(res:, res);打印结果// res: finally通过打印结果不难发现try 语句中有 returnfinally 块中的语句依旧是执行了的。我们因此又得到一条规则如果 finally块 语句中返回一个值那么这个值将会成为整个 try-catch-finally 的返回值。为什么这么说呢等我改造一下上面的代码function func() {try {console.log(1);return try;} catch (e) {console.log(2);} finally {console.log(3);return finally;} } let res func(); console.log(res:, res);打印结果// 1 // 3 // res: finally再看现在的打印结果try 语句中是执行的只不过finally 中的 return「覆盖了」try 中的 return。小结无论是否抛出异常无论有没有 catch 处理异常finally 块中的语句都会执行。借助 finally 的特质可以帮助合并按钮防重和数据重置的功能。如果 finally块 语句中返回一个值那么这个值将会成为整个 try-catch-finally 的返回值。//运算符相同运算符还要小括号编程欢乐小剧场某咦一干什么某咦咦一干什么干什么某这个运算的小括号是不是多余了一你猜呢。某这样说那应该不是多余的。运算的结合性运算的结合性指的是具有同等优先级的运算符将按照怎样的顺序进行运算。分为左结合和右结合两种。左结合一般优先级相同的运算符做运算的时候 结合性是左结合。即a b c 等于 (a b) c右结合一般优先级不同的运算符做运算的时候结合性是右结合。即a b /* c 等于 a (b /* c)幂运算//幂运算符返回第一个操作数取第二个操作数的幂的结果。结合性幂运算符是右结合。即a //b //c 等于 a //(b //c)看几个运算结果console.log(2 ** 3 ** 2) // 512 console.log(2 ** (3 ** 2)) // 512 console.log((2 ** 3) ** 2) // 64所以如果计算的时候想从左向右运算需要加小括号。优先级MDN 文档中没有直接说幂运算的优先级但是我可以试console.log(2 * 3 ** 2); // 18 console.log(3 ** 2 * 2); // 18 console.log(2 3 ** 2); // 11 console.log(3 ** 2 2); // 11 console.log(2 - 3 ** 2); // -7 console.log(3 ** 2 - 2); // 7 console.log((-3) ** 2); // 9 console.log(-(3 ** 2)); // -9根据这个结果不难得出结论幂运算的优先级高于基础的加减乘除运算符。不能将一元运算符/-/~/!/delete/void/typeof放在底数之前。这条是 MDN 文档里写的小结1.当不同的运算符进行运算的时候优先级会影响你想要的运算结果。所以有必要进行适当了解。2.幂运算是右结合所以计算的时候注意顺序如果有必要可以添加小括号。另外它其实等价于 Math.pow()。总结一生二二生三三生万物。 —— 老聃前面看了几天源码从源码中学习优秀的开发者的设计思维减少低质量代码的产出。而前几天的文章中提到过学习优秀开源项目的源码可以帮助扩展开发思维。所以有了很不错的收获。举例场景方面本篇除了结合实际开发场景部分实现方案其实也是来自源码中的代码。实现思维方面分享了正向和逆向这两个不同的思维面也分享了开发过程中不错的功能联想。最后整理了75个JS高频面试题并给出了答案和解析基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴可以点击下方卡片领取无偿分享《网络安全从零到精通全套学习大礼包》96节从入门到精通的全套视频教程免费领取如果你也想通过学网络安全技术去帮助就业和转行我可以把我自己亲自录制的96节 从零基础到精通的视频教程以及配套学习资料无偿分享给你。网络安全学习路线图想要学习 网络安全作为新手一定要先按照路线图学习方向不对努力白费。对于从来没有接触过网络安全的同学我帮大家准备了从零基础到精通学习成长路线图以及学习规划。可以说是最科学最系统的学习路线大家跟着这个路线图学习准没错。配套实战项目/源码所有视频教程所涉及的实战项目和项目源码学习电子书籍学习网络安全必看的书籍和文章的PDF市面上网络安全书籍确实太多了这些是我精选出来的面试真题/经验以上资料如何领取g.cn/direct/5458f21c6efa4e739621ffb5d4309b20.jpeg#pic_center)面试真题/经验以上资料如何领取