JavaScript配列slice()メソッドの3つの実用的な使用方法

Array.prototypeオブジェクトは、配列のサブセット要素を抽出し、新しい配列に追加できるslice()メソッドを提供します。このチュートリアルでは、JavaScript配列slice()メソッドの実用的な使用方法を説明します。

JavaScript配列slice()メソッドの概要

slice()メソッドは、以下の2つのオプションのパラメータを受け付けます。

slice(start, stop);

startとstopパラメータはどちらも省略可能です。

startパラメータは、抽出を開始する0ベースのインデックスを決定します。startがundefinedの場合、slice()は0から始まります。

stopパラメータは、その名のとおり、抽出を終了する0ベースのインデックスです。slice()メソッドは、stop-1までを抽出します。つまり、slice()メソッドは、stop位置の要素を新しい配列に含めません。stopパラメータを省略した場合、slice()メソッドは配列の長さをstopパラメータとして使用します。

slice()は、元の配列の要素を含む新しい配列を返します。slice()メソッドは、要素の浅いコピーのみを新しい配列に実行するという点を覚えておくことが重要です。さらに、元の配列は変更されません。

配列の複製

次の例に示すように、slice()を使用して配列を複製します。

var numbers = [1,2,3,4,5];
var newNumbers = numbers.slice();Code language: JavaScript (javascript)

この例では、newNumbers配列にはnumbers配列のすべての要素が含まれています。

配列の一部のコピー

slice()メソッドの一般的な用途は、元の配列を変更せずに配列の一部をコピーすることです。例を以下に示します。

var colors = ['red','green','blue','yellow','purple'];
var rgb = colors.slice(0,3);
console.log(rgb); // ["red", "green", "blue"]
Code language: JavaScript (javascript)

rgb配列には、colors配列の先頭3つの要素が含まれています。元の配列colorsはそのまま残ります。

配列のようなオブジェクトを配列に変換する

slice()メソッドは、配列のようなオブジェクトを配列に変換するために使用されます。例を以下に示します。

function toArray() {
  return Array.prototype.slice.call(arguments);
}

var classification = toArray('A','B','C');

console.log(classification); // ["A", "B", "C"]
Code language: JavaScript (javascript)

この例では、toArray()関数のargumentsは配列のようなオブジェクトです。toArray()関数内で、slice()メソッドを呼び出して、argumentsオブジェクトを配列に変換しています。

toArray()関数に渡す引数はすべて、新しい配列の要素になります。

よく見かけるもう一つの典型的な例として、NodeListを配列に変換する方法を以下に示します。

var p = document.querySelectorAll('p');
var list = Array.prototype.slice.call(p);
Code language: JavaScript (javascript)

この例では、まずdocument.querySelectorAll()を使用して、HTMLドキュメントのすべてのpノードを取得します。このメソッドの結果はNodeListオブジェクトであり、配列のようなオブジェクトです。次に、slice()メソッドを呼び出して、NodeListオブジェクトを配列に変換します。

場合によっては、次の構文が見られます。

var list = [].slice.call(document.querySelectorAll('p'));
Code language: JavaScript (javascript)

この例では、空の配列[]をインスタンス化し、空の配列を介してArray.prototypeメソッドのslice()メソッドに間接的にアクセスしています。効果は、Array.prototypeを直接使用する場合と同じです。

このチュートリアルでは、JavaScript配列slice()メソッドを使用して、配列全体またはそのサブセットをコピーし、配列のようなオブジェクトを配列に変換する方法を学習しました。