JavaScript常用技巧专题五

文章目录

  • 一、使用适当的命名和注释来提高代码可读性
  • 二、优雅的写条件判断代码
    • 2.1、普通的`if else`
    • 2.2、三元运算符
    • 2.3、多个`if else`
    • 2.4、`switch case`
    • 2.5、对象写法
    • 2.6、`Map`写法
  • 三、封装条件语句
  • 四、函数应该只做一件事
  • 五、`Object.assign`给默认对象赋默认值
  • 六、函数参数两个以下最好
  • 七、使用解释性的变量
  • 八、让对象拥有私有成员-通过闭包来实现
  • 九、使用方法链
  • 十、最后

一、使用适当的命名和注释来提高代码可读性

// 不好的
const x = 10; // 设置x的值为10
function a(b) {return b * 2; // 返回b的两倍
}
// 好的
const speed = 10; // 设置速度为10
function double(value) {return value * 2; // 返回输入值的两倍
}

二、优雅的写条件判断代码

简单的条件判断逻辑用if else 或者 三元运算符, 一眼看过去还能知道说的啥,但是大量的if else和叠加在一起的三元运算符就是接盘侠的噩梦~~~

给大家上一个三元运算符叠加的案例,我是真实在项目中遇到过,cpu直接干爆~~~

<view>{{status===1?'成功': status===2 ? '失败' : status===3 ? '进行中' : '未开始' }}</view>

大概是这样的,具体的项目代码不好放在这里,小伙伴们意会就行。

复杂逻辑推荐使用对象Map写法,符合人脑的逻辑,可读性高,看着舒服~~~

2.1、普通的if else

let txt = '';
if (falg) {txt = "成功"
} else {txt = "失败"
}

2.2、三元运算符

let txt = flag ? "成功" : "失败";

2.3、多个if else

// param {status} status 活动状态:1:成功 2:失败 3:进行中 4:未开始
let txt = '';
if (status == 1) {txt = "成功";
} else if (status == 2) {txt = "失败";
} else if (status == 3) {txt = "进行中";
} else {txt = "未开始";
}

2.4、switch case

let txt = '';
switch (status) {case 1:txt = "成功";break;case 2:txt = "成功";break;case 3:txt = "进行中";break;default:txt = "未开始";
}

2.5、对象写法

const statusMap = {1: "成功",2: "失败",3: "进行中",4: "未开始"
}
//调用直接 statusMapp[status]

2.6、Map写法

const actions = new Map([[1, "成功"],[2, "失败"],[3, "进行中"],[4, "未开始"]
])
// 调用直接 actions.get(status)

三、封装条件语句

同上,if里的条件越多越不利于接盘侠的维护,不利于人脑的理解,一眼看过去又是一堆逻辑。多个逻辑应该化零为整

大脑:'别来碰我,让我静静'
// 不好的
if (fsm.state === 'fetching' && isEmpty(listNode)) {// ...
}
// 好的
shouldShowSpinner(fsm, listNode){return fsm.state === 'fetching' && isEmpty(listNode)
}
if(shouldShowSpinner(fsm, listNode)){//...doSomething
}

四、函数应该只做一件事

函数式写法推崇柯里化, 一个函数一个功能,可拆分可组装。

// 不好的
function createFile(name, temp) {if (temp) {fs.create(`./temp/${name}`);} else {fs.create(name);}
}
// 好的
function createFile(name) {fs.create(name);
}
function createTempFile(name) {createFile(`./temp/${name}`)
}

再来一个栗子

函数要做的事情如下:

  • 遍历clients数组
  • 遍历过程中,通过lookup函数得到一个新的对象clientRecord
  • 判断clientRecord对象中isActive函数返回的是不是true,
  • isActive函数返回true,执行email函数并把当前成员带过去
// 不好的
function emailClients(clients) {clients.forEach((client) => {const clientRecord = database.lookup(client);if (clientRecord.isActive()) {email(client);}});
}
// 好的
function emailClients(clients) {clients.filter(isClientRecord).forEach(email)
}
function isClientRecord(client) {const clientRecord = database.lookup(client);return clientRecord.isActive()
}

