STUDY MEMO

勉強した内容をアウトプットしていきます。

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

pushメソッド

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

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


<例>

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

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


結果 ↓
f:id:kabacho23:20200903233300p:plain:w300

forEachメソッド

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

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


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

<例>

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

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


結果 ↓
f:id:kabacho23:20200904064401p:plain:w80

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);


結果 ↓
f:id:kabacho23:20200904152656p:plain:w250



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);


結果 ↓
f:id:kabacho23:20200904154141p:plain:w250



mapメソッド


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

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

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

console.log(salesNames);


結果 ↓
f:id:kabacho23:20200904155641p:plain:w400