為什麼 JavaScript 不亂？

前端開發挫折：JavaScript 視角

人們普遍抱怨前端開發（尤其是 JavaScript）混亂不堪，這往往源自於其靈活性。 透過多種方法實現相同結果的能力雖然強大，但可能會導致程式碼品質不一致。

這並不完全不準確。 與通常受益於既定框架和約定的後端開發不同，前端最佳實踐更加分散。 最佳模式的資源分散，導致編碼風格多樣化，讓新手難以掌握最佳方法。

修正誤解

缺乏顯而易見的結構並不意味著缺乏最佳實踐。 有效的 JavaScript 開發取決於利用既定的模式和有效的方法。 Mozilla 開發者網路 (MDN) JavaScript 文件等豐富的資源提供了最佳實現的指導。 關鍵是專注學習和應用這些知識。

實用程式碼範例

考慮這個現實世界的生產程式碼片段（為了清晰起見，進行了簡化）：它可以正常工作，但其結構可以在可讀性和性能方面得到顯著改進。 此範例重點介紹基本的陣列和物件操作。

初始程式碼（不太理想）：

<code class="language-javascript">const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]

storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// result:
// [
//     {
//         "name": "Starbucks",
//         "code": 1,
//         "label": "Opened Starbucks"
//     },
//     {
//         "name": "Duck Duck Coffe",
//         "code": 2,
//         "label": "Opened Duck Duck Coffe"
//     }
// ]</code>

這種使用 .reduce 和 .forEach 的方法過於冗長。 JavaScript 提供了更有效率的工具。

改進的程式碼：

<code class="language-javascript">storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})</code>

此修訂版本使用 .flatMap 來展平數組，並使用 .map 新增「標籤」屬性，從而使程式碼更乾淨、更簡潔。

結論

JavaScript 提供了一套豐富的工具來編寫高品質的程式碼。關鍵是專注的學習和適當技術的應用，而不是簡單地為了功能而編寫程式碼。

推薦閱讀：

• [PT-BR] - https://www.php.cn/link/729404b28f3bd32761c667a668453f4c
• [ZH] - https://www.php.cn/link/f5c80b20fdee4e645ff315a56f12a716

以上是為什麼 JavaScript 不亂？的詳細內容。更多資訊請關注PHP中文網其他相關文章！