<javascript ES6> 配列で使用できるメソッドについて

pushメソッド

pushメソッドは、配列の最後に要素を加えるためのメソッド。

配列名.push("追加したい要素");

＜例＞

const foods = ["卵","アボガド","トマト"];

foods.push("きゅうり");
console.log(foods);

結果 ↓

forEachメソッド

forEachメソッドは、配列の要素を順に取り出して繰り返し処理を行うメソッド。

配列名.forEach((アロー関数の引数名) => {
・・・処理
});

引数(ここでいうとforEach()の中身)に入っている関数はコールバック関数と呼ばれる。
また、forEachメソッドにはアロー関数も含まれており、配列の要素が順にアロー関数の引数に入るようになっている。

＜例＞

const foods = ["卵","アボガド","トマト"]; 

foods.forEach((food) => {
  console.log(food);  
});

結果 ↓

findメソッド

コールバック関数内の処理部分にreturn 条件;を記載し、それに一致した最初の要素を配列から取り出すメソッド。

＜例＞

const foods = [
  {id: 1, name: "卵", price: 20},
  {id: 2, name: "アボガド", price: 100},
  {id: 3, name: "トマト", price: 80},
];

const foundFoods = foods.find((food) => {
  return food.id === 3;
});

console.log(foundFoods);

結果 ↓

filterメソッド

コールバック関数内の処理部分にreturn 条件;を記載し、それに一致した要素を配列から取り出すメソッド。
find関数との相違点は一致する要素を全て取り出す点。

＜例＞

const foods = [
  {id:1,name:"卵",price:20},
  {id:2,name:"アボガド",price:100},
  {id:3,name:"トマト",price:80}
];

const UnderHundredPrice = foods.filter((food) => {
  return food.price < 100;
});

console.log(UnderHundredPrice);

結果 ↓

mapメソッド

配列内の全ての要素に、コールバック関数内の戻り値で記載された処理を行い、新しい配列を作るメソッド。
＜例＞

const foods = [
  {from: "島根産", name: "卵"},
    {from: "メキシコ産", name: "アボカド"},
    {from: "熊本産", name: "トマト"},
];

const salesNames = foods.map((food) => {
  return food.from + food.name;  
}
);

console.log(salesNames);

結果 ↓