ホームページ ウェブフロントエンド jsチュートリアル Map と forEach: JavaScript 開発者のための主要な違いを理解する

Map と forEach: JavaScript 開発者のための主要な違いを理解する

Dec 31, 2024 am 10:29 AM

Map vs forEach: Understanding the Core Difference for JavaScript Developers

想像してみてください。あなたは、ユーザー データのリストを洗練されたダッシュボードに変換する任務を負った Web 開発者です。ご存知のとおり、JavaScript には配列を反復処理するツールがありますが、特に注目すべきメソッドは、map() と forEach() の 2 つです。どちらを使用するべきですか?交換可能ですか?これをストーリー形式で紐解いてみましょう。

2 つの方法の物語

昔々、JavaScript の国で、map() と forEach() という 2 つの兄弟が作成されました。両方とも、配列を横断するという使命を共有しました。しかし、それらは似ているにもかかわらず、性格と目的は大きく異なっていました。彼らの癖を理解するために、それぞれの兄弟を詳しく見てみましょう。


Meet forEach(): タスク完了者

forEach() は、仕事をやり遂げるが見返りを期待しない信頼できる友人のようなものです。 forEach() を呼び出すと、配列内の各項目を反復処理し、コールバック関数内で定義したアクションを実行します。

例を示します:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
  console.log(num * 2); // Outputs: 2, 4, 6, 8, 10
});
ログイン後にコピー
ログイン後にコピー

主な特徴:

  • forEach() は何も返しません (未定義)。
  • これは主に、コンソールへのログ記録や外部変数の変更などの副作用を実行するために使用されます。

map() を入力してください: トランスフォーマー

map() はクリエイティブな兄弟であり、常に変換について考え、新しいものを返します。 map() を使用すると、ただ反復されるだけではなく、コールバック関数の変換ロジックに基づいて新しい配列が生成されます。

次の例を見てください:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Outputs: [2, 4, 6, 8, 10]
ログイン後にコピー

主な特徴:

  • map() は常に元の配列と同じ長さの新しい配列を返します。
  • 元の配列を変更せずにデータを変換するのに最適です。

違いを単純化する

どちらのメソッドも配列を反復処理するように設計されていますが、目的は大きく異なります。

  • forEach() は、外部変数のログ記録や更新などの副作用を実行するために使用されます。何も返されません。
  • map() はデータの変換に使用されます。元の配列は変更せずに、変換された値を含む新しい配列を返します。

forEach() を使用する場合

ToDo アプリを構築しているとします。リストをデバッグするために、各タスクをコンソールに記録したいと考えています。ここでは、forEach() が頼りになります。

const todos = ['Buy groceries', 'Clean the house', 'Write code'];
todos.forEach(task => console.log(task));
ログイン後にコピー

このシナリオでは、変換された結果を必要とせずに副作用 (ロギング) を実行しています。


マップを使用する場合()

API からユーザー データを取得し、バックエンドがユーザー オブジェクトの配列を返すと想像してください。表示用にユーザー名の配列を作成する必要があります。ここでmap()が活躍します:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
  console.log(num * 2); // Outputs: 2, 4, 6, 8, 10
});
ログイン後にコピー
ログイン後にコピー

現実世界の例え

forEach() は、近所の人全員にチラシを配布するヘルパーと考えてください。彼らは結果に関係なく、タスクを完了することに集中しています。一方、map() は、各人向けにカスタマイズされたチラシを作成するデザイナーのようなもので、インタラクションごとに美しく作成された結果を返します。

注意事項

forEach() は簡単ですが、過度に使用すると、変換が含まれる場合にコードの保守が困難になる可能性があります。同様に、map() を誤って使用して副作用 (ロギングなど) を実行することは、変換を目的としているため推奨されません。


最終的な考え

map() と forEach() のどちらを選択するかは、目的によって異なります。変換に重点を置き、新しい配列が必要な場合は、map() が味方になります。ただし、データを変更または作成せずにアクションを実行することが目標の場合は、forEach() を使用してください。

各メソッドの長所を理解することで、よりクリーンで効率的なコードを作成でき、より自信を持った JavaScript 開発者になることができます。さて、次のプロジェクトではどの兄弟と最初に友達になるでしょうか?


読んでいただけましたか?この記事が洞察力に富んだ、または役に立ったと思われた場合は、コーヒーをおごって私の仕事を支援することを検討してください。あなたの貢献は、このようなコンテンツをさらに増やすのに役立ちます。ここをクリックしてバーチャルコーヒーをごちそうしてください。乾杯!

以上がMap と forEach: JavaScript 開発者のための主要な違いを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles