現実世界のシナリオを通じて説明される JavaScript 配列メソッド

JavaScript の配列メソッドのドキュメントを見て、それらが実際にどのように機能するのか疑問に思ったことはありますか?

コーディングを始めたとき、これらのメソッドを理解するために文字通り壁に頭をぶつけたのを覚えています。信じてください。配列メソッドは技術面接を突破するためだけに存在するのではなく、現実世界の開発において日々パフォーマンスを発揮する友人です。

今日は、実際のプロジェクトでこれらの配列メソッドをいつどのように使用するかを説明します。

読み終わる頃には、配列メソッドによってコードが明確になり、読みやすくなっていることがわかります…そして、言うまでもなく、コードを健全で保守しやすく保つのにも役立ちます。

基本的なことから始めましょう

map() と filter()

まず、毎日使用する可能性が高いいくつかの配列メソッド、map() と filter() から始めましょう。

map() を使用した製品価格計算ツールの構築

あなたは電子商取引サイトを構築しており、20% 割引する必要がある商品のリストがあるとします。

商品データは次のようになります:

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

面倒な for ループを記述する代わりに、map() を使用すると、これが非常にきれいになります。

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

各価格は現在割引されており、元の製品情報はすべて保持されています。クリーンでシンプル。

filter() を使用したスマート検索機能の作成

それでは、もっとクールなもの、つまり実際に複数のフィールドにわたって機能するスマート検索を構築してみましょう。

次のユーザー データがあると仮定しましょう:

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

これは、filter() を使用して簡単に検索する方法です:

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

そうです、名前、メールアドレス、役割から検索できます。 searchUsers("dev") を試してみると、開発者のみがフィルタリングされます。

それが素晴らしいと思われた場合は、次のセクションでreduce()を説明するまで待ってください。

reduce() - 単なる合計ではありません

ほとんどの開発者は主に、reduce() を数値を追加するためだけに使用します。しかし実際は、それ以上のことができるということです。信じてください。

ショッピングカートの合計を計算しています

実際のシナリオは、割引と税金を考慮して、ショッピング カート内の製品の合計コストを計算することです。これを見てください:

const cartItems = [
    { name: "Nike Air Max", price: 129.99, quantity: 2, discount: 20 },
    { name: "Adidas Hoodie", price: 89.99, quantity: 1, discount: 0 },
    { name: "Running Socks", price: 12.99, quantity: 3, discount: 10 }
];


const cartTotal = cartItems.reduce((total, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = (itemTotal * item.discount) / 100;
    return total + (itemTotal - discount);
}, 0);

いいですね?実装する必要がある関数は、数量、割引、合計計算の関数を 1 つだけです。

ドキュメント統計ツール

テキスト文書を処理してみてはどうでしょうか?すべての単語、文字、文章をカウントします:

const documentStats = paragraphs.reduce((stats, paragraph) => {
    return {
        words: stats.words + paragraph.split(' ').length,
        characters: stats.characters + paragraph.length,
        sentences: stats.sentences + paragraph.split(/[.!?]+/).length - 1,
        paragraphs: stats.paragraphs + 1
    };
}, { words: 0, characters: 0, sentences: 0, paragraphs: 0 });

では、reduce() が複数のものを同時に処理する方法がどれほど美しいかわかりませんか?これは、個別のループを使用するよりもはるかに優れています。

プロのヒント: Reduce() コールバックが大きくなりすぎる場合は、常に小さな関数を使用するのが賢明です。

find() と some()

認証およびモデレーション システムをよりシンプルにする 2 つの方法に取り組んでみましょう。

ユーザー認証システムの作成

ログイン システムを構築したことがありますか? find() を使用するとユーザーの検索が非常に簡単になる方法は次のとおりです:

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

面倒なループや複雑な if ステートメントはもう必要ありません。 find() は必要なものを正確に返します。

コンテンツ管理ツールの構築

ここで some() が威力を発揮します - コンテンツを禁止された単語やパターンと照合してチェックします:

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

some() が複数の条件を一度にチェックするのにどのように役立つかを見てください。クリーンで、読みやすく、保守しやすい。

簡単なヒント: some() は一致するものが見つかるとすぐにチェックを停止します。大規模なデータセットを扱うときのパフォーマンスに最適です。

flat() と flatMap()

配列フラットナー

ネストされた配列をフラット化しようとしたことがありますか? flat() はあなたの親友です。これらのネストされた配列を単一のレベルに平滑化します。

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

深さパラメータを使用して、平坦化する深さを指定することもできます。深さがない場合、デフォルトは 1 になります。

flatMap() - 複数の返信を持つコメント システム

flatMap() は、ネストされた配列上の flat() と map() の組み合わせと考えてください。配列をマップし、結果を平坦化します。すべてを一度に実行します!

これは、各コメントに複数の返信を含めることができる実際のコメント システムです:

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

