为什么 JavaScript 不乱？

前端开发挫折：JavaScript 视角

人们普遍抱怨前端开发（尤其是 JavaScript）混乱不堪，这往往源于其灵活性。 通过多种方法实现相同结果的能力虽然强大，但可能会导致代码质量不一致。

这并不完全不准确。 与通常受益于既定框架和约定的后端开发不同，前端最佳实践更加分散。 最佳模式的资源分散，导致编码风格多样化，让新手难以掌握最佳方法。

纠正误解

缺乏显而易见的结构并不意味着缺乏最佳实践。 有效的 JavaScript 开发取决于利用既定的模式和有效的方法。 Mozilla 开发者网络 (MDN) JavaScript 文档等丰富的资源提供了最佳实现的指导。 关键是专注学习和应用这些知识。

实用代码示例

考虑这个现实世界的生产代码片段（为了清晰起见，进行了简化）：它可以正常工作，但其结构可以在可读性和性能方面得到显着改进。 该示例重点介绍基本的数组和对象操作。

初始代码（不太理想）：

const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]

storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// result:
// [
//     {
//         "name": "Starbucks",
//         "code": 1,
//         "label": "Opened Starbucks"
//     },
//     {
//         "name": "Duck Duck Coffe",
//         "code": 2,
//         "label": "Opened Duck Duck Coffe"
//     }
// ]

这种使用 .reduce 和 .forEach 的方法过于冗长。 JavaScript 提供了更高效的工具。

改进的代码：

storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})

此修订版本使用 .flatMap 来展平数组，并使用 .map 添加“标签”属性，从而使代码更干净、更简洁。

结论

JavaScript 提供了一套丰富的工具来编写高质量的代码。关键是专注的学习和适当技术的应用，而不是简单地为了功能而编写代码。

推荐阅读：

• [PT-BR] - https://www.php.cn/link/729404b28f3bd32761c667a668453f4c
• [ZH] - https://www.php.cn/link/f5c80b20fdee4e645ff315a56f12a716

以上是为什么 JavaScript 不乱？的详细内容。更多信息请关注PHP中文网其他相关文章！