なぜ JavaScript は混乱しないのでしょうか?-jsチュートリアル-php.cn

なぜ JavaScript は混乱しないのでしょうか?

Linda Hamilton

リリース： 2025-01-21 04:31:08

オリジナル

242 人が閲覧しました

Why is JavaScript not a mess?

フロントエンド開発の不満: JavaScript の視点

フロントエンド開発、特に JavaScript が混沌とした混乱であるという一般的な不満は、その柔軟性に起因することがよくあります。複数のアプローチを通じて同じ結果を達成する機能は強力ですが、コードの品質が一貫性のないものになる可能性があります。

これは完全に不正確というわけではありません。確立されたフレームワークや慣例から恩恵を受けることが多いバックエンド開発とは異なり、フロントエンドのベストプラクティスはより拡散しています。最適なパターンに関するリソースが分散しているため、多様なコーディングスタイルが促進され、初心者が最適なアプローチを把握することが困難になっています。

誤解に対処する

すぐに明らかな構造がないからといって、ベストプラクティスがないことを意味するわけではありません。効果的な JavaScript 開発は、確立されたパターンと効率的な方法を活用するかどうかにかかっています。 Mozilla Developer Network (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 を使用して「label」プロパティを追加することで、コードがよりクリーンで簡潔になります。