Javascriptでの多次元配列を用いたデータ作成とpush

Question

前提

質問失礼いたします。
はじめての質問ですので至らないところがあると思いますが、宜しくお願い致します。

Javascriptで多次元リストを用いてあるデータを作ろうとしたところ、思いがけない所で躓いてしました。。。

実現したいこと

// 以下の2つの配列を基にして

// 1.  url名とtitle名をペアに持つ二次元配列 (ペア数は可変) (例
let toSaveUrlsTitles = [
    ["url1", "title1"],
    ["url2", "title2"]
]
// 2.  すでにある何個かのデータの配列 (こちらの要素数は固定) (例
let DataValue = ["value1", "value2"];



// urlと固定の文字列("key_")を組み合わせたキーを持つ、以下のようなオブジェクトを作りたい。

// {"key_(url名)" : [(すでにある値...), "(title名)"] }   (例 
NewData = {
    "key_url1": ["value1", "value2", "title1"],
    "key_url2": ["value1", "value2", "title2"]
}

方針

for文等でurl名とtitle名のペアの二次元配列を回し、

{ "key_url1": ["value1", "value2"] }

というようなオブジェクトを一度作った後、
title名をpushするという方針を取りました。

得られた結果

しかし結果は

{ 
"key_url1": ["value1", "value2", "title1", "title2"], 
"key_url2": ["value1", "value2", "title1", "title2"] 
} 

というように、titleが二つとなってしましました。
(予想されていた結果は一つのみ。"key_url1"の時は"title1"のみ、"key_url2"の時は"title2"のみ)

ソースコード

for of 文、for文、for Each文を試しましたがどれも同じような結果になりました。

共通データ

let NewData = {};

let toSaveUrlsTitles = [
    ["url1", "title1"],
    ["url2", "title2"]
]

let DataValue = ["value1", "value2"]

for of

for (let i of toSaveUrlsTitles) {
    let BaseKey = "key_";
    let WholeKey = "";  //"key_url1"

    WholeKey = BaseKey;
    WholeKey += i[0];

    NewData[WholeKey] = DataValue;
    NewData[WholeKey].push(i[1]);
}
console.log(NewData);

for

for(let i=0; i<toSaveUrlsTitles.length; i++){
    let CurrentArr=toSaveUrlsTitles[i]; // 多重配列を分解したもの

    let BaseKey = "key_";
    let WholeKey = "";

    WholeKey = BaseKey;
    WholeKey += CurrentArr[0];

    NewData[WholeKey] = DataValue;
    NewData[WholeKey].push(CurrentArr[1]);
}
console.log(NewData);

for Each

toSaveUrlsTitles.forEach(function (v) {
    let BaseKey = "key_";
    let WholeKey = "";

    WholeKey = BaseKey;
    WholeKey += v[0];

    NewData[WholeKey] = DataValue;
    NewData[WholeKey].push(v[1]);
})
console.log(NewData);

その他試したこと

途中途中にconsole.log()を挟み、
for ofで言えば

 console.log(i[1]);

として、.push()されるはずのものを確認しました。
そしてそこではちゃんと

"title1"

と出ていました。

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

chrome, firefoxで検証済み

はじめてですのでわかりにくい部分が多々あると思いますが、よろしくお願いいたします。

Answer 1

完成コード例

以下のコードでご希望の処理が可能です。

const NewData = {};
const toSaveUrlsTitles = [
  ["url1", "title1"],
  ["url2", "title2"]
];
const DataValue = ["value1", "value2"];


for (const arr of toSaveUrlsTitles) {
  const key = `key_${arr[0]}`;
  const val = [...DataValue, arr[1]];
  
  NewData[key] = val;
}

console.log(NewData);

不具合の原因

質問者様手法だと配列の 「参照コピー」 になっているからです。

参照コピーとは

配列をコピーする際に新しい変数の中に、元の配列の変数名を書いてしまうと、2つの配列がリンクされた状態になっています。

// 参照コピー
const original = [1, 2, 3];
const refCopy = original;
refCopy.push(4);

console.log(original); // [1, 2, 3, 4]
console.log(refCopy); // [1, 2, 3, 4]

ですので、質問者様のコードはDataValueの値を利用しているだけのつもりが、実際にはDataValueそのものを編集してしまっている状態です。

独立したコピーの作成方法

2つの配列をリンクさせたくない場合、元の配列の変数名をそのまま書くのではなく、 「スプレッド構文」 という配列を一旦バラバラにばらしてやる方法で、新規の配列を作成しましょう。

// 独立したコピー
const original2 = [1, 2, 3];
const newCopy = [...original2]; // スプレッド構文
newCopy.push(4);

console.log(original2); // [1, 2, 3]
console.log(newCopy); // [1, 2, 3, 4]

質問者様のコード修正版

スプレッド構文で新しい配列を作れば、質問者様のコードでも意図通りの処理が行われます。

const NewData = {};
const toSaveUrlsTitles = [
  ["url1", "title1"],
  ["url2", "title2"]
];
const DataValue = ["value1", "value2"];

for (let i of toSaveUrlsTitles) {
  let BaseKey = "key_";
  let WholeKey = ""; //"key_url1"

  WholeKey = BaseKey;
  WholeKey += i[0];

  NewData[WholeKey] = [...DataValue]; // スプレッド構文
  NewData[WholeKey].push(i[1]);
}
console.log(NewData);

Comments

[Kryptografin]

とても丁寧な解説をして頂きありがとうございました。
無事解決できました。

実はCocode様の仰る参照コピーのことも少しだけ知っており、
`new Array()` などもやってみたのですが、うまくいっていませんでした。
もう一度詳しくJavascriptのコピーについて調べてみたいと思います。

とても助かりました。ありがとうございました。

Answer 2

欲しい結果を考えると、2つの新しい配列(URL毎に1つ)を作る必要がありますよね。ところが、質問文のコードでは1つも配列を作っていないのです。

    NewData[WholeKey] = DataValue;

このコードでは、NewData[WhokeKey] と DataValue の両方から1つの配列を指すようになります。配列のコピーなどは行われていません。

ですので、ここで配列のコピーを作る必要があります。コピーする方法はいろいろあり、下記は一例です。

    NewData[WholeKey] = Array.from(DataValue);

---

JavaScript では変数名を大文字で始めるのはかなり奇妙に見えます。人に見せるコードでは小文字で始めたほうが無難です。

Comments

[Kryptografin]

解答ありがとうございます。
配列のコピーについて、再度詳しく調べてみたいと思います。

また命名規則についてのご指摘、とても勉強になりました。
確かにJavascriptではローワーキャメルケースが大半であるように思います。
自身でもしっかり意識してコードを書くように心がけたいと思います。

解答ありがとうございました。

Answer 3

const a=[
    ["url1", "title1"],
    ["url2", "title2"]
];
const b=["value1", "value2"];
const c=Object.fromEntries(a.map(x=>([`key_${x[0]}`,b.concat(x[1])])));
console.log(c);