JS代码其实可以这样写

日常工作中，我确实经常去帮大家review代码，长期以来，我发现有些个功能函数，JS其实可以稍微调整一下，或者换个方式来处理，代码就会看起来更清晰，更简洁，甚至效率更高，主要是还更好理解。下面我列举有5个案例，我们一起来看一下

一、建议考虑使用FlatMap方法

先来看一段同时使用filter和map方法遍历数组的代码。我相信这种场景大家一定碰到过。为了说明问题，这里我用简单的数字内容来举个例子。

const squaredOddNumbers = numbers.filter(num => num % 2 !== 0).map(num => num * num)console.log(squaredOddNumbers);
// 输出：[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);
// 输出：[1, 9, 25, 49, 81]

使用FlatMap的好处是

只要遍历一遍，而且不产生中间多余数组

二、建议调整数组方法调用的顺序

日常工作中写的比较多的数组方法有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);

三、建议这里使用reduce方法

你写的代码一定要让大家看的懂，代码要简洁，然而，有些方法它就出于这个目的创造的，如果你又不用，那就太可惜了，比如reduce方法。举个例子，我们先从接口中拉出一段数据，然后对数据内容进行分类处理，像下面代码这样

fetch("https://jsonplaceholder.typicode.com/todos/").then(res=>res.json()).then(todos=>{// using Mapconst 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 Mapconst 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)})

四、建议使用原生JavaScript类

上面这张很清晰明了的拆解了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组装问题上是不是可以考虑使用原生类了？

五、建议使用生成器

提到生成器，大家可能只是听过，或者知道怎么使用，而实际项目中很少去用。实际上它有很多使用场景。使用生成器能够节省很多代码，代码也非常清晰。如，进行异步操作或者按需循环或者按需加载时。

看这段代码：

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函数，可以根据用户交互或者其它技巧来调用。因为这里不希望无限加载。