2重 For 構文の処理でうまくいかない

Question

前提・実現したいこと

JavaScript のデータ抽出で困っています。
以下のような名前に関する配列データがあります。

name_mail=[["鈴木"],["田中"],["佐藤"],["池田"],["小林"],["村田"],["中野"],["山田"],["村西"],["坂本"]]
name_data=[["鈴木",1],["田中",2],["佐藤",3]]

上記配列に対して、name_mail の要素が
name_data のインデックス0に一致する場合は、
name data のインデックス1 を抽出したいという事を実現したいです。
例：name_mail に 鈴木があれば、1が欲しい（name_data のインデックス番号0）

上記配列であれば、抽出したい結果としては以下になります。
1鈴木
2田中
3佐藤

JavaScript で以下のスクリプトを実行しましたが、
欲しい出力結果にはなりません。

name_mail=[["鈴木"],["田中"],["佐藤"],["池田"],["小林"],["村田"],["中野"],["山田"],["村西"],["坂本"]]
name_data=[["鈴木",1],["田中",2],["池田",3]]

 for(var i=0;i<11;i++){
    for(var j=0;j<3;j++){
      if(name_mail[i] == name_data[j][0]){
        var name = name_data[j][0];
        var to = name_data[j][1];
        console.log((to+name)+ "\n" );
        break;
      }
      else{
        var name = "不明";
        var to = 0;
        console.log(to+name);
      }
    }
   
}

出力結果

1鈴木

0不明
2田中

0不明
0不明
3佐藤

0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明
0不明

不明時の実行をなくして、条件一致時だけ実行したいです。
このスクリプトを実施するにあたり、他プログラムに送信する仕組みを作っていまして、
無駄な送信が増えている状況です。

お手数ですが、ご教授の程、よろしくお願い致します。

Answer 1

こんにちは。

いろいろなやり方がありそうですが、一例ということで、以下でどうでしょう？

const name_mail = [["鈴木"], ["田中"], ["佐藤"], ["池田"], ["小林"], ["村田"], ["中野"], ["山田"], ["村西"], ["坂本"]];
const name_data = [["鈴木", 1], ["田中", 2], ["池田", 3]];

const map = new Map(name_data);

name_mail.forEach(([name]) => {
    if (map.has(name)) {
        console.log(`${map.get(name)}${name}`);
    }
});

実行結果：

1鈴木

2田中
3池田

以下は、上記のコードを動作確認するために　jsFiddle に上げたものです。

• 動作確認用サンプル(1)： https://jsfiddle.net/jun68ykt/rjeh3gbv/21/

以上参考になれば幸いです。

追記1

name_data に該当する要素がないものに対して 0不明 を出力させるようにするには、例えば以下

name_mail.forEach(([name]) => {
    const value = map.get(name) || 0;
    const label = value ? name : '不明'; 
    console.log(`${value}${label}`);    
});

• 動作確認用サンプル(2)： https://jsfiddle.net/jun68ykt/rjeh3gbv/30/

のようにするか、もしくは、shou6 さんがコメントでフォローして下さっているように、動作確認用サンプル(1) のコードの if (map.has(name)) に対する else を追加して、以下

name_mail.forEach(([name]) => {
    if (map.has(name)) {
        console.log(`${map.get(name)}${name}`);
    } else {
        console.log('0不明');
    }
});

• 動作確認用サンプル(3)： https://jsfiddle.net/jun68ykt/rjeh3gbv/33/

のようにすればよいかと思います。

ただし上記のサンプル(2)または(3)だと、出力結果は、以下になります。

1鈴木

2田中
0不明
3池田
0不明
0不明
0不明
0不明
0不明
0不明

上記のように、 2田中 と 3池田 との間に、1個の 0不明 が出力されますが、もし、これが望んでいる出力ではなく、

1鈴木

2田中
3池田
0不明
0不明
0不明
0不明
0不明
0不明
0不明

