昨天看权威指南的时候看到一个个人觉得很优雅的写法，便想着记录一下（我的梦想就是写一手富有诗意的优雅代码）在Js世界中，有些操作会让你无法理解，但是却无比优雅。如有错误，欢迎批评指正！（看前先点赞，养成好习惯哈哈哈）
1、 判断为空
- 直白写法
<code> if(a == undefined) a = [];
if(params.success){
params.success(res);
}/<code>
- 优雅写法
<code> a = a || [];
params.success&¶ms.success(res);
//注意事项
1、if内不能出现var、=等赋值定义语句，才可以使用优雅写法
2、if内可以有多个方法调用，但必须方法内有true返回值（此用法意义不大）/<code>
问题：我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂.
2、多条件判断
- 小白写法
<code>
var Statistics = function(){
console.log('执行')
}
switch (currentTab)
{
case 0:
Statistics();
break;
case 1:
Statistics();
break;
case 2:
Statistics();
break;
case 3:
Statistics();
break;
/<code>
- 优雅写法
<code> //将判断条件作为对象的属性名，将处理逻辑作为对象的属性值
var Statistics = function(){
console.log('执行')
}
const comparativeTotles = new Map([
[0,Statistics],
[1,Statistics],
[2,Statistics],
[3,Statistics]
])
let map = function(val){
return comparativeTotles.get(val)
}
let getMap = map(1); //如果查找不到返回undefined
if(!getMap){
console.log('查找不到')
}else{
concaozuole.log('执行操作')
getMap()
}/<code>
- if else
<code>/**
* 按钮点击事件
* @param {number} status 活动状态：1开票中 2开票失败 3 开票成功 4 商品售罄 5 有库存未开团
* @param {string} identity 身份标识：guest客态 master主态
*/
const onButtonClick = (status, identity) => {
if (identity == 'guest') {
if (status == 1) {
//函数处理
} else if (status == 2) {
//函数处理
} else if (status == 3) {
//函数处理
} else if (status == 4) {
//函数处理
} else if (status == 5) {
//函数处理
} else {
//函数处理
}
} else if (identity == 'master') {
if (status == 1) {
//函数处理
} else if (status == 2) {
//函数处理
} else if (status == 3) {
//函数处理
} else if (status == 4) {
//函数处理
} else if (status == 5) {
//函数处理
} else {
//函数处理
}
}
}/<code>
- 改完后
<code>//利用数组循环的特性，符合条件的逻辑都会被执行，那就可以同时执行公共逻辑和单独逻辑。
const functionA = ()=>{/*do sth*/} // 单独业务逻辑
const functionB = ()=>{/*do sth*/} // 单独业务逻辑
const functionC = ()=>{/*send log*/} // 公共业务逻辑
const actions = new Map([
['guest_1', () => { functionA }],
['guest_2', () => { functionB }],
['guest_3', () => { functionC }],
['guest_4', () => { functionA }],
['default', () => { functionC }],
//...
])
/**
* 按钮点击事件
* @param {string} identity 身份标识：guest客态 master主态
* @param {number} status 活动状态：1开票中 2开票失败 3 开票成功 4 商品售罄 5 有库存未开团
*/
const onButtonClick = (identity, status) => {
let action = actions.get(`${identity}_${status}`) || actions.get('default')
action.call(this)
}/<code>
三、'骚'操作
1. 生成随机ID
<code> // 生成长度为10的随机字母数字字符串
Math.random().toString(36).substring(2);/<code>
2. 每秒更新当前时间
<code>setInterval(()=>document.body.innerHTML=new Date().toLocaleString().slice(10,18))/<code>
3. 生成随机 16 进制 颜色 码 如 # ffffff
<code>'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');/<code>
4. 返回键盘
<code>// 用字符串返回一个键盘图形
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x`)() /<code>
5. 优雅的取整
<code>var a = ~~2.33 ----> 2
var b = 2.33 | 0 ----> 2
var c = 2.33 >> 0 ----> 2/<code>
6.优雅的金钱格式化
<code>1、使用正则实现
var test1 = '1234567890'
var format = test1.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')
console.log(format) // 1,234,567,890
2、使用骚操作
function formatCash(str) {
return str.split('').reverse().reduce((prev, next, index) => {
return ((index % 3) ? next : (next + ',')) + prev
})
}
console.log(format) // 1,234,567,890/<code>
7. 五种方法实现值交换
<code>
1. var temp = a; a = b; b = temp; (传统，但需要借助临时变量)
2. a ^= b; b ^= a; a ^= b; (需要两个整数)
3. b = [a, a = b][0] (借助数组)
4. [a, b] = [b, a]; (ES6，解构赋值)
5. a = a + b; b = a - b; a = a - b; (小学奥赛题)/<code>
8. 实现深拷贝
<code>var b = JSON.parse(JSON.string(a))/<code>
9. 去掉小数部分
<code>//下面几种方式都行
parseInt(num)
~~num
num >> 0
num | 0/<code>
10. 递归求阶乘
<code>
function factorial(n) {
return (n > 1) ? n * f(n - 1) : n/<code>
11. 打印试试
<code>
console.log(([][[]] + [])[+!![]] + ([] + {})[!+[] + !![]])
console.log((!(~+[]) + {})[--[~+''][+[]] * [~+[]] + ~~!+[]] + ({} + [])[[~!+[]] * ~+[]])/<code>
12. console美化
<code>console.info("%c哈哈", "color: #3190e8; font-size: 30px; font-family: sans-serif");/<code>最后
- 如果你对这篇文章感兴趣，就点个赞和关注吧
原文链接：https://juejin.im/post/5e42826551882549063a7b7c
分享到:
閱讀更多 前端明澈 的文章
關鍵字: 为空 JavaScript 写法
