如何让前端项目代码变得简洁优雅？

目录

• 前言
• 实战案例
  • 变量解构赋值和扩展运算符的运用
  • 巧用三元运算符替代简单的条件判断
  • 善用可选链运算符、空值合并运算符做空值判断
  • 数组的遍历
• 结语

前言

你好，我是喵喵侠。在日常开发中，难免会见到一些不太好的代码，看的人脑壳疼。我今天就遇到了好几处烂代码，发现有些代码是从别的项目拷贝过来的，有些则是一些人没有好的书写代码的习惯，亦或是不知道怎么样用简洁优雅的方式来书写代码。

接下来，我会结合我的实际开发经验，来为你讲述如何避免写过于冗长的代码，以及什么样的代码实现方式才是更好的。

实战案例

废话不多说，直接上案例！

变量解构赋值和扩展运算符的运用

变量的取值和赋值，这个操作想必我们每天都在做。

假设有这么一个需求，页面上有一个列表，每一行最后一列有一个查看按钮，点击查看会出现一个弹窗，弹窗需要显示列表里面的数据。

这样的需求很普遍，列表往往只能展示最基础的简略数据，而弹窗可以显示更多更详细的数据，比方说备注、详情之类的。

现在每一行的后端返回的数据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

空值合并运算符（??） - 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都是很好用的数组方法，可以根据实际需要用起来。

结语

通过对代码进行优化，我们可以显著提升代码的可读性和维护性，同时也能提高代码执行效率。本文实际案例，展示了如何优化前端代码。希望这些技巧对你的前端开发工作有所帮助。如果你有更多的优化技巧或经验，欢迎与我分享交流。