【JavaScript入門】複数のオブジェクトを1つに結合し、特定のプロパティを削除する方法

はじめに

JavaScriptでは、配列に格納された複数のオブジェクトを1つにまとめたり、不要なプロパティを取り除いたりする場面がよくあります。本記事では、Object.assign()を使ったオブジェクトの結合と、delete演算子によるプロパティの削除方法を、具体的なコード例とともに解説します。

今回扱うデータ

まず、次のような2つのオブジェクトを含む配列を用意します。この2つのオブジェクトを1つに結合し、さらにchkプロパティを完全に取り除くことがゴールです。

const err = [
    {
        "chk" : true,
        "name": "test"
    },
    {
        "chk" :true,
        "post": "test"
    }
];

手順1：オブジェクトを結合して単一のオブジェクトにする

Object.assign()にスプレッド構文（...）で配列の要素を渡すことで、すべてのプロパティがマージされた1つのオブジェクトを作成できます。

const errObj = Object.assign(...err);

ここで注意したいのは、両方のオブジェクトに同名のキー（この例ではchk）が存在する場合、後から渡されたオブジェクトの値で上書きされるという点です。

手順2：chkプロパティを削除する

次に、delete演算子を使って、結合したオブジェクトからchkプロパティを削除します。

delete errObj['chk'];
console.log(errObj);

コード全体と実行結果

以上の手順をまとめた完全なコードは以下の通りです。

サンプルコード

const err = [
    {
        "chk" : true,
        "name": "test"
    },
    {
        "chk" :true,
        "post": "test"
    }
];
const errObj = Object.assign(...err);
delete errObj['chk'];
console.log(errObj);

出力結果

コンソールには次のように出力されます。

{ name: 'test', post: 'test' }

補足：代替手法について

近年では、スプレッド構文だけで結合を行い、分割代入（Destructuring）のRest構文で不要なプロパティを除外する書き方も人気があります。

const errObj = { ...Object.assign(...err) };
const { chk, ...rest } = errObj;
console.log(rest); // { name: 'test', post: 'test' }

また、元の配列やオブジェクトを変更したくない場合は、structuredClone()などでコピーしてから操作すると安全です。deleteは対象のオブジェクトそのものを変更する破壊的な操作であるため、状況に応じて使い分けるとよいでしょう。

まとめ

• Object.assign(...array)を使えば、配列内の複数オブジェクトを簡単に1つに結合できる。
• 同名のプロパティがある場合、後の要素の値で上書きされる点に注意。
• delete オブジェクト名['キー名']で任意のプロパティを削除できる。
• 非破壊的に処理したい場合は、スプレッド構文やRest構文の活用も検討しよう。