Webエンジニア目指して#21 - misokatsu

どうも交代勤そろそろ潮時マンです

コードの埋め込みなんか違うよなあって思ってたんですけど、 Markdown記法なんてものがあったんですね！早速使っていきます

今回はJavaScript VIです

配列の末尾に要素を追加する

変数名.push()

使用例

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

実行結果
-----
[ 1, 2, 3 ]
[ 1, 2, 3, 4 ]

配列の要素ごとに処理をさせる(forEachメソッド)

配列名.forEach

使用例

const sample = ["a","b","c","d"];

sample.forEach((ArrayNo)=>{
  console.log(ArrayNo);
});

実行結果
-----
a
b
c
d

こんな感じでメソッドの中にある引数と処理のセットをコールバック関数というらしいです。仕組みはわかるんですけど言葉にしようとすると難しい...

配列の中の条件に合う最初の要素を探す(findメソッド)

配列名.find

使用例

条件「配列名numbersの値が3の倍数」

const numbers = [1, 3, 5, 7, 9];

const foundNumber=numbers.find((number)=>{
  return number%3===0;
})

console.log(foundNumber);

実行結果
-----
3

findメソッドはこんな感じでコールバック関数の中身で見つけたい条件を記述します。そして条件に合う要素を見つけたら終了します。なので最初の1つ目しか処理をしてくれません。下のようにオブジェクトも扱う事もできます

条件「配列名charactersのプロパティidの値が3」

const characters = [
  {id: 1, name: "茄子"},
  {id: 2, name: "もやし",},
  {id: 3, name: "ハム",},
];

const foundCharacter=characters.find((character)=>{
  return character.id===3;
})

console.log(foundCharacter);

実行結果
-----
{ id: 3, name: 'ハム' }

配列の中の条件に合う要素を探す(filterメソッド)

findメソッドの複数版ですね。

配列名.filter

使用例

条件「配列名charactersのプロパティidの値が奇数」

const characters = [
  {id: 1, name: "茄子"},
  {id: 2, name: "もやし",},
  {id: 3, name: "ハム",},
];

const foundCharacter=characters.filter((character)=>{
  return character.id%2!==0;
})

console.log(foundCharacter);

実行結果
-----
[ { id: 1, name: '茄子' }, { id: 3, name: 'ハム' } ]

配列内の全要素に処理をする

配列名.map

returnを使って既存の配列を元に新しい配列を作ることができます。

使用例1

const oddNo=[1,3,5,7];
console.log(oddNo);

const evenNo=oddNo.map((number)=>{
  return number+1;
});
console.log(evenNo);

実行結果
-----
[ 1, 3, 5, 7 ]
[ 2, 4, 6, 8 ]

使用例2

const ingredients=[
  {id:1,flavor:"味噌",main:"うどん"},
  {id:2,flavor:"醤油",main:"ラーメン"}
];
console.log(ingredients[0].flavor);
console.log(ingredients[1].main);

const dish=ingredients.map((variation)=>{
  return variation.flavor + variation.main;
});
console.log(dish);

実行結果
-----
味噌
ラーメン
[ '味噌うどん', '醤油ラーメン' ]

forEachもmapも配列の全要素で処理をする。ん？何が違うの？と思ったんで試してみたところ、
forEachには返り値が無いしmapはconsole.logが実行されませんでした。
つまり
・forEachは関数の実行
・mapは配列作成って感じですね。

JS VI、おわり！

ではでは。