flatMap() は、項目を変換し、ネストされた結果を処理する必要がある場合に最適です。 1 つの料金で 2 つの方法を利用できるようなものです!

これはもう 1 つの実用的な例です - ソーシャル メディアの投稿からハッシュタグを抽出します:

const cartItems = [
    { name: "Nike Air Max", price: 129.99, quantity: 2, discount: 20 },
    { name: "Adidas Hoodie", price: 89.99, quantity: 1, discount: 0 },
    { name: "Running Socks", price: 12.99, quantity: 3, discount: 10 }
];


const cartTotal = cartItems.reduce((total, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = (itemTotal * item.discount) / 100;
    return total + (itemTotal - discount);
}, 0);

flatMap() が、空の可能性のある結果の変換と平坦化の両方をどのように処理するかをご覧ください。かなり滑らかです!

each() と include()

フォーム検証システムの構築

私たちが毎日使用するもの、つまり堅牢なフォームバリデーターを作成してみましょう。以下は、every() がそれをきれいにする方法です:

const documentStats = paragraphs.reduce((stats, paragraph) => {
    return {
        words: stats.words + paragraph.split(' ').length,
        characters: stats.characters + paragraph.length,
        sentences: stats.sentences + paragraph.split(/[.!?]+/).length - 1,
        paragraphs: stats.paragraphs + 1
    };
}, { words: 0, characters: 0, sentences: 0, paragraphs: 0 });

every() は、すべてのルールが合格したかどうかをチェックします。すべてが真実である必要がある検証に最適であることがわかります。

権限チェッカーの構築

includes() を使用すると、アクセス許可のチェックが非常に簡単になる方法を次に示します。

const users = [
    { id: 1, email: "alex@tech.com", password: "hashed_password_1", attempts: 0 },
    { id: 2, email: "sam@tech.com", password: "hashed_password_2", attempts: 1 }
];

const authenticateUser = (email, password) => {
    const user = users.find(u => u.email === email);
    if (!user) return { status: "error", message: "User not found" };

    if (user.attempts >= 3) return { status: "error", message: "Account locked" };

    return validatePassword(user, password);
};

includes() を使用すると、コードが平易な英語のように読みやすくなります。複雑な if ステートメントやループよりもはるかに優れています。

データの順序付け (sort())

基本的なアルファベット順以外にデータを並べ替える必要があったことがありますか? sort() は、ほとんどの開発者が考えているよりもはるかに強力です。

カスタムテーブルソーターの開発

これは、さまざまなデータ型を処理する実際のテーブル ソーターです:

const bannedWords = ["spam", "scam", "inappropriate"];

const moderateContent = (content) => {
    const containsBannedWords = bannedWords.some(word => 
        content.toLowerCase().includes(word)
    );

    const hasSpamPatterns = content.includes("!!!") || content === content.toUpperCase();

    return {
        isSpam: containsBannedWords || hasSpamPatterns,
        reason: containsBannedWords ? "Banned words detected" : "Spam patterns found"
    };
};

列ごとに関数を分ける必要はもうありません。 1 台の仕分け機だけですべてを処理します!

リーダーボード システムの構築

タイブレークを処理するリーダーボード ソーターをチェックしてください:

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

複数の並べ替え基準をどのように処理するかが分かりましたか?先に得点し、次に勝ち、プレータイムが最も短いと同点が破られます。

簡単なヒント: 元の順序を維持する必要がある場合は、並べ替える前に必ず配列のコピーを作成してください。

ベストプラクティスとパフォーマンス

先に進む前に、配列メソッドの動作を改善するためのちょっとした知恵を紹介してまとめましょう。

いつどの方法を使用するか

これが、あなたがやろうとしていることに基づいた私の実用的なガイドです:

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

それでは、forEach と for ループについて心配するのはやめてください。代わりにこれらに焦点を当ててください。

やるかやらないかは実際には重要です

出発する前に最後に。物事をより簡単に、より良く行う方法を常に探してください。例:

これの代わりに:

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

常にこれを実行してください:

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

それだけです!これで、JavaScript の配列メソッドに関する実践的な知識が得られました。賢く使ってください!

覚えておいてください: コードの可読性は、マイクロ最適化よりも優れています。コードを最も明確にする方法を最初に選択してください。

ご質問はありますか？以下のコメント欄で私に連絡してください！ ?

---

X (旧 Twitter) で私をフォローして、JavaScript の知恵を毎日入手してください!簡単なコードのヒントを共有したり、現実世界の問題をデバッグしたり、Web 開発について熱心に調べたりしています。

好奇心を持ち続けて覚えておいてください: 賢い開発者はコピー＆ペーストしますが、優秀な開発者は自分が何をコピーしているのかを理解しています。次の投稿でお会いしましょう！ ✨

以上が現実世界のシナリオを通じて説明される JavaScript 配列メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。