配列の指定した範囲の要素をコピーして新しい配列を作成する

配列に含まれる要素の中で指定した範囲の要素をコピーして、新しい配列として取得することができます。インデックス 0 から最後の要素までを指定することで元の配列をコピーした配列を作成することもできます。ここでは JavaScript で配列の指定した範囲の要素をコピーして新しい配列を作成する方法について解説します。

※ 配列をコピーするには concat メソッドでも行うことができます。詳しくは「concatメソッドを使った配列のコピー」を参照されてください。

(Last modified: 2023年02月03日)

指定した範囲の要素を持つ新しい配列を作成する(sliceメソッド)

Array オブジェクトの slice メソッドを使うと、引数に指定した範囲の要素を持つ新しい配列を作成できます。書式は次の通りです。

配列名.slice()
配列名.slice(開始インデックス)
配列名.slice(開始インデックス, 終了インデックス)

開始インデックスで指定した要素から、終了インデックスの要素の直前の要素までを持つ新しい配列を返します。開始インデックスを省略した場合は 0 (配列の最初の要素)、終了インデックスを省略した場合は 配列名.length (結果として配列の最後の要素まで)が指定したものとして扱われます。

次のサンプルをみてください。

let result = [75, 68, 92, 84, 90];

let newResult = result.slice(1, 3);
console.log(newResult);
>> [68, 92]

今回のサンプルでは開始インデックスが 1 、終了インデックスが 3 が指定されていますので、新しく取得する配列は インデックス 1 から 2 までの要素を持つ配列となります。

もう一つサンプルをみてください。

let result = [75, 68, 92, 84, 90];

let newResult = result.slice();
console.log(newResult);
>> [75, 68, 92, 84, 90]

今回のサンプルでは開始インデックスと終了インデックスがそれぞれ省略されているので、新しく取得する配列は インデックス 0 から 4 (配列.length は配列の最後の要素のインデックス +1 となるため)までの要素を持つ配列となります。結果として元の配列を複製したものが作成されます。

なお同じ要素を持つ配列が作成されますが、それぞれの配列は別に存在しているため、どちらかの配列の値に変更を加えても、もう片方の配列には影響を与えません。ただし slice メソッドが複製するのは 1 次元の要素までです。元の配列の要素の値として配列が格納されていた場合、その要素が参照する配列は複製された配列の要素も同じ配列を参照します。

let result = [['Yamada', 75], ['Suzuki', 68]];
let newResult = result.slice(0, 1);

newResult[0][1] = 84;
console.log(newResult[0]);
>> ["Yamada", 84]

console.log(result[0]);
>> ["Yamada", 84]

slice メソッドを使って配列の指定した範囲の要素を持つ新しい配列を作成しましたが、元の配列の要素は別の配列を参照しており、これは複製した配列の要素も同じ配列を参照します。その為、どちらかの配列で要素が参照している配列に対して変更を加えると、同じ配列をもう片方の配列の要素にも影響します。

-- --

JavaScript で配列の指定した範囲の要素をコピーして新しい配列を作成する方法について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。