JavaScript 代码其实可以这样敲

在日常工作中，我经常为大家审核代码。长期以来，我发现有些功能函数其实在 JS 中稍加调整，或者换一种处理方式，代码就会显得更清晰、更简洁，甚至更高效。

【参考文献】

文章：JavaScript Code Can Actually Be Written Like This

作者：Xiuer Old

上述译文仅供参考，具体内容请查看上面链接，解释权归原作者所有。

【关于TalkX】

TalkX是一款基于GPT实现的IDE智能开发插件，专注于编程领域，是开发者在日常编码中提高编码效率及质量的辅助工具，TalkX常用的功能包括但不限于：解释代码、中英翻译、性能检查、安全检查、样式检查、优化并改进、提高可读性、清理代码、生成测试用例、有趣的图表生成以及语音助手托克斯等。

TalkX建立了全球加速网络，不需要考虑网络环境，响应速度快，界面效果和交互体验更流畅。并为用户提供了Open AI的密钥，不需要自备ApiKey，不需要自备账号，不需要魔法。

TalkX产品支持：JetBrains (包括 IntelliJ IDEA、PyCharm、WebStorm、Android Studio)、HBuilder、VS Code、Goland.

下面我列举了 5 种情况，让我们一起来看看吧

1. 建议考虑使用 FlatMap 方法

我们先来看一段同时使用 filter和 map方法来遍历数组的代码。相信大家一定都遇到过这种情况。为了说明问题，这里我以简单的数字内容为例。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const squaredOddNumbers = numbers
    .filter(num => num % 2 !== 0)
    .map(num => num * num)

console.log(squaredOddNumbers);
// print：[1, 9, 25, 49, 81]

这样编写上述代码并无不妥，方法的连接也是一种值得推荐的处理方式。不过，请多想一想。事实上，我们有更好的方法来处理这类问题。

现在让我们看看如何使用 FlatMap 来实现它

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const squaredOddNumbers = numbers.flatMap(num => 
    num % 2 !== 0 ? [num * num] : []
);

console.log(squaredOddNumbers);
// print：[1, 9, 25, 49, 81]

使用 FlatMap 的好处是

只需遍历一次，中间不会产生冗余数组。

2. 建议调整数组方法的调用顺序。

日常工作中使用较多的数组方法包括 filter()、find()、map()、reduce()。在必要的场景下，我们也建议将这些方法连接起来一起调用。但必须注意调用顺序，否则也会影响效率。例如

const numbers = [9, 3, 6, 4, 8, 1, 2, 5, 7];
numbers
  .sort((a, b) => a - b)
  .filter((n) => n % 2 !== 0)
  .map((n) => n ** 3);

仔细观察上面的代码，你会发现

如果我们先使用过滤器，然后再排序，执行效率会更高

numbers
  .filter((n) => n % 2 !== 0)
  .sort((a, b) => a - b)
  .map((n) => n ** 3);

3. 建议在此处使用还原法

您编写的代码必须让每个人都能理解，代码必须简洁。然而，有些方法就是为此而创建的。如果你不使用它们，那就太可惜了，比如 reduce 方法。例如，我们先从接口中提取一段数据，然后对数据内容进行分类，如下代码所示

fetch("https://jsonplaceholder.typicode.com/todos/")
  .then(res=>res.json())
  .then(todos=>{
    // using Map
    const todosForUserMap = {};
    todos.forEach(todo=>{
      if (todosForUserMap[todo.userId]){
        todosForUserMap[todo.userId].push(todo);  
      }else{
        todosForUserMap[todo.userId] = [todo];
      }  
    })
    console.log(todosForUserMap)
  })

我看到大多数前端开发人员都在使用 forEach方法或错误地使用 map。相比之下，这其实是使用 reduce方法的好地方。

它看起来更清晰，更容易理解

 fetch("https://jsonplaceholder.typicode.com/todos/")
  .then(res=>res.json())
  .then(todos=>{
  
    // using Map
    const todosForUserMap = todos.reduce((accumulator, todo)=>{
      if (accumulator[todo.userId]) accumulator[todo.userId].push(todo);
      if (!accumulator[todo.userId]) accumulator[todo.userId] = [todo];
      return accumulator;
    },{})

    console.log(todosForUserMap)
  })

4. It is recommended to use native JavaScript classes

上图清晰地拆解了 URL的各个部分。
关于 URL页面，我们可以组装也可以拆卸。让我们来谈谈 URL各部分的组装。您现在或过去一定遇到过 URL的拼接问题。代码可以这样写

function getUrl(param){
  const { category, limit, userId } = param;
  const baseURL = "https://fakestoreapi.com/products";
  const limtParams = limit ? `limit=${Number(limit)}` : '';
  const userIdParams = limit ? `userId=${Number(userId)}` : '';
  return `${baseURL}${category ? `/category/${category}?` : ""}${limtParams}&${userIdParams}`;    
}

虽然可以这样写，但代码看起来很乱，很可能被破坏，而且每次都需要添加一些规则，并在最后添加一些其他参数。例如，您可能会忘记添加符号 /或 &符号，这将导致错误。让我们看看本地类是如何实现的。您可以比较一下两者之间的区别。

function constructURL(param) {
  const { category, limit, userId } = param;
  const baseURL = "https://fakestoreapi.com/products";
  const url = new URL(baseURL);
  const params = new URLSearchParams();

  if (category) url.pathname += `/category/${category}`;
  if (limit) params.append('limit', Number(limit).toString());
  if (userId) params.append('userId', Number(userId).toString());
  url.search = params.toString();
  return url.toString();
}

从这个角度看，在处理 URL 程序集问题时，我们是否可以考虑使用本地类？

5. 建议使用发电机

说到生成器，你可能只听说过或知道如何使用，但却很少在实际项目中使用。事实上，它有很多使用场景。使用生成器可以节省大量代码，而且代码非常清晰。例如，在执行异步操作或按需循环或按需加载时。

Look at this code:

async function *fetchProducts(){
  while (true){
    const productUrl = "https://fakestoreapi.com/products?limit=2";
    const res = await fetch(productUrl)
    const data = await res.json()
    yield data;
  }
}

async function main() {
  const itr = fetchProducts();
  console.log( await itr.next() );
}

上述代码中的main可以根据用户交互或其他技术调用。因为我们不想在这里无限加载。

总结

好了，就说这几点吧。在日常工作中，我希望每个人都能写出高质量的代码。

⚠️：文章翻译上如有语法不准确或者内容纰漏，欢迎各位评论区指正。

【关于TalkX】

TalkX是一款基于GPT实现的IDE智能开发插件，专注于编程领域，是开发者在日常编码中提高编码效率及质量的辅助工具，TalkX常用的功能包括但不限于：解释代码、中英翻译、性能检查、安全检查、样式检查、优化并改进、提高可读性、清理代码、生成测试用例、有趣的图表生成以及语音助手托克斯等。

TalkX建立了全球加速网络，不需要考虑网络环境，响应速度快，界面效果和交互体验更流畅。并为用户提供了Open AI的密钥，不需要自备ApiKey，不需要自备账号，不需要魔法。

TalkX产品支持：JetBrains (包括 IntelliJ IDEA、PyCharm、WebStorm、Android Studio)、HBuilder、VS Code、Goland.