为什么 JavaScript 不混乱？

听到前端开发很混乱，尤其是 JavaScript“接受任何东西”并允许杂乱无章的代码的说法，让我深感恼火，因为多种方法都会导致相同的结果。

事实上，这种批评是有根据的。可以用不同的方式编写 JavaScript，实现相同的目标。

前端（JavaScript）和后端之间的主要区别在于设计模式的定义。 在后端，框架和约定被广泛采用。在前端，良好的实践和标准是分散的，从而产生分歧并使理解变得困难，尤其是对于初学者来说。 连我这个作者也有自己的看法。

---

症结所在

尽管明显缺乏结构，但这并不意味着模式不存在或者您不应该寻找它们。 JavaScript 拥有大量定义明确的资源和标准，可在各种网站和文档（例如 Mozilla Docs JS）上找到。 关键是花时间学习并正确应用这些概念。

---

实际例子

下面的代码取自生产项目，可以运行，但可以对其方法进行优化，以获得更好的可读性和性能。 让我们重构它，使用基本的 JavaScript 功能（数组和对象）来说明改进。

下面的对象表示从 API 接收的数据，需要一个新的“标签”字段（前缀“Opened”商店名称）：

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

使用 reduce、forEach 和 push 的第一个实现效率较低：

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

  return previous
}, [])

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

注意不必要的复杂性。 下面的解决方案使用 flatMap 和 map，更加简洁和高效：

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

flatMap“展平”数组，map为每个项目添加“标签”字段：

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

---

结论

JavaScript 为高质量代码提供了强大的工具。 秘诀就是研究和正确运用这些资源，避免草率和无计划的开发。

---

阅读建议：

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

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