分享 10 个前端开发者需要知道的 JS 技巧

英文 | https://javascript.plainenglish.io/as-a-front-end-engineer-10-javascript-tricks-and-tips-you-should-know-about-6f4df0082407

前言

过去，我写了很多垃圾代码，现在看起来很糟糕。

当我再次看到那些代码片段时，我什至怀疑自己是否适合做程序员。

所以，这里有 10 个我总结的JavaScript 技巧，可以帮助你避免编写我曾经做过的那种垃圾代码。

1. Promise 回调地狱

Promise 提供了一种优雅的方式来处理 JavaScript 中的异步操作。这也是避免“回调地狱”的解决方案之一。但是我并没有真正理解它的含义，所以我写了这个代码片段。

我做了这些事情：

• 首先获取用户的基本信息。
• 按用户信息获取所有文章的简要摘要。
• 通过文章简要获取文章详细信息。

代码语言：javascript复制

// ❌
getUserInfo()
  .then((userInfo) => {
    getArticles(userInfo)
      .then((articles) => {
        Promise.all(articles.map((article) => getArticleDetail(article)))
          .then((articleDetails) => {
            console.log(articleDetails)
          })
      })
  })

我根本没有在这里利用 Promise，我们应该像下面的代码片段一样处理它：

代码语言：javascript复制

// ✅
getUserInfo()
  .then((getArticles)
  .then((articles) => {
    return Promise.all(articles.map((article) => getArticleDetail(article)))
  })
  .then((articleDetails) => {
    console.log(articleDetails)
  })

2.不处理错误信息

我经常只写成功请求的代码逻辑，而忽略请求失败。

代码语言：javascript复制

// ❌
const getUserInfo = async () => {
  try {
    const userInfo = await fetch('/api/getUserInfo')
  } catch (err) {

  }
}

这是没有经验的，我们应该给出一个用户友好的提示，而不是什么都不做。

代码语言：javascript复制

// ✅
const getUserInfo = async () => {
  try {
    const userInfo = await fetch('/api/getUserInfo')
  } catch (err) {
    Toast(err.message)
  }
}

3. 给一个函数设置太多参数

当一个函数的参数太多时，它的可读性就会降低，甚至，让我们想知道如何正确传递参数。

例子

我们想要获取用户的一些基本信息，比如姓名、性别、年龄等。

代码语言：javascript复制

// ❌
const getUserInfo = (name, age, weight, gender, mobile , nationality, hobby, address) => {
  // ...
}
getUserInfo('fatfish', 100, 2000, ...)

那太糟了，如果你的同事这样写代码，你会揍他吗？

事实上，当函数参数过多时，应该使用对象来传递需要的信息，这样它的可读性和可扩展性都会得到提高。

代码语言：javascript复制

// ✅
const getUserInfo = (options) => {
  const { name, gender, age, mobile, weight, nationality, hobby, address } = options
  // ...
}
getUserInfo({
  name: 'fatfish',
  age: 100,
  weight: 2000
  // ...
})

4.Magic number

朋友们，你们写过这样的代码吗？在很多地方使用数字进行逻辑判断似乎很正常。是的，它让我感到困惑 1、2、3 到底是什么意思。

代码语言：javascript复制

❌
// component1.js
if (status === 1 || status === 2) {
  // ...
} else if (status === 3) {
  // ...
}
// component2.js
if (status === 1 || status === 2) {
  // ...
}

我们最好将这些数字定义为常数。

代码语言：javascript复制

// ✅
// constants.js
export const STATUS = {
  // It is an adult and has real-name authentication
  adultRealName: 1,
  // It is a minor and has real-name authentication
  minorRealName: 2,
  // Not real-name authentication
  notRealName: 3,
  // ...
}
// component1.js
import { STATUS } from './constants.js'
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
} else if (status === STATUS.notRealName) {
  // ...
}
// component2.js
import { STATUS } from './constants.js'
// component2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
}

5.使用.length判断字符串的长度

大多数情况下，我们使用 .length 来判断字符串的长度是安全的，但在表单输入的情况下要小心。

当我们输入