まくまくJavaScriptノート
配列から部分配列を取得する (slice, splice)
2018-09-07

slice メソッド

Array#slice() メソッドを使用すると、ある配列の部分配列(スライス)を取得することができます。 最初のパラメータで部分配列の最初のインデックスを指定し、2番目のパラメータで最後のインデックスを指定します(この要素自身は含まれません)。 2番目のパラメータを省略すると、末尾までの部分配列を作成します。

var a = [1, 2, 3, 4, 5];
var b = a.slice(0, 3);  //=> [ 1, 2, 3 ]
var c = a.slice(1, 4);  //=> [ 2, 3, 4 ]
var d = a.slice(3);     //=> [ 4, 5 ]

インデックスとして負の値を使用すると、末尾からの位置で指定することができます。 -1 が末尾の要素、-2 がそのひとつ前の要素を示します。

var a = [1, 2, 3, 4, 5];
var b = a.slice(2, -1);  //=> [ 3, 4 ]

部分配列の各要素は浅いコピー(シャローコピー)によって作成されるので、部分配列の要素の値を変更したときに、元の配列の要素が間接的に変更されることがあることに注意してください。

var a = [1, 2, [3, 4, 5]];
var b = a.slice(1);  //=> [ 2, [ 3, 4, 5 ] ]
b[1][0] = 100;
console.log(a);      //=> [ 1, 2, [ 100, 4, 5 ] ] ★元の配列の内容が変わっている

splice メソッド

Array#splice() メソッドを使用すると、ある配列の部分配列を抽出するとともに、元の配列からそれらの要素を削除することができます。 つまり、ある配列を2つの配列に分離します。 slice メソッド名前が似ているので注意してください。

1つ目のパラメータで分離を開始する位置、2つ目のパラメータで要素数を指定します。

var a = [1, 2, 3, 4, 5];
var b = a.splice(1, 3);
console.log(a);  //=> [ 1, 5 ]
console.log(b);  //=> [ 2, 3, 4 ]

slice メソッドと同様、2番目のパラメータを省略すると、末尾までを指定したことになります。

var a = [1, 2, 3, 4, 5];
var b = a.splice(3);
console.log(a);  //=> [ 1, 2, 3 ]
console.log(b);  //=> [ 4, 5 ]
2018-09-07