［JS］配列の操作メソッド slice, splice, fill, copyWithin, concat
JavaScriptのArrayオブジェクトには、要素を操作するメソッドがあり、要素の取り出し、削除、挿入、更新、結合を行うことができます。それぞれのメソッドの機能や使い方について、解説します（サンプルあり）。
slice：要素の取り出し（生成）
sliceメソッドは、指定した範囲の要素を取り出した配列を生成して、返します。
第1引数で指定したインデックスから、第2引数で指定したインデックスの一つ前までを取り出します。
第2引数を省略すると末尾の要素まで取り出し、第1引数も省略すると全ての要素のコピーとなります。
インデックスに負数を指定すると、末尾からのオフセットとなります。
sliceメソッドは、呼び出した配列そのものには、影響を与えません。
配列.slice( 開始インデックス, 終了インデックス );サンプル
const array = [0, 1, 2, 3, 4, 5];
console.log(array.slice(2, 4));
//「[ 2, 3 ]」
console.log(array.slice(2, -1));
//「[ 2, 3, 4 ]」
console.log(array.slice(2));
//「[ 2, 3, 4, 5 ]」
console.log(array.slice());
//「[ 0, 1, 2, 3, 4, 5 ]」splice：要素の削除と挿入
spliceメソッドは、指定した範囲の要素の削除と、要素の挿入をすることができます。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、削除した要素です。
第1引数で指定したインデックスから、第2引数で指定した数だけ要素を削除します。
第2引数を省略した場合は、末尾の要素まで削除します。
インデックスに負数を指定すると、末尾からのオフセットとなります。
第3引数を指定した場合は、第1引数のインデックスに、要素として挿入します。
配列を渡しても展開されることはなく、配列のまま一つの要素として追加されます。
配列の要素を展開して追加する場合は、スプレッド演算子（...）を使用する必要があります。
また、配列同士を結合して新たな配列を生成する場合は、concatメソッドを使用します。
配列.splice( 削除・挿入の開始インデックス, 削除する要素数, 挿入する要素 );
// 削除だけ行う場合
配列.splice( 削除の開始インデックス, 削除する要素数 );
// 挿入だけ行う場合
配列.splice( 挿入の開始インデックス, 0, 挿入する要素 );サンプル
const array = [0, 1, 2, 3, 4, 5];
console.log(array.splice(2, 2));
//「[ 2, 3 ]」
console.log(array);
//「[ 0, 1, 4, 5 ]」
console.log(array.splice(2, 0, 2, 3));
//「[]」
console.log(array);
//「[ 0, 1, 2, 3, 4, 5 ]」
console.log(array.splice(-3, 2, ...[7, 8, 9]));
//「[ 3, 4 ]」
console.log(array);
//「[ 0, 1, 2, 7, 8, 9, 5 ]」fill：要素の更新
fillメソッドは、指定した値で、配列の要素を更新します。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、更新後の配列です。
第1引数で指定した値で、第2引数で指定したインデックスから、第3引数で指定したインデックスの一つ前までを更新します。
第3引数を省略すると開始インデックスから末尾までを、第2引数も省略すると全ての要素を更新します。
インデックスに負数を指定すると、末尾からのオフセットとなります。
配列.fill( 値, 開始インデックス, 終了インデックス );サンプル
const array = [0, 1, 2, 3, 4, 5];
console.log(array.fill(0));
//「[ 0, 0, 0, 0, 0, 0 ]」
console.log(array.fill(3, 3));
//「[ 0, 0, 0, 3, 3, 3 ]」
console.log(array.fill(6, 1, 3));
//「[ 0, 6, 6, 3, 3, 3 ]」fillメソッドを利用して、指定サイズで生成した配列を、ゼロ埋めすることができます。
const array = new Array(5).fill(0);
console.log(array);
//「[ 0, 0, 0, 0, 0 ]」copyWithin：他要素の値で更新
copyWithinメソッドは、指定した範囲の要素をコピーし、別の要素の値を更新します。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、更新後の配列です。
第1引数で指定したインデックスが、更新する要素の先頭となります。
第2引数で指定したインデックスから、第3引数で指定したインデックスの一つ前までのコピーで更新します。
第3引数を省略した場合、末尾までをコピーします。
インデックスに負数を指定すると、末尾からのオフセットとなります。
copyWithinメソッドは高速なので、型付き配列での数値演算で使用されます。
配列.copyWithin( 更新するインデックス, コピーの開始インデックス, コピーの終了インデックス );サンプル
const array = [0, 1, 2, 3, 4, 5];
console.log(array.copyWithin(1));
//「[ 0, 0, 1, 2, 3, 4 ]」
console.log(array.copyWithin(0, -2));
//「[ 3, 4, 1, 2, 3, 4 ]」
console.log(array.copyWithin(0, 2, 4));
//「[ 1, 2, 1, 2, 3, 4 ]」concat：配列の結合（生成）
concatメソッドは、呼び出した配列の末尾に要素を追加した配列を生成して、返します。
引数に配列が含まれる場合は、展開して追加されます。
ただし、引数の配列の展開は、一度しか行われません。
concatメソッドは、呼び出した配列そのものには、影響を与えません。
新たな配列を生成するのは、負荷が高い処理のため、x = x.concat( 追加要素 )というコードは避けるべきです。
既存の配列への追加処理を行う場合は、pushメソッドやspliceメソッドを使用します。
const array = [0];
console.log(array.concat(1, 2));
//「[ 0, 1, 2 ]」
console.log(array.concat([3, 4]));
//「[ 0, 3, 4 ]」
console.log(array.concat([5, [6, 7]]));
//「[ 0, 5, [6, 7] ]」まとめ
JavaScriptの配列の要素を操作するメソッドについて、解説しました。
それぞれの用途は、以下のようになります。
- slice：取り出し（生成）
- splice：削除と挿入
- fill：値の更新
- copyWithin：値のコピー&ペースト
- concat：結合（生成）