本記事では、JavaScriptで配列をコピーする方法についてサンプルコードを用いて分かりやすく解説しています。
JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 著者 | 山田 祥寛 |
|---|---|
| 発売日 | 2016/9/30 |
| ページ数 | 782ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (146件) |
参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)
| 作成者 | CodeMafia |
|---|---|
| 学習時間 | 19.5時間 |
| 受講者数 | 28,547人 |
| レビュー | (5,025件) |
配列をコピーする方法
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で使用される…ドット3つのスプレッド構文とレスト構文について解説しています。...
DMM WEBCAMP 
CodeCamp 
TechAcademy 
