配列の要素を取り出す

配列から要素を取り出す

配列にある要素を取り出す方法は4種類あります。

• 配列の末尾から要素を取り出すpopメソッドを使う
• 配列の先頭から要素を取り出すshiftメソッドを使う
• 配列の指定した位置から要素を取り出すspliceメソッドを使う
• 元の配列に影響を与えない形で要素を取り出すsliceメソッドを使う

popメソッド、shiftメソッド、spliceメソッドを使った方法は要素を取り出すと元の配列から取り出した要素は削除されます。
sliceメソッドは元の配列には影響を与えず、取り出した要素から新しい配列を作成します。

以降はそれぞれのメソッドの使い方について順に解説していきます。

配列の末尾から要素を取り出す

popメソッドを使うと、配列の末尾にある要素を1つ取り出すことができます。
配列の末尾に要素を追加するpushメソッドの対になるメソッドです。

コード例

let animals = [ 'cat', 'dog', 'mouse'];

let item = animals.pop();
console.log(item); // mouse

item = animals.pop();
console.log(item); // dog

// 取り出した要素は配列から削除される
console.log(animals); // (1) ['cat']

配列の添字（キー）を指定せず、機械的に末尾から要素を取り出したいときに便利なメソッドです。
要素の取り出しは1つずつしか行えないため、複数取り出したいときは取り出す数だけメソッドを呼び出します。

配列の先頭から要素を取り出す

shiftメソッドを使うと、配列の先頭から要素を1つ取り出すことができます。
配列の先頭に要素を追加するunshiftメソッドの対になるメソッドです。

コード例

let animals = [ 'cat', 'dog', 'mouse'];

let item = animals.shift();
console.log(item); // cat

item = animals.shift();
console.log(item); // dog

// 取り出した要素は配列から削除される
console.log(animals); // (1) ['mouse']

popメソッドとは取り出す位置が正反対になりますが、取り出す要素の添字（キー）を指定する必要がなく機械的に取り出すことができる機能は共通です。
shiftメソッドも要素の取り出しは1つずつしか行えないため、複数取り出したいときは取り出す数だけメソッドを呼び出す必要があります。

配列の指定した位置から要素を取り出す

spliceメソッドは配列の指定した位置から、任意の数だけ要素を取得することができます。
以下の例では配列の2つ目以降の要素を全て取り出します。

コード例

let animals = [ 'cat', 'dog', 'mouse', 'penguin', 'fox'];

let item = animals.splice(1);
console.log(item); // (4) ["dog", "mouse", "penguin", "fox"]

console.log(animals); // ["cat"]

取り出した値はArrayオブジェクトになります。

配列の2つ目の要素を1つだけ取り出すときは、第2パラメータに取得する要素の数を指定します。

コード例

let animals = [ 'cat', 'dog', 'mouse', 'penguin', 'fox'];

let item = animals.splice( 1, 1);
console.log(item); // ["dog"]

console.log(animals); // (4) ["cat", "mouse", "penguin", "fox"]

配列の要素を2つ目〜末尾の1つ前の要素を取得するときは、パラメータを次のように指定しています。

コード例

let animals = [ 'cat', 'dog', 'mouse', 'penguin', 'fox'];

let item = animals.splice(1, (animals.length-2));
console.log(item); // (3) ["dog", "mouse", "penguin"]

console.log(animals); // (2) ["cat", "fox"]

popメソッドと同じように末尾から要素を取り出したいときは、開始位置に-1を指定します。

コード例

let animals = [ 'cat', 'dog', 'mouse', 'penguin', 'fox'];

let item = animals.splice(-1);
console.log(item); // ["fox"]

item = animals.splice(-1);
console.log(item); // ["penguin"]

console.log(animals); // (3) ["cat", "dog", "mouse"]

配列の末尾から2つ要素を取得することもできます。

コード例

let animals = [ 'cat', 'dog', 'mouse', 'penguin', 'fox'];

let item = animals.splice( -2, 2);
console.log(item); // (2) ["penguin", "fox"]

console.log(animals); // (3) ["cat", "dog", "mouse"]

配列に要素を追加する方法については、「配列に要素を追加する」を参照してください。

元の配列に影響を与えない形で要素を取り出す

sliceメソッドは配列から取り出す要素の開始位置と終了位置を指定して、取得した要素が入った新しい配列を作成します。
こちらのメソッドは取り出す元の配列からは要素を削除しないため、影響を与えない形で配列の要素を取り出すことができます。

sliceメソッドの第1パラメータには取り出す要素の開始位置、第2パラメータに終了位置を指定しますが、終了位置の添字の要素は取得する要素に含まれないため注意してください。

コード例

let animals = ['cat', 'dog', 'mouse', 'penguin', 'fox'];

// (1)配列の添字が3から末尾までの要素を取り出す
let item = animals.slice(3);
console.log(item); // (2) ['penguin', 'fox']

// (2)配列の添字が0から2までの要素を取り出す
item = animals.slice(0,3);
console.log(item); // (3) ['cat', 'dog', 'mouse']

// (3)第2パラメータの終了位置の要素は含まないため空になる
item = animals.slice(2,2);
console.log(item); // []

// (4)配列の添字が2の要素のみ取り出す
item = animals.slice(2,3);
console.log(item); // ['mouse']

// (5)配列の末尾から2つの要素を取り出す
item = animals.slice(-2);
console.log(item); // (2) ['penguin','fox']

// (6)配列の添字が2から末尾の1つ手前の要素を取り出す
item = animals.slice(2,-1);
console.log(item); // (2) ['mouse','penguin']

// 元の配列は影響を受けない
console.log(animals); // (5) ['cat', 'dog', 'mouse', 'penguin', 'fox']

以上、配列にある要素を取り出す方法についてでした。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。