JS代码的优雅转身（优化if、switch的冗余）

由于项目需求，要开发一个文档在线预览的功能，根据文档类型的不同进入相对应的函数中。于是乎，第一个跳入到脑海中的便是switch:

// 根据读取文件的类型不同，进入不同的函数中
switch (type) {
    case 'pdf':
        this.previewPDF(src);
        return null;
        break;
    case 'txt':
        this.previewTXT(src);
        return null;
        break;
    case 'log':
        this.previewTXT(src);
        return null;
        break;
    case 'jpg':
        this.previewIMG(src);
        return null;
        break;
   case 'png':
        this.previewIMG(src);
        return null;
        break;
   case 'gif':
        this.previewIMG(src);
        return null;
        break;
}

天呐，不要太难看啊，真心忍受不了，这时候想起来，好像可以用对象来“优雅”解决这一长串代码：

const fileType = {
    pdf: this.previewPDF(src),
    txt: this.previewTXT(src),
    log: this.previewTXT(src),
    jpg: this.previewIMG(src),
    png: this.previewIMG(src),
    gif: this.previewIMG(src),
};
fileType[type];

我的天！不要太简洁！看着这舒服的代码，舒舒服服的躺在座位上，翘着二郎腿，抿了一口从室友那儿偷来的枸杞茶，感叹着清风盈心，岁月静好。百无聊赖之际，跑了一遍程序看看效果吧~
结果后台蹦出来的红色差点没让我把茶给喷出来，顿时傻了眼。
没毛病啊，为啥会报错。研究了一会儿发现，对象在加载的时候，会将其中包含的方法都运行一次，pdf的插件由于没有接收到合法参数，故而报错。
这可把我愁坏了，一边是冗长的switch，一边是报错的对象。左右都不是想要的，无奈只能去网上找找js怎样写才优雅。看到好多文章都写到了利用数组以及includes函数，我也试着写了写：

 const isPdf = ['pdf'];
 if (isPdf.includes(flag)) {
    this.previewPDF(url);
    return null;
}

 const isTxt = ['txt', 'log'];
 if (isTxt.includes(flag)) {
    this.previewTXT(url);
    return null;
}
 const isImg = ['jpg', 'png', 'gif'];
 if (isImg.includes(flag)) {
    this.previewIMG(url);
    return null;
}

 this.$message({
    message: '该文件暂不支持在线预览',
    type: 'warning'
});
 return null;

嗯，马马虎虎还算凑合，虽不及第二种写法简介，但也能接受，就这样吧~我又哼着小歌儿，唱着小曲儿的在公司混着日子。
原以为代码的优化到这就结束了，直到某一天，我看到了&&和||的用法介绍，脑海中第一反应就是：“我的代码似乎又可以精简一下了！”。打开项目，对着代码一顿瞎操作：

const isTxt = ['txt', 'log'];
isTxt.includes(flag) && this.previewTXT(url);

const isImg = ['jpg', 'png', 'gif'];
isImg.includes(flag) && this.previewIMG(url);

const isPdf = ['pdf'];
isPdf.includes(flag) && this.previewPDF(url);

const others = [].concat(isTxt, isImg, isPdf);
others.includes(flag) || this.$message({
    message: '该文件暂不支持在线预览',
    type: 'warning'
});

终于舒服了~天空是那么蓝，迎面的风是那么柔……
Tips：

//判断flag是否与数组子元素相匹配
const isImg = ['jpg', 'png', 'gif'];
if (isImg.includes(type)) {
    alert('它是图片！')
}

//前方为真，则执行后面的函数
typeof success === 'function' && success(data);
//前方为假，则执行后面的函数
false || alert('false'); true || alert('true'); 
//输出：false; 

---

更新：2022.3.17
感谢@bingduYu 给的评论！
有错就要认，挨打要立正。我这就去改！

const fileType = {
    pdf: this.previewPDF,
    txt: this.previewTXT,
    log: this.previewTXT,
    jpg: this.previewIMG,
    png: this.previewIMG,
    gif: this.previewIMG,
};
fileType[type](src);

啊~还是这样写舒服呀……