聽到前端開發很混亂，尤其是 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 為高品質程式碼提供了強大的工具。 秘訣就是研究和正確運用這些資源，避免草率和無計畫的開發。
閱讀建議：
以上是為什麼 JavaScript 不混亂？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
