我经常听到有人批评前端开发混乱不堪，尤其提到 JavaScript“兼容性太强”，可以随意编写，导致多种实现方式都能达到相同结果。
他们的说法并非完全错误。 确实，JavaScript 允许多种途径实现相同目标。
问题在于，前端开发，特别是 JavaScript，缺乏后端开发那样的成熟设计模式、广泛应用的框架和约定。前端的最佳实践和标准分散在网络各处，导致观点和意见分歧严重。这种缺乏统一性增加了开发和理解的难度，尤其对新手而言。
重点强调
在结束本文之前，我想强调一点：某些概念不明显并不意味着它们不存在，也不意味着你不应该主动学习，至少掌握代码中应用模式的基本知识。 以 JavaScript 为例，网络上充斥着大量关于该语言既定实现和标准的资源，可供开发者学习借鉴。只要认真学习，你就能理解每种资源的用途及其适用场景。例如：Mozilla 开发者网络 JavaScript 文档。
立即学习“Java免费学习笔记（深入）”；
代码示例分析
以下代码摘自一个实际运行的生产项目。虽然理论上“没有问题”，功能正常，但其方法并非最佳，可读性和性能都有提升空间。
我们将对部分代码进行微调，使其更符合 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 的工具和函数来添加“label”字段：
<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 提供了编写高质量代码所需的所有工具。
关键在于学习并正确应用这些概念，而不是仅仅为了完成编码而编码。
参考阅读：
