网站首页 > 基础教程 正文
在写JS代码逻辑的时候,我们通常都会想怎么让自己写的逻辑被人容易读懂,代码看起来简洁又很合理,随着前端技术的不断发展,新的标准不断的推出,其实我们可以把JS代码逻辑可以写的更好,更简洁而且更合理。
这篇文章,我给大家列出几个应该妥善处理好JS逻辑的例子。
一、如何交换变量?
通过下面的代码,应该能看懂交换变量是什么意思,这个例子说的是用汉堡来换巧克力,对,你可能会像下面这样,利用一个中间变量去暂存你要交换的内容,从而达到交换的目的。
其实,你大可不必引入tempFoot变量。好的实现应该是这样的。
利用数组解构
二、不要过多使用ifelse语句
例如这个店里有很多商品,我需要知道如何获取任意指定商品的价格。比较直接的方法,可能就是用ifelse一行代码一行代码铺下来,像这样:
上面这样过多的使用ifelse的写法,显然不是特别优雅与合理,代码的圈复杂度也高。然而,比较好的处理方法是,像下面这样写:
利用一个对象来检索
三、使用Object.entries遍历对象
工作中,如果我们要遍历一个对象,假如使用forin去遍历,就会将该对象原型上的属性也打印出来。
举个例子,看下面这段代码
我在Object.prototype上绑定了一个属性,使用forin会打印出5条数据出来。
比较好的写法是,像下面这样,结果就只会输出4种食物。
选择Object.entries来遍历
四、展平数组
假如我们现在需要把所有食物放到一个篮子里,看下面这段代码
很显然,使用reduce虽好,但是我们有更好的选择,方式二利用flat方法比较简洁。
控制台输出
五、计算所有商品总价
假如商品价格表数据结构通常是这样的
要计算出总价格,比较直接的方式就是使用函数遍历,像这样
这种方式无疑是理解成本比较低的一种方式,但是不够简洁,
好的处理方式是,像下面这样
使用reduce
六、打印信息用console.table
如上面食物价格数据表,分别用console.log和console.table打印出来
后者看起来就比较舒服一点
七、舍入技巧
为了回馈消费者,店里正在进行促销活动,所有食物都打折,小数点都可以抹掉了。
我需要用Math.floor方法计算食物的最终价格。然而,实际上可以使用~~来代替使用Math.floor方法。代码如下
猜你喜欢
- 2024-10-16 「译」你不知道的Chrome调试技巧DAY1-DAY6
- 2024-10-16 Java8 Stream 拼接字符串 Collectors.joining
- 2024-10-16 开发人员要点:JavaScript console methods
- 2024-10-16 前端异常监控和容灾 前端架构师成长之路
- 2024-10-16 高级Web必备:网络优化,拿去镇住面试官
- 2024-10-16 JS 调试心得 前端js调试
- 2024-10-16 这几个JS调试方法知道很受益 js怎么调试
- 2024-10-16 小窍门分享:如何使用Chrome控制台创建表格
- 2024-10-16 10个JavaScript调试技巧,帮你更好、更快地调试代码
- 2024-10-16 5个控制台技巧助你在Chrome开发者工具更好的调试web应用(翻译)
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)