JavaScriptのcopyWithinの使い方！配列内でコピー

JavaScriptで配列の一部をコピーして、同じ配列の別の場所に貼り付けることができるcopyWithinメソッドについて書いています。
元の配列を直接変更するため、効率的な操作が可能です。

実際に動くサンプルを使って、以下の操作を解説します。

copyWithinメソッドの基本的な使い方

copyWithinメソッドは、配列の一部分をコピーし、同じ配列内の別の位置に上書きします。
基本的な構文は以下のとおりです。

array.copyWithin(target, start, end)

• target: コピーした要素の要素を挿入する開始位置。0始まりのインデックス（必須）。
• start: コピーを開始するインデックス（省略可能、デフォルトは0）。
• end: コピーを終了するインデックス（省略可能、デフォルトは配列の長さ）。

基本的なコピー

startとendを省略した場合、配列の先頭からコピーが開始され、targetで指定された位置に貼り付けられます。

const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(2);
console.log(numbers); // 結果：[1, 2, 1, 2, 3]

numbers.copyWithin(2)では、インデックス0から配列の最後まで（つまり[1, 2, 3, 4, 5]全体）がコピーされ
インデックス2の位置に貼り付けられます。

結果として、[1, 2, 1, 2, 3]となります。

開始位置と終了位置を指定したコピー

startとendを指定することで、コピーする範囲を限定できます。

const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(2, 0, 2);
console.log(numbers); // 結果：[1, 2, 1, 2, 5]

numbers.copyWithin(2, 0, 2)では、インデックス0から2の手前まで（[1, 2]）がコピーされ
インデックス2の位置に貼り付けられます。

結果として、[1, 2, 1, 2, 5]となります。

コピー範囲が貼り付け先より長い場合

コピーする範囲が貼り付け先よりも長い場合、貼り付け先を超えた部分はコピーされません。

const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(1, 0, 5);
console.log(numbers); // 結果：[1, 1, 2, 3, 4]

numbers.copyWithin(1, 0, 5)では、インデックス0から5の手前まで（[1, 2, 3, 4, 5]）がコピーされます。
ですが、貼り付け先はインデックス1から始まるため、結果は[1, 1, 2, 3, 4]となります。

負のインデックスの使用

startとendには負のインデックスも使用できます。
負のインデックスは配列の末尾からの位置を表します。

const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, -3, -1);
console.log(numbers); // 結果：[3, 4, 3, 4, 5]

numbers.copyWithin(0, -3, -1)では、末尾から数えて3番目の値から最後から1番目まで（[3, 4]）がコピーされます。
そして、インデックス0に貼り付けられます。結果として、[3, 4, 3, 4, 5]となります。

copyWithinメソッドを使うメリット

copyWithinメソッドを使う主なメリットは以下のとおりです。

• 元の配列を直接変更: 新しい配列を作成するのではなく、元の配列を直接変更するため、メモリ効率が良いです。
• 柔軟なコピー: 開始位置、終了位置、貼り付け先を自由に指定できるため、様々なコピー操作に対応できます。
• 簡潔な記述: 配列の一部分をコピーする処理を簡潔に記述できます。

JavaScriptのcopyWithinメソッドの使い方まとめ

今回はJavaScriptのcopyWithinメソッドの使い方について解説しました。
記事の内容をまとめます。