「配列」の記事 - Crieit

JavaScript で互いにオブジェクトを要素に持つ配列2つを比較して、重複していない要素のみを取り出す

2022-07-14T23:39:50+09:00

経緯

JavaScript で、互いにオブジェクトを要素に持つ配列2つを比較して、重複していない要素のみを取り出す処理を試みたのでメモしておきます。

前提

前提として、次のような2つの配列があったとします。

互いにオブジェクトを要素として持つ配列
配列2は配列1の子集合(サブセット)

この2つの配列を比較して、配列1の中から配列2に含まれない要素のみの配列を作りたい、と考えました。

想定する最終結果も併せて付記しておきます。

配列1

[
    {
        "value": "value-0",
        "label": "Château d'If"
    },
    {
        "value": "value-1",
        "label": "Marseille"
    },
    {
        "value": "value-2",
        "label": "France"
    },
    {
        "value": "value-3",
        "label": "Le Comte de Monte-Cristo"
    },
    {
        "value": "value-4",
        "label": "Alexandre Dumas"
    },
    {
        "value": "value-5",
        "label": "Rhino"
    },
    {
        "value": "value-6",
        "label": "prison"
    },
    {
        "value": "value-7",
        "label": "François I"
    },
    {
        "value": "value-8",
        "label": "Jean-Baptiste Kléber"
    }
]

配列2

[
    {
        "value": "value-0",
        "label": "Château d'If"
    },
    {
        "value": "value-1",
        "label": "Le Comte de Monte-Cristo"
    },
    {
        "value": "value-2",
        "label": "Alexandre Dumas"
    }
]

得たい配列

[
    {
        "value": "value-1",
        "label": "Marseille"
    },
    {
        "value": "value-2",
        "label": "France"
    },
    {
        "value": "value-5",
        "label": "Rhino"
    },
    {
        "value": "value-6",
        "label": "prison"
    },
    {
        "value": "value-7",
        "label": "François I"
    },
    {
        "value": "value-8",
        "label": "Jean-Baptiste Kléber"
    }
]

「2つの配列で重複した要素を除去した配列を生成する」というのはいくつか記事を見かけました。

しかし、それらは1次元配列のサンプルばかりだった上に、今回はさらに「要素の中の labelキーの値で比較したい」という内容だったので、さらにハードルが上がりました。

余談

何故このようなことをしようかと思ったかというと、 React Select で defaultCalue で指定した選択済みの項目が選択候補にも上がってしまっていたので、除外しようとしたためでした。

が、そもそも React Select 側は選択済み項目を除外する機能を元々持っていたので上述の処理は不要ということが分かったため、今回のコードは未使用となりました。

ちなみに、この機能が働かなかった原因は API で取得した値から上述のような label と value のオブジェクトを生成するループ処理の際に、 value に ID の数値を振り方を間違えていたため、 React Select から「異なる値」として認識されてしまっていたためでした。

また、仮に今回の処理をかけたとしても、初期表示では上手く選択済み項目が除外されますが、選択済み項目を削除した場合は選択可能な項目として再度選択肢に復活させる必要があるため、かなり手間がかかることが想定されたためオミットしていたと思います。

……本当、 React Select 側に標準搭載されていて良かったです。

参考

配列操作

JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita

JSON のフォーマット

JSON.stringifyの出力結果を整形して可読性を向上させる - Qiita

JavaScript:オブジェクトが中に入った配列をコピーする

2019-11-29T22:48:04+09:00

はじめに

こんなの、絶対みんな直面していると思うんだけど、調べても出てこないのは、ググり方が悪いのか、需要がないのか、みんな余裕でやってしまうのか、なんなんだ？

想定読者

下記の挙動を理解している人

const array = [1,2,3];
const array2 = array;
console.log(array); // → [1,2,3]
array2[1] = 4;
console.log(array); // → [1,4,3]

配列をコピーして別物として扱いたいとき、 = で代入してはいけないのは流石に分かるのだけど、殊更JavaScriptになると「あれ、どうやるんだっけ？」と毎回調べるハメになる。
しかも、やれsliceを使え、concatを使えだの、やれArray.fromを使えだの、様々な方法があって、かつ、そいつら、ディープコピーのメソッドじゃないよね？ cloneとかないの？¹ という状況なのですが、文句を言っても仕方がないので、愚直にやるわけです。

配列の中身がオブジェクトだとうまくいかない

で、こんなコードを書いたわけですが、

const array = [{a:1},{a:2}];
const array2 = array.slice();
console.log(JSON.parse(JSON.stringify(array)));
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
array2[1].a = 3;
console.log(JSON.parse(JSON.stringify(array)));
// ???
// Array(2)
// 0: {a: 1}
// 1: {a: 3}

目を疑った。あれ、実はsliceはダメなのかな？　とか思ってconcatもArray.fromも試したけどダメ。
1時間くらい悩んで、「ああ、配列はディープコピーされたけど、中のオブジェクトが参照のままなのか」と気がついた。

const array = [{a:1},{a:2}];
const array2 = array.slice();
console.log(JSON.parse(JSON.stringify(array)));
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
array2.push({a:3});
console.log(JSON.parse(JSON.stringify(array)));
// 配列はディープコピーされている
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
console.log(JSON.parse(JSON.stringify(array2)));
// Array(3)
// 0: {a: 1}
// 1: {a: 2}
// 2: {a: 3}

解決策

え、これどーすんの？　と少し悩んで、下記の様にした。

const array = [{a:1},{a:2}];
const array2 = array.map((obj) => Object.assign({},obj));
console.log(JSON.parse(JSON.stringify(array)));
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
array2.push({a:3});
console.log(JSON.parse(JSON.stringify(array)));
//　配列はOK
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
array2[1].a = 4;
console.log(JSON.parse(JSON.stringify(array)));
// 中のオブジェクトもディープコピーしている
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
console.log(JSON.parse(JSON.stringify(array2)));
// Array(3)
// 0: {a: 1}
// 1: {a: 4}
// 2: {a: 3}

Array.map()の中でオブジェクトをObject.assign()でディープコピーして返している。mapは新しい配列を返すので、配列のコピーもOK。

ところで、オブジェクトのディープコピーって

オブジェクトのディープコピーも調べるといくつか出てくる。
Object.assignってのがあるんだけど、Object.assignはシャローコピーなのでJSON.parse/JSON.stringifyって人もいれば、JSON.parse/JSON.stringifyは安易に使うな、Object.assignがディープコピーだからそっちを使えっていう堂々巡りで、というか読んでいるとどっちもどっち感が強くて、状況に合わせて自力でどうにかするしかないじゃんっていう……。

おわりに

もっと正しいスマートなやり方を教えてください。

phpのcloneが配列に使えない（そして使う必要がない）のは知っているのだけれど、良い例が思い浮かばなかったのです。 ↩︎