好的代码，往往不是又臭又长，而是小而精悍。用更少的代码，实现相同的功能。不管是自己还是同事日后阅读，都不会感到困惑。
在这里，记录前端开发中，优化代码的几种方式。
噩梦地狱嵌套
大概大家都看过怎么一张图
在遇到这个写法的时候, 首先要想一想这样到底有没有用，有没有办法优化。像图中的根本就没有必要去嵌套。
再来看个例子。
ts
代码语言：javascript复制1const payload: <Record, unknown> | undefined = {
2 page: '1',
3 size: 10
4} // payload from server via request
5if (payload) {
6 if (typeof payload.page === 'number' && typeof payload.size === 'number') {
7 // do anything..
8 }
9}
10// do anything..COPY
这是很简单的数据验证，一般用于后端防止 noSQL 注入。
简单的写法如下
ts
代码语言：javascript复制1if (!payload) {
2 // do anything..
3 // throw a bad request error
4}
5if (typeof payload.page !== 'number' || typeof payload.size !== 'number') {
6 // do anything..
7 // throw a 422 error
8}
9// do anythingCOPY
这样就有效避免了嵌套。
糟糕的 if 判断
不知道这种写法，你们见的多不多。
ts
代码语言：javascript复制1if (a === 1 || b === 1 || c === 1) {
2 // do anything...
3}COPY
可以转换成
ts
代码语言：javascript复制1if ([a, b, c].includes(1)) {
2}COPY
表格选择法
你还是使用大量 if， 或者 switch，作为分支选择值吗，那就显得很没水平了，快来试试表格选择。
ts
代码语言：javascript复制1// switch
2let week;
3
4switch (week) {
5 case 0:
6 week = '周日';
7 break;
8 case 1:
9 week = '周一';
10 // ...
11 default:
12 break;
13}
14
15// convert to
16let week = 0
17week = ['日', '一', '二', '三', '四', '五', '六'][week]COPY
更复杂一点? 当然可以，而且更加简洁。这里以判断文件类型为例。
ts
代码语言：javascript复制1 const checkTypes = (ext: string) => {
2 const i18n = {
3 VIDEO: '视频',
4 TXT: '文本',
5 MUSIC: '音乐',
6 DOC: '文档',
7 EXL: '表格',
8 PPT: '幻灯片',
9 PDF: '图书',
10 CODE: '代码',
11 IMG: '图片',
12 FILE: '文件',
13 };
14 return i18n[
15 Object.entries(FileTypes).find(([key, val]) => {
16 if (val.includes(ext)) {
17 return key;
18 }
19 return false;
20 })?.[0] || 'FILE'
21 ];
22};
23
24const FileTypes = Object.freeze({
25 VIDEO: ['.mp4', '.avi', '.mov', '.mpg'],
26 TXT: ['.txt'],
27 MUSIC: ['.mp3'],
28 DOC: ['.doc', '.docx'],
29 EXL: ['.xls'],
30 PPT: ['.ppt', '.pptx'],
31 PDF: ['.pdf'],
32 CODE: [
33 '.js',
34 '.c',
35 '.cpp',
36 '.py',
37 '.html',
38 '.css',
39 '.scss',
40 '.xml',
41 '.swift',
42 '.ts',
43 '.java',
44 '.go',
45 '.asp',
46 '.aspx',
47 '.class',
48 '.clw',
49 '.cs',
50 '.dsp',
51 '.dsw',
52 '.frm',
53 '.frx',
54 '.h',
55 '.hpp',
56 '.jar',
57 '.lib',
58 '.ocx',
59 '.pyc',
60 '.vbp',
61 '.vbs',
62 '.xsl',
63 ],
64 IMG: ['.png', '.jpg', '.jpeg', '.gif', '.svg'],
65});
66
67export default FileTypes;COPY
以上是我临时想到的，之后继续补充。
