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

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

配列を操作するメソッド

• pushメソッド

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

例

const cars = ["トラック", "バス", "タクシー"];

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

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

出力結果

["トラック", "バス", "タクシー", "スポーツカー"]

• forEachメソッド

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

書き方

配列 = [要素１, 要素２, 要素３];

配列.forEach((引数) => {処理});
// (引数) => {処理}の部分は → アロー関数

　アロー関数
　「function(){}」の部分を「( ) =>{}」と省略して書く事が出来る。

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

例

const cars = ["トラック", "バス", "タクシー"];

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

出力結果

トラック
バス
タクシー

• findメソッド

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

例

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

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

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

出力結果

// findメソッドは、条件式に合う1つ目の要素を取り出す
3

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

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

例

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

出力結果

{id: 3, type: "タクシー", color: "黄"}

• filterメソッド

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

例

const numbers = [1, 2, 3, 4];

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

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

出力結果

[2, 4]

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

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

例

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

出力結果

[{id: 1, type: "トラック", price: 3000},
  {id: 2, type: "バス", price: 6000},]

• mapメソッド

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

例

const numbers = [1, 2, 3, 4];

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

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

出力結果

[2, 4, 6, 8]

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

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

例

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

出力結果

[トラック:白, バス:黒]

• popメソッド

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

例

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

出力結果

["トラック", "バス"]

• shiftメソッド

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

例

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

出力結果

["バス", "タクシー"]

過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12