javascriptでオブジェクトの配列を別の配列にコピーする [重複]。
2023-09-22 09:38:38
質問
配列の各要素(要素はオブジェクト)を別の配列にコピーして、完全に独立させるにはどうしたらよいでしょうか。一方の配列の要素を変更しても、もう一方の配列に影響しないようにしたいのです。
どのように解決するのですか?
ここで重要なことは
- 配列のエントリはオブジェクトであり
- 一方の配列にあるオブジェクトへの変更がもう一方の配列に表示されないようにする。
つまり、単にオブジェクトを新しい配列(またはターゲット配列)にコピーするだけでなく コピー を作成する必要があります。
コピー先の配列がまだ存在しない場合...
...使用する
map
を使って新しい配列を作成し、オブジェクトをコピーしていきます。
const newArray = sourceArray.map(obj => /*...create and return copy of `obj`...*/);
...コピー操作は、オブジェクトをコピーする方法であれば何でもよく、使用ケースに応じてプロジェクトごとに大きく異なります。このトピックは、以下の回答で詳しく説明されています。 この質問 . しかし、例えば、オブジェクトだけをコピーして、そのプロパティが参照するオブジェクトはコピーしない場合は、スプレッド記法(ES2015+)を使用することができます。
const newArray = sourceArray.map(obj => ({...obj}));
これは各オブジェクトの(そして配列の)浅いコピーを行います。繰り返しになりますが、深いコピーについては、上記のリンク先の質問に対する回答を参照してください。
エッジケースを処理しようとしない、深いコピーのナイーブなフォームを使用した例です。エッジケースについては、そのリンク先の質問を参照してください。
function naiveDeepCopy(obj) {
const newObj = {};
for (const key of Object.getOwnPropertyNames(obj)) {
const value = obj[key];
if (value && typeof value === "object") {
newObj[key] = {...value};
} else {
newObj[key] = value;
}
}
return newObj;
}
const sourceArray = [
{
name: "joe",
address: {
line1: "1 Manor Road",
line2: "Somewhere",
city: "St Louis",
state: "Missouri",
country: "USA",
},
},
{
name: "mohammed",
address: {
line1: "1 Kings Road",
city: "London",
country: "UK",
},
},
{
name: "shu-yo",
},
];
const newArray = sourceArray.map(naiveDeepCopy);
// Modify the first one and its sub-object
newArray[0].name = newArray[0].name.toLocaleUpperCase();
newArray[0].address.country = "United States of America";
console.log("Original:", sourceArray);
console.log("Copy:", newArray);
.as-console-wrapper {
max-height: 100% !important;
}
宛先配列が存在する場合...
...そして、ソース配列の内容をそこに追加したい場合は
push
とループさせます。
for (const obj of sourceArray) {
destinationArray.push(copy(obj));
}
特に理由がなくても、人はどうしても "ワンライナー "を欲することがあります。そのような場合は、新しい配列を作成し、それを展開するためにスプレッド記法を使用して、1つの
push
を呼び出すことができます。
destinationArray.push(...sourceArray.map(obj => copy(obj)));
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptの配列で一意な値をすべて取得する(重複を排除する)。
-
[解決済み] 配列を値でコピーする
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] 配列を値でコピーする
-
[解決済み] JavaScriptで配列を複製する最速の方法 - スライス vs. 'for'ループ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] javascriptでオプションのパラメータを扱う