【JavaScript ~配列のメソッド~】勉強メモ⑦

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。


配列を操作するメソッド
-
- pushメソッド

　pushメソッドとは、<b>配列の最後に新しい要素を追加する</b>メソッド。
　pushメソッドの後の(　)の中に追加したい要素を入力する、
　pushメソッドの引数は、配列の最後に追加される。
　書き方は、<b>`配列.push(引数);`</b>

```.js:例
const cars = ["トラック", "バス", "タクシー"];

// pushメソッドを使って配列carsに、文字列「スポーツカー」を追加
cars.push("スポーツカー");

// 配列charactersを出力
console.log(cars);
```

```.text:出力結果
["トラック", "バス", "タクシー", "スポーツカー"]
```
<br>

- forEachメソッド

　forEachメソッドは<b>配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行う</b>メソッド。
　配列の要素が1つずつ順番にアロー関数の引数に代入され、処理内に書いてあるconsole.log( )が繰り返し実行。

```.text:書き方
配列 = [要素１, 要素２, 要素３];

配列.forEach((引数) => {処理});
// (引数) => {処理}の部分は → アロー関数
```
　アロー関数
　「function(){}」の部分を「( ) =>{}」と省略して書く事が出来る。

　ちなみに、引数に入っている関数はコールバック関数と呼ぶ。

```.js:例
const cars = ["トラック", "バス", "タクシー"];

// forEachメソッドを使って、配列carsの中身をすべて出力
cars.forEach((car) => {
  console.log(car);
});
```

```.text:出力結果
トラック
バス
タクシー
```
<br>

- findメソッド

　findメソッドとは、<b>コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出す</b>メソッド。
　コールバック関数の中を<b>`{return 条件}`と書くことで、条件に合う要素が戻り値</b>となる。
　findメソッドは、条件に合う要素が見つかった時点で終了するので、条件に合う最初の1つの要素しか取り出せ無い。

```.js:例
const numbers = [1, 3, 5, 7, 9];

// findメソッドを使って配列numbersから3の倍数を見つけ、定数foundNumberに代入
const foundNumber = numbers.find((number) => {
  return number%3 ===0;
});

// foundNumberを出力
console.log(foundNumber);
```

```.text:出力結果
// findメソッドは、条件式に合う1つ目の要素を取り出す
3
```
<br>

- 配列の要素がオブジェクトの場合

　この場合、条件に合うオブジェクトそのものが取り出される。

```.js:例
const cars = [
  {id: 1, type: "トラック", color: "白"},
  {id: 2, type: "バス", color: "黒"},
  {id: 3, type: "タクシー", color: "黄"},
];

// 定数carsからidが3のオブジェクトを見つけ、定数に代入
const foundCar = cars.find((car) => {
  return car.id===3;
});

// foundCarを出力
console.log(foundCar);
```

```.text:出力結果
{id: 3, type: "タクシー", color: "黄"}
```
<br>

- filterメソッド

　filterメソッドとは、<b>記述した条件に合う要素のみを取り出して新しい配列を作成する</b>メソッド。
　要は、条件に合う全ての要素を取り出します。

```.js:例
const numbers = [1, 2, 3, 4];

// filterメソッドを使ってnumbersから偶数を取り出し、定数foundNumbersに代入
const foundNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

// foundNumbersを出力
console.log(foundNumbers);
```

```.text:出力結果
[2, 4]
```
<br>

- 配列の要素がオブジェクトの場合

　この場合、条件に合うオブジェクトそのものが取り出される。

```.js:例
const cars = [
  {id: 1, type: "トラック", price: 3000},
  {id: 2, type: "バス", price: 6000},
  {id: 3, type: "タクシー", price: 1000},
];

// 定数carsからpriceが5000より大きいものを見つけ、定数に代入
const foundCar = cars.find((car) => {
  return car.price > 5000;
});

// foundCarを出力
console.log(foundCar);
```

```.text:出力結果
[{id: 1, type: "トラック", price: 3000},
  {id: 2, type: "バス", price: 6000},]
```
<br>

- mapメソッド

　mapメソッドとは、<b>配列内の全ての要素に処理を行い、その戻り値から新しい配列を作成</b>するメソッド。

```.js:例
const numbers = [1, 2, 3, 4];

// 定数numbersにmapメソッドを使って配列を作り、定数doubledNumbersに代入
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

// 定数doubledNumbersを出力
console.log(doubledNumbers);
```

```.text:出力結果
[2, 4, 6, 8]
```
<br>

- 配列の要素がオブジェクトの場合

　この場合、条件に合うオブジェクトそのものが取り出される。

```.js:例
const cars = [
  {id: 1, type: "トラック", color: "白"},
  {id: 2, type: "バス", color: "黒"},
  {id: 3, type: "タクシー", color: "黄"},
];

// 定数carsからpriceが5000より大きいものを見つけ、定数に代入
const foundCar = cars.find((car) => {
  return `${car.type} + : +${car.color}`;
});

// foundCarを出力
console.log(foundCar);
```

```.text:出力結果
[トラック:白, バス:黒]
```
<br>

- popメソッド

　popメソッドは、<b>配列の最後の要素を削除する</b>ためのメソッド。
　他の言語の場合は、popメソッドの引数に数字を渡すことで「何個分要素を取り除くか」という数を
　指定できますが、JavaScriptのpopメソッドでは出来ない。

```.js:例
const cars = ["トラック", "バス", "タクシー"];
// popメソッドを使って、配列の最後の要素を取り除く
cars.pop();
console.log(cars);
```

```.text:出力結果
["トラック", "バス"]
```
<br>

- shiftメソッド

　shiftメソッドは、<b>配列の先頭の要素を取り除くため</b>のメソッド。

```.js:例
const cars = ["トラック", "バス", "タクシー"];
// shiftメソッドを使って、配列の先頭の要素を取り除く
cars.shift();
console.log(cars);
```

```.text:出力結果
["バス", "タクシー"]
```
<br>

過去投稿記事
-
[【JavaScript ~変数・定数、if文・switch文~】勉強メモ](https://qiita.com/k-yasuhiro/items/1fb63f0881faf67bcb29)
[【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②](https://qiita.com/k-yasuhiro/items/6625942cc901feb6bfdf)
[【JavaScript ~関数について~】勉強メモ③](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~ファイルの分割について~】勉強メモ⑤](https://qiita.com/k-yasuhiro/items/209eda27bbc61ae961a1)
[【JavaScript 読み込み】勉強メモ⑥](https://qiita.com/k-yasuhiro/items/fe3fc2bd7b14fe4f3968)
[【JavaScript ~コールバック関数~】勉強メモ⑧](https://qiita.com/k-yasuhiro/private/ded7e2cad732774d059e)
[【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨](https://qiita.com/k-yasuhiro/items/7a72bf38d78b141d6fac)
[【JavaScript ~イベント~】勉強メモ⑩](https://qiita.com/k-yasuhiro/items/b0d4037d0edaae38a495)
[【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11](https://qiita.com/k-yasuhiro/items/fa586154cf7064eb7058)
[【JavaScript ~Mathオブジェクト~】勉強メモ12](https://qiita.com/k-yasuhiro/items/b931a15fb71322ee3cca)