前端开发的沮丧之处
听到有人说前端开发一团糟，我总是感到很沮丧，特别是当他们说 JavaScript“什么都接受”、可以随意编写时，因为我们可以用多种方式达到相同的结果。
事实上，他们并非全错。 确实，JavaScript 可以用多种方式编写，但最终目标相同。
主要问题在于，前端开发和 JavaScript 缺乏后端开发那样的明确设计模式和广泛采用的框架及约定。前端的最佳实践和模式分散在网络上，导致观点和意见不一。这种缺乏统一性增加了开发和理解的难度，尤其对初学者而言。
立即学习“Java免费学习笔记（深入）”；
关键在于学习
为了结束这段牢骚，我想强调一点：仅仅因为某些东西不明显并不意味着它不存在，或者你不应该努力学习至少在代码中应用基本模式。以 JavaScript 为例，许多网站提供了该语言的既定实现和模式，可供开发时参考。你只需要花时间学习，就能理解每种资源的用途和使用时机。例如：Mozilla 的 JavaScript 文档。
代码示例：改进的数组和对象处理
以下代码来自一个真实的生产项目。虽然理论上“没有问题”，运行正常，但实际上，方法可以改进，从而提高可读性和性能。
我们将对代码进行一些调整，使其更符合 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 的最佳工具和函数：
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/2642280.html
