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

JavaScriptで特定のキーを除外してオブジェクトを分割代入する方法

JavaScriptでは、レストパラメータ（...）を使った分割代入（デストラクチャリング）を利用することで、オブジェクトから特定のキーだけを取り出し、残りのプロパティをまとめて別の変数に格納できます。この手法は、オブジェクトから不要なプロパティを除外したい場合に非常に便利です。

以下のコードは、オブジェクトから「firstName」キーを除外し、残りのプロパティを「restParam」にまとめて取得する例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<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,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>1つのキーを除外したオブジェクトの分割代入</h1>
<div class="sample">{"firstName":"Rohit","lastName":"Sharma","age":22}</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、オブジェクトが分割代入されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let obj = {
        firstName: "Rohit",
        lastName: "Sharma",
        age: 22,
    };
    let { firstName, ...restParam } = obj;
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML += "firstName = " + firstName + "<br>";
        resEle.innerHTML += "restParam.lastName = " + restParam.lastName + "<br>";
        resEle.innerHTML += "restParam.age = " + restParam.age + "<br>";
    });
</script>
</body>
</html>

実行結果

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

JavaScriptで特定のキーを除外してオブジェクトを分割代入する方法

「CLICK HERE」ボタンをクリックすると、以下のように結果が出力されます。

JavaScriptで特定のキーを除外してオブジェクトを分割代入する方法

解説

ポイントとなるのは次の1行です。

let { firstName, ...restParam } = obj;

ここでは、オブジェクト「obj」を分割代入しています。「firstName」は個別の変数として抽出され、「...restParam」（レストパラメータ）にはfirstName以外の残りのすべてのプロパティ（lastNameとage）が新しいオブジェクトとしてまとめられます。

そのため、ボタンをクリックすると以下の結果が表示されます。

  • firstName → 「Rohit」（個別に抽出された値）
  • restParam.lastName → 「Sharma」（残りのオブジェクトに含まれる）
  • restParam.age → 「22」（残りのオブジェクトに含まれる）

このように、レストパラメータを使うことで、特定のキーを除外した新しいオブジェクトを簡単に作成できます。元のオブジェクトは変更されないため、イミュータブルなデータ操作にも適しています。

  1. HTML DOM KeyboardEventオブジェクトとは？プロパティ・イベントの使い方を解説

    HTML DOMのKeyboardEventオブジェクトは、ユーザーがキーボードのキーを押したり離したりした際に発生するイベントを表すオブジェクトです。このオブジェクトを利用することで、押されたキーの種類や修飾キー（Alt・Ctrl・Shiftなど）の状態を取得でき、キーボード操作に応じたインタラクティブなWebページを作成できます。KeyboardEventの主なプロパティとメソッドKeyboardEventオブジェクトには、以下のようなプロパティおよびメソッドが用意されています。プロパティ／メソッド説明altKey「ALT」キーが押されているかどうかを返しますcharCodeキーのUnic

  2. プロダクトキーなしでWindows 10をインストールして使う方法|ライセンス認証まで完全解説

    Microsoftは、プロダクトキーがなくても、誰でもWindows 10を無料でダウンロードしてインストールできるようにしています。インストール後も一部の小さな制限はあるものの、問題なく動作し続けます。かつてWindows XPの時代には「Windows Genuine Advantage(WGA)」によってPCの利用が制限される仕組みもありましたが、現在のWindowsは、画面右下に透かしが表示されるなど、ごく控えめな形でお知らせするだけです。インストール後に有料でライセンス版へアップグレードすることも可能です。この記事では、プロダクトキーなしでWindows 10をインストールする方法と