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

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

Patricia Arquette

リリース： 2025-01-21 04:28:13

オリジナル

505 人が閲覧しました

Por qué JavaScript no es un desorden?

それはいつも私を落胆させます...

フロントエンド開発がめちゃくちゃだという話を聞くと、特に JavaScript は「何でも受け入れられ」、最終結果に影響を与えることなくどのような方法でも記述できるという意見を聞くと腹が立ちます。

実際、これは完全に誤りではありません。 JavaScript では同じ目標を達成するために複数のアプローチが可能であることは事実です。

問題は、バックエンドと同様に明確に定義されたデザインパターンが欠如していることにあります。フロントエンドでは、ベストプラクティスが分散しており、意見の多様性と統一性の欠如が生じています。この分散により、特に初心者にとって開発と理解が困難になります。 ~~これを書いた人にも自分の意見があります。~~

重要なポイント…

不満を超えて、良い実践の証拠がないからといって、それが存在しないという意味ではないことを強調したいと思います。知識を求め、少なくともデザインパターンの基本を適用することが重要です。 JavaScript には、確立された実装とパターンを持つリソースが多数あります。その目的と適切な使用方法を読んで理解するには時間がかかります。例: JavaScript 用の Mozilla ドキュメント

実際的な例…

次のコードは、運用中の実際のプロジェクトからのものです。正しく動作しますが、実装すると読みやすさとパフォーマンスが向上する可能性があります。

より効率的なメソッドと関数を使用して、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>

ログイン後にコピー