上面不好的栗子一眼看过去是不是感觉一堆代码在那,一时半会甚至不想去看了。

好的栗子,是不是逻辑很清晰,易读。

  • 巧用filter函数,把filter的回调单开一个函数进行条件处理,返回符合条件的数据
  • 符合条件的数据再巧用forEach,执行email函数

五、Object.assign给默认对象赋默认值

// 不好的
const menuConfig = {title: null,body: 'Bar',buttonText: null,cancellable: true
};
function createMenu(config) {config.title = config.title || 'Foo';config.body = config.body || 'Bar';config.buttonText = config.buttonText || 'Baz';config.cancellable = config.cancellable === undefined ?config.cancellable : true;
}
createMenu(menuConfig);
// 好的
const menuConfig = {title: 'Order',buttonText: 'Send',cancellable: true
};
function createMenu(config) {Object.assign({title: 'Foo',body: 'Bar',buttonText: 'Baz',cancellable: true }, config)
}
createMenu(menuConfig);

六、函数参数两个以下最好

说一千道一万,就是为了优雅,就是为了可读性好。

// 不好的
function createMenu(title, body, buttonText, cancellable) {// ...
}
// 好的
const menuConfig = {title: 'Foo',body: 'Bar',buttonText: 'Baz',cancellable: true
};
function createMenu(config){// ...
}
createMenu(menuConfig)

七、使用解释性的变量

省流,用了扩展运算符,为了可读性(saveCityZipCode(city, zipCode)可读性很好,知道参数是干嘛的)

// 不好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);
// 好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
cosnt [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode)

想对类中的属性进行更多自定义取/增/改的操作时,使用set/get

第一次见这个写法,不知道是啥意思的小伙伴,把他当成vue2中的defineProperty

Object.defineProperty(data1,'age',{set:function(newAge){console.log(this.name+'现在'+newAge+'岁')},get:function(){return 18;}
})

是一个意思,赋值的时候set会被触发,取值的时候get会被触发。

巧用自带属性,提升性能。

class BankAccount {constructor(balance = 1000) {this._balance = balance;}// It doesn't have to be prefixed with `get` or `set` to be a//getter/setterset balance(amount) {console.log('set')if (verifyIfAmountCanBeSetted(amount)) {this._balance = amount;}}get balance() {console.log('get')return this._balance;}verifyIfAmountCanBeSetted(val) {// ...}
}
const bankAccount = new BankAccount();
// Buy shoes...
bankAccount.balance -= 100;
// Get balance
let balance = bankAccount.balance;

八、让对象拥有私有成员-通过闭包来实现

闭包天生就是做私有化的

// 不好的
const Employee = function(name) {this.name = name;
};
Employee.prototype.getName = function getName() {return this.name;
};
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined
// 好的
const Employee = function(name){this.getName = function(){return name}
}
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined

第一个示例

优点:

  • 通过原型链共享方法,节省了内存空间。所有实例对象共享同一个 getName 方法,而不是每个实例对象都创建一个独立的方法。

缺点:

  • 在构造函数中无法直接定义私有属性或方法,所有属性和方法都会被暴露在原型链上

第二个示例

优点:

  • 可以在构造函数内部定义私有属性和方法,不会暴露在对象的原型链上,提供了更好的封装性。

缺点:

  • 每次创建实例对象时,都会创建一个独立的方法,每个实例对象都有自己的 getName 方法,占用更多的内存空间。

九、使用方法链

链式写法也是代码优雅之道的重头戏。

ps:发明这个的程序员肯定是后端出身的,这种写法在PHPCI框架中见过。

