本記事では、JavaScriptで配列をコピーする方法についてサンプルコードを用いて分かりやすく解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
配列をコピーする方法
JavaScriptで配列をコピーする場合、以下のような書き方ではコピーした配列を書き換えた際にコピー元の配列も書き換わってしまいます。
let arr = ["A","B","C","D","E"];
let copyArr = arr;
copyArr[0] = "F";
console.log(arr);// -> [ 'F', 'B', 'C', 'D', 'E' ] コピー元の配列も書き換わってしまった。。
console.log(copyArr); // -> [ 'F', 'B', 'C', 'D', 'E' ]コピー元の配列に影響が出ないように配列をコピーする方法を3つ紹介していきます。
sliceメソッド
1つ目の配列をコピーする方法は、sliceメソッドを使用します。
Array.slice(スタート位置, 終了位置)sliceメソッドには2つの引数を指定することができます。第一引数にはスタート位置を第二引数には終了位置をインデックス指定し、新しい配列オブジェクトに作成して返します。
つまり、スタート位置を0として終了位置を配列の長さに指定することで配列をそのままコピーすることができます。
let arr = ["A","B","C","D","E"];
let copyArr1 = arr.slice(0, arr.length);
console.log(copyArr1); // -> [ 'A', 'B', 'C', 'D', 'E' ]
/* sliceの引数を省略してもコピー可能 */
let copyArr2 = arr.slice(0, arr.length);
console.log(copyArr2); // -> [ 'A', 'B', 'C', 'D', 'E' ]concatメソッド
2つ目の配列をコピーする方法は、concatメソッドを使用します。
Array.concat(結合させる配列)concatメソッドは2つ以上の配列を結合する時に使用しますが、引数を省略することで既存の配列を新しい配列として返します。
let arr = ["A","B","C","D","E"];
let copyArr = arr.concat();
console.log(copyArr); // -> [ 'A', 'B', 'C', 'D', 'E' ]スプレッド構文
3つ目の配列をコピーする方法は、スプレッド構文を使用します。
スプレッド構文とは、ドット3つ(…)で配列やオブジェクトを展開することができます。
let arr = ["A","B","C","D","E"];
let copyArr = [...arr];
console.log(copyArr); // -> [ 'A', 'B', 'C', 'D', 'E' ]
あわせて読みたい
【JavaScript】…ドット3つの意味と使い方｜スプレッド構文とレスト構文について理解しよう
JavaScriptで他人が作成したソースコードを見ていると、「…」と記述された処理を見たこと1度はあると思います。 当時の私はこの…が何を指しているのか全く分からず、こ…