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