【初心者向け】JavaScriptの配列操作「Array.copyWithin」の使い方を分かりやすく解説

Array.copyWithinメソッドは、JavaScriptの配列の一部を別の位置にシャローコピーする機能を提供します。元の配列の長さは変更されず、コピー範囲外の要素はそのまま保持されます。

構文

array.copyWithin(target, start, end);

引数

• end (オプション): コピーの終了インデックス (デフォルトは array.length)
• start (オプション): コピー元の開始インデックス (デフォルトは target)
• target: コピー先の開始インデックス

詳細

• コピー範囲が重なる場合は、後続の要素が優先的にコピーされます。
• コピー操作は破壊的です。つまり、target 位置以降の要素は、コピーされた要素で置き換えられます。
• end は含まれません。
• コピーは start から end - 1 までの要素を対象とし、target 位置から開始されます。
• end は、コピーの終了位置を指定するゼロ基底のインデックスです。省略した場合、array.length と同じ値になります。負の値の場合は、配列の末尾からの位置を指定します。
• start は、コピー元の開始位置を指定するゼロ基底のインデックスです。省略した場合、target と同じ値になります。負の値の場合は、配列の末尾からの位置を指定します。
• target は、コピー先の開始位置を指定するゼロ基底のインデックスです。負の値の場合は、配列の末尾からの位置を指定します。

const originalArray = [1, 2, 3, 4, 5];

// 2番目から4番目までの要素を5番目以降にコピー
const modifiedArray = originalArray.copyWithin(4, 2, 4);
console.log(modifiedArray); // [1, 2, 3, 4, 4]

// 末尾から3番目と2番目の要素を0番目と1番目にコピー
const modifiedArray2 = originalArray.copyWithin(0, -3, -2);
console.log(modifiedArray2); // [3, 4, 1, 2, 5]

• Array.copyWithin は、ES2015で導入された比較的新しいメソッドです。古いブラウザーではサポートされていない可能性があることに注意してください。
• より複雑な操作には、slice や splice などの他の配列操作メソッドと組み合わせて使用することができます。
• Array.copyWithin は、配列の一部を反転させたり、特定の要素を別の場所に移動したりするのに役立ちます。

---

要素を別の位置にコピーする

const originalArray = [1, 2, 3, 4, 5];

// 2番目から4番目までの要素を5番目以降にコピー
const modifiedArray = originalArray.copyWithin(4, 2, 4);
console.log(modifiedArray); // [1, 2, 3, 4, 4]

この例では、originalArray の 2番目から4番目までの要素 ([3, 4]) を、5番目以降にコピーしています。結果として、modifiedArray は [1, 2, 3, 4, 4] となります。

末尾から要素をコピーする

const originalArray = [1, 2, 3, 4, 5];

// 末尾から3番目と2番目の要素を0番目と1番目にコピー
const modifiedArray = originalArray.copyWithin(0, -3, -2);
console.log(modifiedArray); // [3, 4, 1, 2, 5]

この例では、originalArray の末尾から3番目と2番目の要素 ([4, 5]) を、0番目と1番目にコピーしています。結果として、modifiedArray は [3, 4, 1, 2, 5] となります。

負のインデックスを使用して範囲を指定する

const originalArray = [1, 2, 3, 4, 5];

// 3番目から末尾までの要素を0番目以降にコピー
const modifiedArray = originalArray.copyWithin(0, 3);
console.log(modifiedArray); // [4, 5, 1, 2, 3]

この例では、originalArray の 3番目から末尾までの要素 ([4, 5]) を、0番目以降にコピーしています。結果として、modifiedArray は [4, 5, 1, 2, 3] となります。

const originalArray = [1, 2, 3, 4, 5];

// 2番目から4番目までの要素を3番目以降にコピー
const modifiedArray = originalArray.copyWithin(3, 2, 4);
console.log(modifiedArray); // [1, 2, 3, 4, 4]

---

以下に、Array.copyWithin の代替となるいくつかの方法をご紹介します。

slice と splice を組み合わせる

slice と splice メソッドを組み合わせることで、Array.copyWithin と同等の機能を実現することができます。

function copyWithin(array, target, start, end) {
  const start = start || target;
  const end = end || array.length;
  return array.splice(target, end - start, ...array.slice(start, end));
}

const originalArray = [1, 2, 3, 4, 5];
const modifiedArray = copyWithin(originalArray, 4, 2, 4);
console.log(modifiedArray); // [1, 2, 3, 4, 4]

この例では、copyWithin という名前の関数を作成し、slice と splice メソッドを使用して Array.copyWithin と同等の機能を実現しています。

for ループを使用する

よりシンプルな方法として、for ループを使用して要素を個別にコピーすることができます。

function copyWithin(array, target, start, end) {
  const start = start || target;
  const end = end || array.length;
  for (let i = start; i < end; i++) {
    array[target + i - start] = array[i];
  }
}

const originalArray = [1, 2, 3, 4, 5];
const modifiedArray = copyWithin(originalArray, 4, 2, 4);
console.log(modifiedArray); // [1, 2, 3, 4, 4]

この例では、copyWithin という名前の関数を作成し、for ループを使用して要素を個別にコピーしています。

ライブラリを使用する

Lodash や Ramda などの JavaScript ライブラリには、Array.copyWithin と同等の機能を提供するユーティリティ関数が含まれている場合があります。

const _ = require('lodash');

const originalArray = [1, 2, 3, 4, 5];
const modifiedArray = _.copyWithin(originalArray, 4, 2, 4);
console.log(modifiedArray); // [1, 2, 3, 4, 4]

この例では、Lodash ライブラリの _.copyWithin 関数を使用して Array.copyWithin と同等の機能を実現しています。