はじめに

JavaScriptには、定義した配列を操作する様々なメソッドがある。

前提知識：【JavaScript】配列【自己学習】

要素の追加・削除

push/popメソッド

配列の末尾に新たな要素を追加するにはpushメソッドを用いる。また、配列の末尾の要素を取得し、削除するにはpopメソッドを用いる。

push_pop-1.js

const numbers = [1, 2, 3, 4];

numbers.push(5); //配列numbersの要素の末尾に5を追加

console.log(numbers);  // > [1, 2, 3, 4, 5]

console.log(numbers.pop()); // > 5

console.log(numbers); // > [1, 2, 3, 4]

上記のコードではnumbers.push(5)としたことで、配列の末尾に5が追加された。

また、console.log(numbers.pop())で配列の末尾の5を取得したが、この要素は出力されたと同時に配列から削除されている。

unshift/shiftメソッド

先述したpush/popメソッドに対して、配列の先頭の要素を追加と削除を行うにはunshiftメソッドとshiftメソッドを用いる。

unshift_shift-1.js

const numbers = [2, 3, 4, 5];

numbers.unshift(1);  //配列numbersの要素の先頭に1を追加

console.log(numbers); // > [1, 2, 3, 4, 5]

console.log(numbers.shift()); // > 1

console.log(numbers);  // > [2, 3, 4, 5]

上記のコードではnumbers.unshift(5)としたことで、配列の先頭に1が追加された。

また、console.log(numbers.shift(1))で配列の先頭の1を取得後、配列から削除されている。

要素の繰り返し処理

forEachメソッド

forEachメソッドを用いることで、配列内の要素で繰り返し処理を行うことができる。

forEach-1.js

const numbers = [1, 2, 3, 4];

numbers.forEach(function(number) {
  console.log(number * number);  // > 1、 4、 ９、 16
});

配列名.forEach(function(引数) ｛処理｝)と定義すると、引数内に要素が順番に代入され、繰り返し処理が行われる。

function(引数) {処理}の部分は、アロー関数（引数） => {処理}に置き換えることもできる。

また、pushメソッドと組み合わせることで、既存の配列から新たな配列を作成することも可能になる。

forEach-2.js

const numbers = [1, 2, 3, 4];
const newNumbers = []; // 空の配列を定義

numbers.forEach((number) => {
  let newNumber = number * number; //処理の結果を変数に代入
  newNumbers.push(newNumber);  //変数の値を配列に追加
});

console.log(newNumbers);  // > [1, 4, 9, 16]

numbers.forEach（）では、引数numberを用いた処理の結果が変数newNumberの値として繰り返し代入され、その値を配列newNumbersに追加している。

mapメソッド

既存の配列から新しい配列の作成は、mapメソッドを用いて行うこともできる。

map-1.js

const numbers = [1, 2, 3, 4];

const newNumbers = numbers.map((number) =>{
  return number * number;
});

console.log(newNumbers);  // > [1, 4, 9, 16]

mapメソッドは既存の配列の値を利用して戻り値を返すことで、新しい配列を作成する。

上記のコードでは、numbers.map()の処理によって作成された新しい配列は定数newNumbersに代入されている。

forEach-2.jsと結果は同じだか、mapメソッドを用いた方がより簡潔に記述できるのがわかる。

要素の判定、絞り込み

every/someメソッド

配列の要素の判定にはeveryメソッドとsomeメソッドが用いられる。

everyメソッドは要素すべてが条件を満たすかを判定するのに対し、someメソッドは要素のいずれかが条件を満たすかを判定する。

every_some-1.js

const numbers = [1, 2, 3, 4];

//everyメソッドによる判定
const evenNumbers = numbers.every((number) => {
  return number % 2 === 0;  //真偽値はfalse
});

//定数evenNumbersを条件式とした条件分岐
if (evenNumbers) {
  console.log("すべての数字は偶数です");
} else {
  console.log("偶数ではない数字が含まれています");
}
// > 偶数ではない数字が含まれています

numbers.every()では、配列numbersの要素すべてが偶数であるかを判定し、真偽値を返すよう定義されている。

真偽値はfalseとなり、戻り値は定数evenNumbersに代入されるため、if構文で条件分岐を行うとelse側の処理である「奇数が含まれています」と出力される。

every_some-2.js

const numbers = [1, 2, 3, 4];

//someメソッドによる判定
const oddNumbers = numbers.some((number) => {
  return number % 2 === 1;  //真偽値はtrue
});

//定数oddNumbersを条件式とした条件分岐
if (oddNumbers) {
  console.log("奇数が含まれています");
} else {
  console.log("奇数は含まれていません");
}
// > 奇数が含まれています

一方numbers.some()では、配列numbersの要素に奇数が1つでも含まれているかを判定し、真偽値を返すよう定義されている。

真偽値はtrueとなり、戻り値は定数oddNumbersに代入されるため、if構文で条件分岐を行うとif側の処理である「奇数が含まれています」と出力される。

要素の絞り込み

filterメソッド

filterメソッドでは、条件に一致した要素のみを取り出して、新しい配列を作成することができる。

filter-1.js

const numbers = [1, 2, 3, 4, 5, 6];

//filterメソッドによる判定
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;  
});

console.log(evenNumbers); // > [2, 4, 6]

numbers.filter()では、配列numbersの要素のうち、偶数であるもののみを戻り値として返して新しい配列を作成している。作成された配列は定数evenNumbersに代入されている。

find/findIndexメソッド

findメソッドは、条件に一致した一番最初の要素を取り出すことができる。

また、findIndexメソッドは、条件に一致した一番最初の要素のインデックス番号を取り出すことができる。

find_findIndex.js

const members = [
  {number: 1, name: "山田太郎", sex: "male"},
  {number: 2, name: "田中一郎", sex: "male"},
  {number: 3, name: "鈴木花子", sex: "female"},
  {number: 4, name: "佐藤大輔", sex: "male"}
];

//findメソッドによる絞り込み
const findMember = members.find((member) => {
  return member.sex === "female";
});

console.log(findMember);  // > {number: 3, name: "鈴木花子", sex: "female"}

//findIndexメソッドによる絞り込み
const findMembersIndex = members.findIndex((member) => {
  return member.sex === "female";
});

console.log(findMembersIndex);  // > 2

members.find()では、配列の要素であるオブジェクトのうち、プロパティsexがfemaleである最初のオブジェクトを戻り値として返し、定数findMemberに代入されている。

また、members.findIndex()では、members.find()と同じ条件を定義しているが、戻り値としてインデックス番号が返され、定数findIndexに代入されている。