為什麼 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中文網其他相關文章！