2つの配列の要素を比較し、新しい配列を作成したいです

Question

前提・実現したいこと

・配列①：二次元配列
・配列②：オブジェクトの配列
を組み合わせて、最終的に配列③を作りたいです。

配列③は下記の加工をしたものです。
・配列①にない「長野」を削除
・配列①にある「埼玉」を追加（）
（）「県庁所在地」は仮の値として0を代入しておく（スプレッドシートに出力後に直接入力）。

オブジェクト内の要素を比較し、追加・削除する方法がわからず、伺いたいです！

該当のソースコード

//参照する配列①
const area = [
　['神奈川'],
　['埼玉'],//配列②に追加したい
　['兵庫']
];

//元の配列②
const data = [
　{'地域':'神奈川','No.':1},
　{'地域':'長野','No.':2},//配列②から削除したい要素
　{'地域':'兵庫','No.':3},
];

//作りたい配列③
const newData = [
　{'地域':'神奈川','No.':1},
　{'地域':'埼玉','No.':0},//新規追加した要素
　{'地域':'兵庫','No.':3}
　//長野のデータは削除
]

試したこと

indexOfなどでできるかと思いましたがうまくいかず、、

補足情報（FW/ツールのバージョンなど）

Answer 1

const res = area.map( o=>{
	const i = data.find( v=> v[ '地域' ] === o[ 0 ] ) || {'No.':0};
  return {'地域': o[ 0 ],'No.': i[ 'No.' ] };
} );
```**動くサンプル：**[https://jsfiddle.net/hdyxm1L4/](https://jsfiddle.net/hdyxm1L4/)

---

【Array.prototype.map() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

【Array.prototype.find() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

Comments

[bb33laxhouse]

ご回答ありがとうございます！！！
こちらのコードでも無事解決することができました！

解説ページも添付いただき、とても助かります。
コードだけではどんな機能をしているか分からなかったのですが、参考にして勉強します！
夜分にありがとうございました????‍♂️

Answer 2

最初から、２つの操作

(1) 元の配列② data から、地域が参照する配列① area にない要素を削除した配列を作る。

(2) 参照する配列① area にあり、元の配列②data には存在しない地域の要素を、dataの末尾に追加する。No.は0で初期化

をいっぺんにやろうとするとワケわかんなくなるやん。そやからまずは個別に考えるとええのとちゃいます？ ゆうことで、まずは

(1) 元の配列② data から、地域が参照する配列① area にない要素を削除した配列を作る。

のほうやけど、この操作によって出来る配列を data1 とすると、

// data から、地域が area にない要素を削除した配列 data1 を作る。
const data1 = data.filter(e => area.find(([a]) => a === e['地域']));

でいけます。次に

(2) 参照する配列① area にあり、元の配列②data には存在しない地域の要素を、dataの末尾に追加する。No.は0で初期化

のほうは、この操作によって出来る配列を data2 とすると、

// area にあり、data には存在しない地域の要素を、dataの末尾に追加する。No.は0で初期化
const data2 = area.reduce((arr, [a]) => 
  arr.find(e => a === e['地域']) ? arr : [...arr, { '地域': a, 'No.': 0 }]
  , data);

で出来ます。

ということは、質問のnewData を作るには、(2)の操作を、元の配列②data に対してではなく、(1)で出来る配列 data1 に対して行えばよいので

const data1 = data.filter(e => area.find(([a]) => a === e['地域']));

const newData = area.reduce((arr, [a]) => 
  arr.find(e => a === e['地域']) ? arr : [...arr, { '地域': a, 'No.': 0 }]
  , data1);

とすればよいです。そして、途中の変数 data1 を無くして詰めれば

const newData = area.reduce((arr, [a]) => 
  arr.find(e => a === e['地域']) ? arr : [...arr, { '地域': a, 'No.': 0 }]
  , data.filter(e => area.find(([a]) => a === e['地域'])));

となります。実行例はこないな感じや。

とはいえ、data1 無くして詰めると読みにくくなるので、data1無くす前のほうでもええかと思いますわ。

Comments

[bb33laxhouse]

ご丁寧にありがとうございます！！！！！
無事解決することができました。20行以上の汚いコードを書いてはエラーを出していたので、本当に助かりました。。。

ご説明もとてもわかりやすいです。
正直、コードの内容に関しては現時点では分からない（そもそも知らない）ものが多いのですが、その点については自分で調べてスキルとして身につけようと思います！