JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのオブジェクト配列に配列メソッドを適用する方法

JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。

コード例

以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Using methods of array on array of JavaScript objects</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to apply array methods on array of objects</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let arr = [
        {
            name: "Rohan",
            age: 22,
            rollNo: "A12",
        },
        {
            name: "Mohit",
            age: 12,
            rollNo: "B21",
        },
        {
            name: "Shawn",
            age: 18,
            rollNo: "C43",
        },
    ];
    BtnEle.addEventListener("click", () => {
        arr.pop();
        arr.push({ name: "Michael", age: 17, rollNo: "AC9" });
        arr.splice(1, 1);
        console.log(arr);
    });
</script>
</body>
</html>

コードの解説

このコードでは、名前・年齢・出席番号（rollNo）を持つ3つの学生オブジェクトを含む配列 arr を定義しています。ボタンをクリックすると、以下の処理が順番に実行されます。

  • arr.pop()：配列の末尾から最後のオブジェクト（Shawn）を削除します。
  • arr.push({...})：新しいオブジェクト（Michael）を配列の末尾に追加します。
  • arr.splice(1, 1)：インデックス1の位置から1つの要素（Mohit）を削除します。

最後に console.log(arr) で処理後の配列の内容をコンソールに出力します。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのオブジェクト配列に配列メソッドを適用する方法

「CLICK HERE」ボタンをクリックし、ブラウザの開発者ツールでコンソールを確認すると、次のように配列の内容が更新されていることがわかります。

JavaScriptのオブジェクト配列に配列メソッドを適用する方法

このように、JavaScriptのオブジェクト配列でも通常の配列メソッドを自由に組み合わせて使えるため、データの追加・削除・加工などを柔軟に行うことができます。

  1. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ

  2. 【JavaScript】mapとforEachを使ってオブジェクト内のオブジェクト配列を解析する方法

    JavaScriptでは、map() や forEach() といった配列メソッドを活用することで、オブジェクトの中にネストされたオブジェクトの配列(JSON形式のデータなど)を効率的に解析・処理できます。以下は、mapとforEachを組み合わせて、オブジェクト内のオブジェクト配列を解析し、画面に表示するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=&quo