为什么 JavaScript 不乱？-js教程-PHP中文网

为什么 JavaScript 不乱？

Linda Hamilton

发布： 2025-01-21 04:31:08

原创

242 人浏览过

Why is JavaScript not a mess?

前端开发挫折：JavaScript 视角

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

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

纠正误解

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

实用代码示例

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

初始代码（不太理想）：

<code class="language-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"
//     }
// ]</code>

登录后复制

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

改进的代码：

<code class="language-javascript">storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})</code>

登录后复制

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