目录
前言
你好，我是喵喵侠。在日常开发中，难免会见到一些不太好的代码，看的人脑壳疼。我今天就遇到了好几处烂代码，发现有些代码是从别的项目拷贝过来的，有些则是一些人没有好的书写代码的习惯，亦或是不知道怎么样用简洁优雅的方式来书写代码。
接下来，我会结合我的实际开发经验，来为你讲述如何避免写过于冗长的代码，以及什么样的代码实现方式才是更好的。
实战案例
废话不多说，直接上案例！
变量解构赋值和扩展运算符的运用
变量的取值和赋值，这个操作想必我们每天都在做。
假设有这么一个需求，页面上有一个列表，每一行最后一列有一个查看按钮，点击查看会出现一个弹窗，弹窗需要显示列表里面的数据。
这样的需求很普遍，列表往往只能展示最基础的简略数据，而弹窗可以显示更多更详细的数据，比方说备注、详情之类的。
现在每一行的后端返回的数据rowData假设是这样的：
{id: 1, name: '喵喵侠'，age: 18, remark: '前端开发'}
那么页面上需要的字段，假设我们预先写好了只要姓名、年龄、职业，我们这时候需要用一个弹窗详情对象变量detailData，来把列表rowData里面的特定项，赋值给detailData。
很多人可能会这样写：
// bad detailData.name = rowData.name detailData.age = rowData.age detailData.job = rowData.remark
这里只有三项感觉也还好，可如果有10个呢？20个呢？是不是就得这么多行代码呢？
更好的做法是使用变量解构赋值，写法如下：
// good const { name, age, remark: job } = rowData detailData = {...detailData, name, age, job }
这样写只需要大概两行，就能完成赋值操作。解构赋值有个小技巧，那就是可以设置别名，原来的对象属性名跟你的目标名不一样不要紧，用remark: job冒号这样的形式就可以重命名啦。
巧用三元运算符替代简单的条件判断
我们经常会用到if else这样的判断，判断条件只有两个，且每个条件里面只有一行语句执行时，完全可以用三元运算符来替代if else，这样可以让代码更加简洁。下面我举一个例子你就明白了。
假设我们有一个需求，根据用户的权限设置按钮的可见性：
// bad let buttonVisibility if (user.isAdmin) { buttonVisibility = true } else { buttonVisibility = false }
用三元运算符优化一下，代码是这样的：
// good const buttonVisibility = user.isAdmin ? true : false
可以很明显的看出，通过使用三元运算符，代码变得更加简洁明了。原本要4行代码，现在一行就可以搞定了。
其实聪明的你可以看出来，这个代码还可以进一步优化成下面这样：
// perfect! const buttonVisibility = !!user.isAdmin
为什么不要三元呢，因为三元判断的条件本身就是一个布尔值，而这里需要的返回正好是布尔值，所以判断显得多此一举。如果user.isAdmin不是布尔值是字符串，用两个感叹号!!强制转换成布尔值就好了；如果本身就是布尔值，则不需要转换。
善用可选链运算符、空值合并运算符做空值判断
假设我们有一个需求，检查一个变量是否为空，如果为空则赋值默认值，这个需求也是非常常见。
在处理可能为空的变量时，按照传统的写法，可能会显得冗长且重复，就像下面这样
// bad let value; if (inputValue !== null && inputValue !== undefined) { value = inputValue; } else { value = defaultValue; }
我们通过使用ES6的空值合并运算符（??），我们可以简化代码：
// good const value = inputValue ?? defaultValue;
这种优化方式不仅简化了代码，还提高了可读性。
如果要判断一个对象的某个属性，是否是null或者undefined，可以结合可选链运算符（?.）、空值合并运算符（??）来做判断：
// bad const obj = { remark: '' } let remark if(obj && obj.remark){ remark = obj.remark }else{ remark = '这个人太懒啦，什么也没留下' }
// great const obj = { remark: '' } let remark remark = obj?.remark ?? '这个人太懒啦，什么也没留下'
简单说一下，可选链后面的属性，如果存在返回这个存在的值，如果不存在，则返回undefined。
而双问号表示前面的值如果是null或者undefined，就取后面的值；否则取前面的值。
可选链运算符、空值合并运算符这两个都非常好用，感兴趣的话，可以看看MDN官方文档：
空值合并运算符（??） - JavaScript | MDN
数组的遍历
在前端开发中，遍历数组和对象是常见操作。使用更简洁高效的遍历方法，可以提高代码的可读性和性能。
假设我们有一个需求，需要遍历一个数组并对每个元素进行操作，假设processItem是一个方法，需要把一个数组里面的每一项作为参数，传递给这个函数调用：
// bad for (let i = 0; i < items.length; i++) { processItem(items[i]); }
优化后，我们可以使用forEach方法：
// great items.forEach(item => processItem(item));
使用forEach方法后，代码变得更加简洁，同时避免了传统for循环中的索引管理问题。
这个相信很多前端都会，但是需要注意，forEach有可能会改变原数组。如果想要不改变原数组，获得新的数组，可以选中map方法。
另外filter、some、every、reduce都是很好用的数组方法，可以根据实际需要用起来。
结语
通过对代码进行优化，我们可以显著提升代码的可读性和维护性，同时也能提高代码执行效率。本文实际案例，展示了如何优化前端代码。希望这些技巧对你的前端开发工作有所帮助。如果你有更多的优化技巧或经验，欢迎与我分享交流。
