它總是讓我灰心......
聽到前端開發一團糟，尤其是JavaScript「接受任何東西」並且可以以任何方式編寫而不影響最終結果的說法，讓我很惱火。
事實上，這並不完全是錯的。 JavaScript 確實允許多種方法來實現相同目標。
問題在於缺乏後端定義的設計模式。 在前端，最佳實踐是分散的，導致意見多樣化且缺乏統一性。 這種分散性使得開發和理解變得困難，尤其是對於初學者來說。 即使寫這篇文章的人也有自己的觀點。
除了沮喪之外，我想強調的是，缺乏良好實踐的證據並不意味著它們不存在。 尋求知識並至少應用設計模式的基礎知識至關重要。 在 JavaScript 中，有許多具有既定實作和模式的資源。只需花時間閱讀並理解其目的和正確使用即可。 範例：Mozilla JavaScript 文件。
以下程式碼來自實際生產項目。雖然它可以正常工作，但它的實現可以在可讀性和性能方面得到改進。
我們將調整一些部分以符合 JavaScript 文件中的建議，使用更有效率的方法和函數。 我們將重點放在一個基本概念：數組和物件的操作。為了教育目的，程式碼被簡化。
讓我們從一個物件開始，代表從後端 API 接收的資料：
<code class="language-javascript">const storesList = [{
activeStories: [
{
name: 'Starbucks',
code: 1
},
{
name: 'Duck Duck Coffe',
code: 2
}
],
inactiveStories: [
{
name: 'Mac Coffe',
code: 3
}
]
}]</code>我們需要添加一個“標籤”字段，前綴為“Opened”，後面跟著商店名稱。
讓我們先來看一個「不太理想」的實現，它沒有使用最好的 JavaScript 工具：
<code class="language-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"
}
]</code>我們查看.reduce、.forEach和.push，只是為了重建一個清單。 .flatMap 和 .map 的使用不足是顯而易見的。 語法令人困惑且冗長。
讓我們來看看改進的實作：
<code class="language-javascript">storesList.flatMap((item) => {
return item.activeStories
}).map((item) => {
return {
...item,
label: `Opened ${item.name}`
}
})</code>更簡單吧？
.flatMap 將物件陣列「展平」到單一層級：
<code class="language-javascript">[
{
"name": "Starbucks",
"code": 1
},
{
"name": "Duck Duck Coffe",
"code": 2
}
]</code>然後，.map「重新映射」數組，新增「label」屬性：
<code class="language-javascript">[
{
"name": "Starbucks",
"code": 1,
"label": "Opened Starbucks"
},
{
"name": "Duck Duck Coffe",
"code": 2,
"label": "Opened Duck Duck Coffe"
}
]</code>JavaScript 提供了編寫高品質程式碼的工具。 重要的是學習它並正確應用概念，而不是為了程式設計而編程。
閱讀推薦：
以上是為什麼 JavaScript 不亂？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
