前端开发的沮丧之处
听到有人说前端开发一团糟，我总是感到很沮丧，特别是当他们说 JavaScript“什么都接受”、可以随意编写时，因为我们可以用多种方式达到相同的结果。
事实上，他们并非全错。 确实，JavaScript 可以用多种方式编写，但最终目标相同。
主要问题在于，前端开发和 JavaScript 缺乏后端开发那样的明确设计模式和广泛采用的框架及约定。前端的最佳实践和模式分散在网络上，导致观点和意见不一。这种缺乏统一性增加了开发和理解的难度，尤其对初学者而言。
立即学习“Java免费学习笔记（深入）”；
关键在于学习
为了结束这段牢骚，我想强调一点：仅仅因为某些东西不明显并不意味着它不存在，或者你不应该努力学习至少在代码中应用基本模式。以 JavaScript 为例，许多网站提供了该语言的既定实现和模式，可供开发时参考。你只需要花时间学习，就能理解每种资源的用途和使用时机。例如：Mozilla 的 JavaScript 文档。
代码示例：改进的数组和对象处理
以下代码来自一个真实的生产项目。虽然理论上“没有问题”，运行正常，但实际上，方法可以改进，从而提高可读性和性能。
我们将对代码进行一些调整，使其更符合 JavaScript 文档的建议。这是可行的，因为该语言提供了特定方法/函数来更有效地处理某些情况。
我们将讨论一个基本的 JavaScript 概念：使用数组和对象。代码尽可能简洁，避免不必要的复杂性。
我们从一个模拟的后端 API 返回的对象开始：
<code class="javascript">const storeslist = [{
activestories: [
{
name: 'starbucks',
code: 1
},
{
name: 'duck duck coffe',
code: 2
}
],
inactivestories: [
{
name: 'mac coffe',
code: 3
}
]
}]</code>
我们需要添加一个名为“label”的新字段，其值为“opened”加上商店名称。
先来看一个我认为“不太理想”的实现，因为它没有充分利用 JavaScript 的最佳工具和函数：
<code class="javascript">storeslist.reduce((previous, current) => {
current.activestories.forEach(store => {
previous.push({
...store,
label: `opened ${store.name}`
})
})
return previous
}, [])
// 结果：
[
{
"name": "starbucks",
"code": 1,
"label": "opened starbucks"
},
{
"name": "duck duck coffe",
"code": 2,
"label": "opened duck duck coffe"
}
]</code>
这里使用了 .reduce、.forEach 和 .push，只是为了返回一个新的数组。 .flatMap 和 .map 等函数没有被使用，而这些函数是 JavaScript 中非常重要的资源。代码冗长且难以理解。
改进后的代码：
<code class="javascript">storeslist.flatMap((item) => {
return item.activestories
}).map((item) => {
return {
...item,
label: `opened ${item.name}`
}
})</code>
是不是更简洁？
.flatMap 将数组“扁平化”为单层：
<code class="javascript">[
{
"name": "starbucks",
"code": 1
},
{
"name": "duck duck coffe",
"code": 2
}
]</code>
.map 遍历每个项目，添加“label”属性：
<code class="javascript">[
{
"name": "Starbucks",
"code": 1,
"label": "Opened Starbucks"
},
{
"name": "Duck Duck Coffe",
"code": 2,
"label": "Opened Duck Duck Coffe"
}
]</code>
结论
JavaScript 提供了编写高质量代码所需的一切工具。
关键在于学习并正确应用这些概念，而不是为了编码而编码。
