【JavaScript】配列をコピー・複製する方法についてまとめてみた

本記事の目次

配列を別の変数に代入してもコピー・複製はされない

配列を別の変数に代入してみます。

let origin = [1, 2, 3];
let clone = origin;

console.log(clone); // [1, 2, 3]

console.log()したところ、一見コピー・複製できているように見えますが、

clone.push(4);

console.log(clone); // [1, 2, 3, 4]
console.log(origin); // [1, 2, 3, 4]

cloneに対してpushしたところ、originについてもpushされてcloneと同じ状態になってしまいました。

これは、別の変数に代入してもコピー・複製されるわけではなく、同じものを参照してしまっているから起きてしまう現象です。

そのため、JavaScriptで配列をコピー・複製するのに、配列を別の変数に代入する方法は適していないと言えます。

JavaScriptで配列をコピー・複製する時には、Array.from()メソッドを利用するのが一番簡単で確実です。

引数に元の配列を渡すと、コピー・複製された配列が返されます。

let origin = [1, 2, 3];
let clone = Array.from(origin);

console.log(clone); // [1, 2, 3]

配列originと配列cloneでは参照が異なり独立しているため、片方に変更を加えてももう片方が影響されることはありません。

origin.push(4);

console.log(origin); // [1, 2, 3, 4]
console.log(clone); // [1, 2, 3]

for文とpush()メソッドを使用して、ループで元の配列の各要素に対して処理を行うことで、配列をコピー・複製することもできます。

let origin = [1, 2, 3];
let clone = [];

for(let i = 0; i < origin.length; i++) {
  clone.push(origin[i]);
}

console.log(clone); // [1, 2, 3]

スプレッド構文を使用して、配列をコピー・複製することもできます。

スプレッド構文では配列の要素が展開されてしまうため、「[ ]」で囲うことを忘れないように注意しましょう。

let origin = [1, 2, 3];
let clone = [...origin];

console.log(origin); // [1, 2, 3]

JavaScriptのmap()メソッドは、配列に対して各要素に何かしらの処理を加えた新しい配列を返すメソッドです。

map()メソッドの中で各要素をそのままreturnすることで、元の配列をコピー・複製することができます。

let origin = [1, 2, 3];
let clone = origin.map((elem) => {
  return elem;
});

console.log(clone);

JavaScriptのfilter()メソッドは、メソッド内でreturnした条件で、元の配列に対してフィルターをかけた配列を返すメソッドです。

map()メソッドと同じような使い方で配列をコピー・複製することができます。

let origin = [1, 2, 3];
let clone = origin.filter((elem) => {
  return true;
});

console.log(clone);

JavaScriptのconcat()メソッドは、2つ以上の配列を1つの配列に結合させて、その配列を返すメソッドです。

引数に何も指定しないことで、元の配列をコピー・複製することができます。

let origin = [1, 2, 3];
let clone = origin.concat();

console.log(clone); // [1, 2, 3]

JavaScriptのslice()メソッドは、配列に対して範囲を指定し、その範囲の要素を新しい配列として返すメソッドです。

let origin = [1, 2, 3];
let clone = origin.slice(0, origin.length);

console.log(clone); // [1, 2, 3]

配列の先頭から配列の最後までを引数で指定することで、元の配列をコピー・複製しています。

配列のコピー・複製は、適切な方法で行わないとバグや不具合の元になってしまうことも少なくありません。

特に、配列が入れ子になっていたりする場合には注意が必要です。

基本的にはArray.from()メソッドを利用することで問題ないため、Array.from()メソッドの使い方を覚えておくと良いでしょう。