// 不好的
class Car {constructor() {this.make = 'Honda';this.model = 'Accord';this.color = 'white';}setMake(make) {this.make = make;}save() {console.log(this.make, this.model, this.color);}
}
const car = new Car();
car.setMake('Ford');
car.save();
// 好的
class Car {constructor() {this.make = 'Honda';this.model = 'Accord';this.color = 'white';}setMake(make) {this.make = make;// NOTE: return this是为了用链式写法return this;}save() {console.log(this.make, this.model, this.color);// NOTE:return this是为了用链式写法return this;}
}
const car = new Car().setMake('Ford').save();

十、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/495088.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML 页面的生命周期、HTML 事件

From&#xff1a;https://blog.csdn.net/WuLex/article/details/101016936 1、页面生命周期 HTML页面的生命周期有以下三个重要事件&#xff0c;每个事件都有特定的用途 DOMContentLoaded &#xff1a; 浏览器已经完全加载 HTML&#xff0c;DOM 树已经构建完毕&#xff0c;js …

腾讯再次海选AI项目,1500进40,医疗零售机器人成新风向

雷刚 发自 凹非寺 量子位 报道 | 公众号 QbitAI一年一度风向标&#xff0c;腾讯又一次海选AI项目。去年第一期腾讯AI加速器结业后&#xff0c;鹅厂就马不停蹄开启了第二期报名&#xff0c;而且这一次报名企业更多、竞争更激烈、最终录取概率甚至不到3%。第二期AI加速器通过初试…

The Human Touch 将人工智能和机器人用于病人工作的实际和伦理意义

来源&#xff1a;IEEE电气电子工程师学会摘要&#xff1a;我们生活在一个科幻小说可以很快成为科学事实的时代。在一代人的时间里&#xff0c;互联网已经从技术奇迹变成了实用工具&#xff0c;移动电话重新定义了我们的交流方式。我们生活在一个科幻小说可以很快成为科学事实的…

渗透测试 ( 0 ) --- XSS、CSRF、文件上传、文件包含、反序列化漏洞

漏洞数据库&#xff1a;https://www.exploit-db.com/google-hacking-database 1、渗透测试 实用 浏览器插件 chrome、edge 插件&#xff1a;搜索 cookie&#xff0c;安装 cookie editor&#xff0c;打开插件&#xff0c;可以 导出 cookie HackBar &#xff1a;Hackbar是网络安…

专访盛大创始人陈天桥:未来的杀手级应用必将诞生于脑科学

翻译丨于波 校对丨其奇来源丨Medium 神经科技初见陈天桥&#xff0c;他穿着带有花纹的短袖衬衫&#xff0c;休闲款式的蓝色牛仔裤&#xff0c;迷彩色的运动鞋&#xff0c;仿佛是个享受退休生活的人。过去的他可不是这样。1999年&#xff0c;陈天桥创建盛大游戏公司&#xff0c…

动手解决jar转txt软件的一个缺陷

代码&#xff1a; import java.io.BufferedOutputStream;import java.io.BufferedReader;import java.io.DataOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStreamReade…

渗透测试 ( 2 ) --- 渗透测试系统、靶机、GoogleHacking、kali工具

操作系统&#xff1a;https://zhuanlan.zhihu.com/p/162865015 1、基于 Windows、Linux、Android 的渗透测试系统 1.1 基于 Linux 的系统 Kali&#xff1a;https://www.kali.org/get-kali/Parrot Security OS&#xff1a;Parrot Securitybackbox&#xff1a;https://www.backbo…

清华发布《中国AI发展报告2018》:中科院系统AI论文产出全球第一

来源&#xff1a;大数据文摘人工智能正成为全球性话题&#xff0c;各国的AI人才争夺战也正愈演愈烈。那么目前&#xff0c;人工智能在中国的发展条件如何&#xff0c;中国距离成为真正的人工智能强国到底还有多远&#xff1f;基于此&#xff0c;7月13日&#xff0c;《中国人工智…

单例模式小记【原创】

中国的历史上很少出现两个皇帝并存的时期&#xff0c;是有&#xff0c;但不多&#xff0c;那我们就认为皇帝是个单例模式&#xff0c;在这个场景中&#xff0c;有皇帝&#xff0c;有大臣&#xff0c;大臣是天天要上朝参见皇帝的&#xff0c;今天参拜的皇帝应该和昨天、前天的一…

渗透测试 ( 3 ) --- Metasploit Framework ( MSF )

白嫖 &#xff1a;https://zhuanlan.zhihu.com/p/449836479&#xff1a;http://t.zoukankan.com/hxlinux-p-15787814.html&#xff1a;https://www.52pojie.cn/thread-1586222-1-1.html Metasploit Pro 英文文档&#xff1a;https://docs.rapid7.com/metasploit/ Metasploit P…

工业4.0进行时:工业机器人为何能够快速爆发?

来源&#xff1a;资本实验室摘要&#xff1a;聚焦前沿科技创新与传统产业升级自George Devol于1961发明第一台可编程工业机器人“Unimate”以来&#xff0c;工业机器人产业已经走过了几十年的历史。到了2000年&#xff0c;全球约有74.25万台工业机器人。其中&#xff0c;超过一…

CRITICAL_SECTION 学习

// Critsetion.cpp : 定义控制台应用程序的入口点。 //#include "stdafx.h" #include <Windows.h> #include <iostream> #include <process.h> using namespace std;CRITICAL_SECTION g_cs; char name[]"zhangdongsheng";unsigned __std…

渗透测试 ( 4 ) --- Meterpreter 命令详解

From&#xff1a;https://blog.csdn.net/weixin_45605352/article/details/115824811 <<Web 安全攻防(渗透测试实战指南)>> 1、初识 Meterpreter 1.1.什么是 Meterpreter Meterpreter 是 Metasploit 框架中的一个扩展模块&#xff0c;作为溢出成功以后的攻击载荷使…

深度:中国车企遭遇最大危机!末尾淘汰赛开始【附下载】| 智东西内参

来源&#xff1a;智东西摘要&#xff1a;靠“合资”起步的中国自主品牌汽车走到了成熟期的转折点&#xff0c;面临的形势极为严峻。中国汽车自主品牌30多年的发展过程&#xff0c;从闭门造车到合资建厂&#xff0c;再到民营崛起&#xff0c;正在逐渐走向开放。经国务院批准&…

渗透测试 ( 5 ) --- 扫描之王 nmap、渗透测试工具实战技巧合集

Nmap 官方文档 ( 中文文档是 Nmap 版本4.50&#xff0c;英文文档是最新的 )&#xff1a; 英文文档&#xff1a;https://nmap.org/book/man.html中文文档&#xff1a;https://nmap.org/man/zh/index.html#man-description官方 Nmap 项目指南 &#xff1a;https://nmap.org/book…

OSI、TCP/IP or Five-layer(Protocols Use) Model

转载于:https://www.cnblogs.com/michael-shan/archive/2012/03/31/6649681.html

央视深入报道,国内主流芯片真实水平如何?

来源&#xff1a;芯师爷摘要&#xff1a; 站在风口上&#xff0c;猪都会飞&#xff01;——用这来概括当下国内芯片领域再恰当不过了。自中兴事件之后&#xff0c;很多创业者纷纷将商业计划的关键字调整为“芯片”。与此同时&#xff0c;投资者也将目光转移至AI芯片、自动驾驶芯…

渗透测试 ( 6 ) --- SQL 注入神器 sqlmap

sqlmap 官网&#xff1a;http://sqlmap.org/ sqlmap文档地址&#xff1a;https://github.com/sqlmapproject/sqlmap/wiki/Usage sqlmap 使用 思维导图&#xff1a;http://download.csdn.net/detail/freeking101/9887831 黑帽与白帽都喜爱的十大SQL注入工具&#xff1a;http://…

美国研发出百万兆级计算机 Summit,“最强超算”竞争加剧

来源&#xff1a;36Kr摘要&#xff1a;史上最强计算机出现&#xff0c;美国开发出了世界上第一台百万兆级的计算机&#xff0c;超强的计算能力有望能解决更复杂的问题。上个月&#xff0c;美国能源部公布了世界上最快的超级计算机——Summit&#xff0c;整个美国为之庆祝。现在…

渗透测试 ( 7 ) --- 漏洞扫描工具 Nessus

Nessus 官网&#xff1a;https://www.tenable.com/products/nessus/nessus-professional 1、Nessus 简介、下载、安装 1.1 简 介 Nessus 是世界上很流行的漏洞扫描程序&#xff0c;全世界很多组织都有在使用它。该工具提供完整的电脑漏洞扫描服务&#xff0c;并随时更新其漏洞…