我经常听到有人批评前端开发混乱不堪，尤其提到 JavaScript“兼容性太强”，可以随意编写，导致多种实现方式都能达到相同结果。
他们的说法并非完全错误。 确实，JavaScript 允许多种途径实现相同目标。
问题在于，前端开发，特别是 JavaScript，缺乏后端开发那样的成熟设计模式、广泛应用的框架和约定。前端的最佳实践和标准分散在网络各处，导致观点和意见分歧严重。这种缺乏统一性增加了开发和理解的难度，尤其对新手而言。
重点强调
在结束本文之前，我想强调一点：某些概念不明显并不意味着它们不存在，也不意味着你不应该主动学习，至少掌握代码中应用模式的基本知识。 以 JavaScript 为例，网络上充斥着大量关于该语言既定实现和标准的资源，可供开发者学习借鉴。只要认真学习，你就能理解每种资源的用途及其适用场景。例如：Mozilla 开发者网络 JavaScript 文档。
立即学习“Java免费学习笔记（深入）”；
代码示例分析
以下代码摘自一个实际运行的生产项目。虽然理论上“没有问题”，功能正常，但其方法并非最佳，可读性和性能都有提升空间。
我们将对部分代码进行微调，使其更符合 JavaScript 官方文档的建议。因为该语言提供特定方法/函数，能更有效地处理某些情况。
本例将演示 JavaScript 中一个非常基础的概念：数组和对象的使用。代码保持简洁，避免不必要的复杂性。
首先，定义一个对象，该对象理论上会从后端 API 接收数据：
const storeslist = [{ activestories: [ { name: 'starbucks', code: 1 }, { name: 'duck duck coffe', code: 2 } ], inactivestories: [ { name: 'mac coffe', code: 3 } ]}]
登录后复制
现在，我们需要（仅为示例）向该对象添加一个名为“label”的新字段，其值为“opened”加上商店名称。
先来看一个我认为“不太理想”的实现，因为它没有充分利用 JavaScript 的工具和函数来添加“label”字段：
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" }]
登录后复制
这段代码使用 .reduce、.forEach 和 .push 来创建一个新的数组。 最令人担忧的是它没有使用 .flatMap 和 .map 等函数，这些函数是 JavaScript 中非常重要且基础的功能。 代码语法冗余且难以理解。
改进后的代码如下：
storeslist.flatMap((item) => { return item.activestories}).map((item) => { return { ...item, label: `opened ${item.name}` }})
登录后复制
怎么样？是不是更简洁？
.flatMap 将我们的嵌套数组“扁平化”成单层数组：
[ { "name": "starbucks", "code": 1 }, { "name": "duck duck coffe", "code": 2 }]
登录后复制
然后，.map 遍历数组，为每个对象添加“label”属性：
[ { "name": "Starbucks", "code": 1, "label": "Opened Starbucks" }, { "name": "Duck Duck Coffe", "code": 2, "label": "Opened Duck Duck Coffe" }]
登录后复制
结论
JavaScript 提供了编写高质量代码所需的所有工具。
关键在于学习并正确应用这些概念，而不是仅仅为了完成编码而编码。
参考阅读：
[pt-br] – https://www.php.cn/link/c0daa585594b41bea3aeaf7af2a12e29[en] – https://www.php.cn/link/c0daa585594b41bea3aeaf7af2a12e29
以上就是为什么 JavaScript 不混乱？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2642274.html