のように、

• name_data に該当の要素があるものは、出力結果の先頭に連続して出力され、
• かつ、それらはname_data に含まれる数値の昇順に並んでおり、
• その後に該当なしのものに対応する、0不明 が出力される。

という順序を保って出力させたいのであれば、どこかで sort を使う必要があり、もう一工夫が必要ですね。一例として、以下のようにしてみました。

const names = name_mail.map(([name]) => name);
const m = new Map(name_data);

const matched_ary = names
  .filter(name => m.has(name))
  .sort((n1,n2) => m.get(n1) - m.get(n2))
  .map(name => `${m.get(name)}${name}`);

const unmatched_ary = names
  .filter(name => !m.has(name))
  .map(_ => '0不明');

matched_ary.concat(unmatched_ary).forEach(str => console.log(str));

• 動作確認用サンプル(4)： https://jsfiddle.net/jun68ykt/rjeh3gbv/50/

なお、上記のサンプル(4)では、正しく動作するかの検証のために、最初に与えられた2つの配列

• name_mail
• name_data

を Lodash の shuffle でランダムに並び替えてから、結果を得るためのロジックを動かしていますが、望む結果になっていることが確認できると思います。

とはいえ上記のサンプル(4)では、matched_ary と unmatched_ary の２つの配列を作って、結果の表示のために再度結合しておりやや回りくどいですね。これを回避するため、ソートキーとなるプロパティを別に追加して、name_dataから作ったマップに該当なしの場合、昇順でソートした時に後ろにくるように非常に大きな値を入れることにしました。それが以下です。

const m = new Map(name_data);

name_mail
  .map(([name]) => ({ 
    name: m.has(name) ? name : '不明',
    data: m.get(name) || 0, 
    order: m.get(name) || Number.MAX_SAFE_INTEGER 
  }))
  .sort((e1,e2) => e1.order - e2.order)
  .forEach(e => console.log(`${e.data}${e.name}`));
  

• 動作確認用サンプル(5)： https://jsfiddle.net/jun68ykt/rjeh3gbv/73/

追記2

ここまでに示した回答では、配列 name_data からMapを作っていましたが、 別案として、name_mail とname_data の両方の配列が持つ内容をマージしたエントリを含むMapを作る方法を挙げます。

具体的には、以下の2条件

• name_mail または name_data 、あるいは両方に含まれる名前(人名の姓)の全てをキーとして持つ。
• 各キーに対する値としては、デフォルト値は 0 で、name_data に同じキーのエントリがあれば、その値とする。

を満たすMapオブジェクトを、

const name_data_map = new Map([...name_mail.map(e => [e[0], 0]), ...name_data]);

で作成できます。
この name_data_map は以下のような内容を持つMapオブジェクトになります。

Map {
  '鈴木' => 1,
  '田中' => 2,
  '佐藤' => 0,
  '池田' => 3,
  '小林' => 0,
  '村田' => 0,
  '中野' => 0,
  '山田' => 0,
  '村西' => 0,
  '坂本' => 0 }

これを使って、各エントリをご要望の形式で出力するには以下のようにします。（※ソート処理は加えていません。）

name_data_map.forEach(
    (data, name) => console.log(`${data}${data ? name : '不明'}`)
);

• 動作確認用サンプル(6)： https://jsfiddle.net/jun68ykt/b5fs6rou/2/

追記3

ここまでの回答では、forEach, map, filter　および Map などを使用しましたが、ご質問に挙げられている二重のforループのコードを少し修正して、ご希望の出力を得ようとするならば、例えば以下のようにすればよいかと思います。

const name_mail = [["鈴木"], ["田中"], ["佐藤"], ["池田"], ["小林"], ["村田"], ["中野"], ["山田"], ["村西"], ["坂本"]];
const name_data = [["鈴木", 1], ["田中", 2], ["池田", 3]];

