一些 Javascript 的最佳实践，以实现更简洁、更优的代码质量...

JavaScript 是一种非常流行且应用广泛的编程语言。最初，它只是作为一种脚本语言开发，但现在它的功能远不止于此。它的社区正在不断发展壮大，JavaScript 也同样如此。

由于新功能频繁添加，编写优化且干净的代码非常困难，这种情况大多发生在初学者身上。

今天我将向您展示一些您可以遵循的最佳实践，以编写优化和干净的代码。

事不宜迟，让我们开始吧

链式数组方法是的，你读得对，我们最常用的是数组原型方法，例如map，，，，filterfindreduce

基本场景将通过过滤列表进行映射，而不是将过滤结果存储在变量中然后进行映射，我们可以直接链接方法。

const userList = [
  {
    name: 'Jhon Doe',
    age: 26,
    occupation: 'Software Engineer',
  },
  {
    name: 'Kapil',
    age: 19,
    occupation: 'Student',
  },
  {
    name: 'Matt',
    age: 32,
    occupation: 'Software Architect',
  },
];


const mappedUsers = userList.filter(user => user.age > 26)
                    .map(user => ({ isVerified: true, ...user}))
                    .reduce(...)

2.
逻辑赋值
当任何给定变量为空或未定义时，我们可能需要赋值，正常的使用方式if如下：

let userProfile;
let value = {
   name: 'someValue',
};
if(userProfile === null || userProfile === undefined) {
   userProfile = value
}

 //   OR
if(!userProfile) {
   userProfile = value
}

我们可以简单地使用逻辑或空值碰撞运算符进行分配，如下所示：

userProfile ??= value;

// OR

userProfile &&= value

3.
并行 API 调用
在构建任何应用程序时，主要是在前端，有时我们可能需要同时调用多个 API，如果 API 彼此不依赖，我们可以使用PromiseJavascript发送并行请求

const getData = async () => {
  try {
    const first = await fetch();
    const second = await fetch();
    const third = await fetch();
    const fourth = await fetch();
  } catch (err) {
    // ...
  }
}

我们可以发送并行调用，

const getData = async () => {
  try {
    const [ first, second, thrird, fourth] = await Promise.all([
      fetch(),
      fetch(),
      fetch(),
      fetch(),
    ])
  } catch (err) {
    // ...
  }
}

我们也可以Promise.allSettled()使用Promise.all()

4.
使用对象而不是 Switch 进行事件绑定
在我们开发的大多数应用程序中，都有一些需要处理事件的场景，我们大多使用 switch 语句或 if...else 来实现。

const handleEvent = (event) => {
  switch(event) {
    case 'success': {
      // handleSuccess
    }
    case 'error': {
      // handle error
    }
    case 'pending': {
      // handle pending 
    }
    default:  {
      // handle default
    }
  }
}

key我们不这样做，而是可以简单地创建具有事件和函数的对象，value如下所示：

const eventHandler = {
  success: handleSuccess,
  error: handleError,
  pending: handlePending
}

const handleEvent = (event) => {
  const handler = eventHandler[event] ?? handleDefault;
  handler();
}

这里我们需要使用括号符号来从对象中调用适当的函数。

5.
在函数中做一件事
因此，函数的基本行为是执行特定的任务，我们在其中写入的任何内容都将被执行。

用一个函数执行所有功能会使代码难以阅读、冗长且难以调试。
将单个功能拆分成一个函数，并在一个函数之后或在另一个函数内部调用其余功能，将有助于更好地理解代码，并使代码易于调试。

最好的情况是user registeration

const signupUser = () => {

  // checking for existing user

  // password encryption

  // creting new user
}

所以在一个函数中完成所有这些事情会让它变得更加笨拙，我们可以做的是

const signupUser = () => {

  const isUserAlreayExist = checkExistingUser(/* username */);

  // handle if user already Exist 

  const hashedPAssword = encryptPAssword(salt, password);

  createUserAndReturn(/* user data */)
}

6.
使用console.trace()
来检查一些结果或有时调试一些小东西，我们使用console.log()对吗？

它只是向我们传达我们所写的信息。

但有时在较大的应用程序中，我们可以有日志语句，并跟踪日志语句，哪个日志代表哪个部分可能会有点困难，所以为了防止这种情况，我们可以使用console.trace()

trace() 方法显示一条跟踪信息，表明代码是如何在某个点结束的。

它返回一些额外的信息，除了我们写的消息之外，这些信息还包括这个语句从哪里记录，从哪个函数记录以及行号。

7.
在 vscode 中使用 Logpoint

在调试应用程序时，我们添加断点以在某个点停止程序的执行，但有时我们只是想看看特定的代码是否执行了，为此我们可以添加Logpoint

结果将显示控制台中的输出，因为它是在通过该点时记录的，这样我们甚至不必担心生产中的控制台语句。

right clicking我们可以通过行号添加日志点vscode

一些荣誉提名

使用async / awaitpromise回调链代替
对于更大的应用程序，请使用 Typescript。
在代码中必要时使用注释。
使用destructing而不是链接object或indexe在数组中使用
少用第三方库（只在必要时使用）。
读...

结论

这些是我遵循的一些最佳实践，旨在使我的代码简洁、清晰、可读且易于调试。保持代码整洁的关键在于持续的学习，因为 JavaScript 语言本身就是一个不断发展的语言。
希望这些实践能对你的编程之旅有所帮助。

编码愉快！

文章来源：https://dev.to/_vinay_dagar/some-best-practices-of-javascript-for-clean-and-better-code-quality-2cd3