【JavaScript】配列を操作するメソッド

pushメソッドとは

配列に新たな要素を加えるメソッドです。

const hairetu = [1,2,3];
hairetu.push(4);
console.log(hairetu);

出力される数字は次のようになります。

[1, 2, 3, 4]

forEachメソッドとは

forEachメソッドは配列の要素を引数として、繰り返し処理を行うメソッドです。「配列名.forEach((引数) =>{処理});」として書きます。

また、forEach( )内に含まれる関数をコールバック関数と呼びます。コールバック関数とは別の関数に呼び出してもらうための関数のことです。

const characters = ["ねこ", "いぬ", "ぶた", "さる"];

characters.forEach((hikisu)=>{
  console.log(hikisu);
});

実行結果は下のようになります。

ねこ
いぬ
ぶた
さる

findメソッドとは

findメソッドは配列の中から特定の要素を見つけ出すことができます。引数に配列の要素を加え、「ぶた」と一致する要素をreturnで返し、定数nameに代入します。

const characters = ["ねこ", "いぬ", "ぶた", "さる"];

const name = characters.find((hikisu) =>{
  return hikisu === "ぶた"
});

console.log(name);

実行結果は、「ぶた」のみが表示されます。

findメソッドとオブジェクト

findメソッドは配列の要素がオブジェクトでも使用することができます。findの後ろの引数はオブジェクトになっているため、その後はオブジェクト.プロパティで要素を呼び出すことができます。

const animal = [
  {id: 1, name: "ねこ", age: 6},
  {id: 2, name: "いぬ", age: 2},
  {id: 3, name: "ぶた", age: 10},
  {id: 4, name: "さる", age: 2}
];

const foundCharacter = animal.find((hikisu)=>{
  return hikisu.id === 3;
});

console.log(foundCharacter);

結果は次のようになります。

{
  age: 10,
  id: 3,
  name: "ぶた"
}

filterメソッドとは

findメソッドは合致した一番最初の要素しか取り出すことができないというデメリットがあります。合致したものすべてを取り出すのがfilterメソッドです。

下のコードでは、bignumberに5より大きい数が新しい配列として代入されています。

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

const bignumber = numbers.filter((hikisu)=>{
  return hikisu > 5;
});

console.log(bignumber);

上のコードを実行すると次のようになります。

[6, 7, 8, 9]

filterメソッドとオブジェクト

配列がオブジェクトであってもfindメソッド同様に使うことができます。

const animal = [
  {id: 1, name:"いぬ", age: 14},
  {id: 2, name:"ねこ", age: 5},
  {id: 3, name:"さる", age: 100}
];

const underTwenty = animal.filter((animals)=>{
  return animals.age < 20;
});

console.log(underTwenty);

mapメソッドとは

mapメソッドとは配列全体に処理を行い、戻り値から新しい配列を作成するメソッドです。

const numbers = [1,2,3,4,5,6,7,8,9,10];

const double = numbers.map((hikisu)=>{
  return hikisu*2;
});

console.log(double);

結果は次のようになります。

[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

また、オブジェクトを含む配列でも使用することができます。

const names = [
  {firstName: "田中", lastName: "たろう"},
	{firstName: "織田", lastName: "信長"},

];

const fullNames = names.map((hikisu)=>{
  return hikisu.firstName+hikisu.lastName;
});

console.log(fullNames);