为什么 JavaScript 不乱？

它总是让我灰心......

听说前端开发一团糟，尤其是JavaScript“接受任何东西”并且可以以任何方式编写而不影响最终结果的说法，让我很恼火。

事实上，这并不完全是错误的。JavaScript 确实允许多种方法来实现同一目标。

问题在于缺乏后端定义的设计模式。 在前端，最佳实践是分散的，导致意见多样化且缺乏统一性。 这种分散性使得开发和理解变得困难，尤其是对于初学者来说。 即使写这篇文章的人也有自己的观点。

---

重点...

除了沮丧之外，我想强调的是，缺乏良好实践的证据并不意味着它们不存在。 寻求知识并至少应用设计模式的基础知识至关重要。 在 JavaScript 中，有许多具有既定实现和模式的资源。只需花时间阅读并理解其目的和正确使用即可。 示例：Mozilla JavaScript 文档。

---

一个实际的例子......

以下代码来自实际生产项目。虽然它可以正常工作，但它的实现可以在可读性和性能方面得到改进。

我们将调整一些部分以符合 JavaScript 文档中的建议，使用更高效的方法和函数。 我们将重点关注一个基本概念：数组和对象的操作。为了教育目的，代码被简化。

让我们从一个对象开始，代表从后端 API 接收的数据：

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

我们需要添加一个“标签”字段，前缀为“Opened”，后跟商店名称。

让我们首先看一个“不太理想”的实现，它没有使用最好的 JavaScript 工具：

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"
    }
]

我们查看.reduce、.forEach和.push，只是为了重建一个列表。 .flatMap 和 .map 的使用不足是显而易见的。 语法令人困惑且冗长。

让我们看一下改进的实现：

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/729404b28f3bd32761c667a668453f4c
• [ZH] - https://www.php.cn/link/f5c80b20fdee4e645ff315a56f12a716

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