for(let i=0; i < 11; i ++ ) {
  let matched = false;
  for(let j=0; j < 3; j ++ ) {
    if (name_mail[i] == name_data[j][0]) {
      matched = true;
      console.log(`${name_data[j][1]}${name_data[j][0]}`);
      break;
    }
  }
  if (!matched) {
    console.log('0不明');  
  }
}

• 動作確認用サンプル(7)： https://jsfiddle.net/jun68ykt/jfahcL1e/22/

修正の要点は以下の２点です。

• 0不明 の出力は、内側のループ、for(let j=0; j < 3; j ++ ) {・・・} から抜けてから行う。
• 内側のループで値が見つかったのか否かの結果を、ループから抜けた後に参照できるようにする。（上記のコードではそのために、matched というフラグを追加）

Comments

[hitohito.pitcha]

大変申し訳ございません。
質問に誤解を与える伝え方がありました。

出力したい結果は以下になる場合はいかがでしょうか？

1鈴木
2田中
3佐藤
0不明
0不明
0不明
0不明
0不明
0不明
0不明

[shou6]

書いてくださったコードを見て、ちゃんと自分で確認すると良いと思いますよ。

if (map.has(name)) {
上記の部分でname_dataに存在するかチェックをしていることがわかるかと思います。

ならば、elseで返ってくるものが不明に当たる部分ということはわかりますよね。

[jun68ykt]

@hitohito.pitchaさん
回答のほうに追記しました。不明点あれば、またコメント頂ければと思います。

[jun68ykt]

@shou6さん
フォローありがとうございます。コメント頂きました else を使ったコードを回答に追記しました。

[jun68ykt]

@hitohito.pitchaさん
ご質問に挙げられている二重のforループを使ったコードに、なるべく少ない修正でご要望の出力を得る回答を追記3 に書きました。参考になれば幸いです。

[hitohito.pitcha]

ご丁寧な回答、大変ありがとうござました！
希望通りの内容が実現できそうです。
分からない記述は勉強してみます。

[jun68ykt]

@hitohito.pitchaさん
> 希望通りの内容が実現できそうです。
とのことで、よかったです ????

Answer 2

要件が追加されていきそうな気がしますが。

const name_mail=[["鈴木"],["田中"],["佐藤"],["池田"],["小林"],["村田"],["中野"],["山田"],["村西"],["坂本"]];
const name_data=[["鈴木",1],["田中",2],["池田",3]];
const result = name_mail.reduce( ( pre, curr )=> {
  const d = name_data.findIndex( e => e[ 0 ] === curr[ 0 ] );
  pre.push( d != -1 ? name_data[ d ] : [ '不明', 0 ] );
  return pre;
}, [] ).sort( ( a, b )=> b[ 1 ] - a[ 1 ] );
console.clear();
console.log( result );
/*
0: (2) ["池田", 3]
1: (2) ["田中", 2]
2: (2) ["鈴木", 1]
3: (2) ["不明", 0]
4: (2) ["不明", 0]
5: (2) ["不明", 0]
6: (2) ["不明", 0]
7: (2) ["不明", 0]
8: (2) ["不明", 0]
9: (2) ["不明", 0]
*/
```**動くサンプル：**[https://jsfiddle.net/c0f1usr9/](https://jsfiddle.net/c0f1usr9/)

Answer 3

name_mailのデータを勝手に加工してしまいましたが、この方式だとスマートに書けると思います。

name_mail=["鈴木","田中","佐藤","池田","小林","村田","中野","山田","村西","坂本"];
name_data=[["鈴木",1],["田中",2],["池田",3]];

name_data.forEach(function(val)
{
    if (name_mail.indexOf(val[0]) != -1)
    {
        console.log(val[0]+val[1]);
    }
});

Comments

[hitohito.pitcha]

ご回答いただき、大変ありがとうございます。

name_mail の取得方法が質問時の記述になるため、
配列方法を変えずに、取得する方法はありますでしょうか？