如何更简洁的编写代码

前言

初学者学习代码风格主要是通过模仿，所以我们需要看书，看视频来学习其他人的代码？一旦度过初级阶段，你就会开始追求自己的代码风格，追求高效简洁的代码风格！

不过请记住：纯粹地追求高效简洁会降低代码的可读性，编写出可读性强的代码更重要。

1. 避免不必要的嵌套

if在日常的编码中是经常出现的！我们也会使用各种各样的嵌套代码。嵌套本身是没什么问题的，但是嵌套有些时候会让我们的代码难阅读！针对这种情况，我们可以使用提前return来优化代码。我们使用if语句来提前检查并进行return！

假设我们有一个函数，其中 if 语句包装了整个函数：

function deleteItem(item) {
  if (item != null) {
    console.log("Deleting item");
    item.delete();
  }
}

虽然这基本上没有什么问题，但我们可以通过使用保护子句使其更清晰。因此，我们不检查项目是否不为空，而是对此求反，如果项目为空，则不返回任何内容：

function deleteItem(item) {
  if (item == null) return;

  console.log("Deleting item");
  item.delete();
}

两种实现的行为相同，但正如所见，第二种实现显然更干净。

现在让我们看一个嵌套 if 语句的示例：

function saveItem(item) {
  if (item != null) {
    console.log("Validating");

    if (item.isValid()) {
      console.log("Saving item");
      item.save();
    }
}

同样，这个实现并没有什么问题，但是我们可以改变我们使用 if 语句的方式来完全删除这个函数的嵌套：

function saveItem(item) {
  if (item == null) return;

  console.log("Validating");
  if (!item.isValid) return;

  console.log("Saving item");
  item.save();
}

2.对函数参数使用对象解构

假设我们有一个函数，它接受一个对象作为参数，并对该对象执行某种操作以返回一个新值。如果不使用对象解构，我们可能会得到这样的结果：

function getFullName(person) {
  const firstName = person.firstName;
  const lastName = person.lastName;
  return `${firstName} ${lastName}`;
}

这个函数中，我们创建了两个临时变量firstName和lastName

实现这一点的更好方法是使用对象解构。我们可以解构 person 对象在一行中获取名字和姓氏：

function getFullName(person) {
  const { firstName, lastName } = person;
  return `${firstname} ${lastName}`;
}

我们可以通过直接解构参数来更进一步简化代码。

// even better
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

3. 使用纯函数避免副作用

编写函数时，最好避免修改该函数之外的任何变量。

let items = 5;
function changeNumber(number) {
  items = number + 3;
  return items;
}
changeNumber(5);

在这里，每当我们调用这个函数时，它都会修改items，我们最好避免这样修改变量。我们要避免的另一件事是依赖函数中的外部变量。如果items变量突然不存在或改变了它的数据类型，显然会导致我们想要避免的问题。

因此，相反，使用纯函数，我们可以将函数重写为以下内容：

function addThree(number) {
  return number + 3;
}

这里我们去掉了外部变量的依赖，让函数返回一个新值。它的功能现在是完全独立的，因此它的行为现在是完全可预测的。

4. 保持功能简单

在编写函数时，将多个东西放在一个地方可能很诱人：

function signUpAndValidate() {

}

但这会很快导致意大利面条式代码和不需要的错误。最好让功能只对一件事负责。

function signUp() {
}
function validate() {
}

5. 始终使用有意义的变量名

编码时很容易变得懒惰并有时使用单字母变量名，但这只会让您头疼。这里有一些提示可以帮助您。

1. 函数执行动作，因此在命名时使用动词。

   // bad
   function passwordValidation() {
   }
   // good
   function validatePassword() {
   }
   
   

2. 使用is在使用布尔类型时：

   const isValidPassword = validatePassword("abcd");
   
   

3. 对数组使用复数：

   const animal = ["cat", "dog", "bird"];
   const animals = ["cat", "dog", "bird"];
   
   

4. 使用回调函数迭代时始终使用有意义的变量名：

   
   animals.forEach((a) => {
   console.log(a);
   });
   
   animals.forEach((animal) => {
   console.log(animal);
   });