JavaScriptの基礎の基礎①

配列を操作するメソッド

①pushメソッド

pushメソッドとは、配列の最後に新しい要素を追加するメソッド

例）

const numbers = [1,2,3];
console.log(numbers);
numbers.push(4);  配列に新しい要素を追加する
console.log(numbers);

②forEachメソッド

forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッド

const numbers = [1,2,3];
numbers.forEach((number) => {console.log(number);});
　　　　　　　　　  <-------　コールバック関数 ---------->

・forEachの仕組み

配列内の要素が1つずつ順番にアロー関数の引数に代入され、処理が繰り返し実行される

配列 = [要素1, 要素2, 要素3];
   　　　    ①↘︎   ②↓   ↙︎③
 配列.forEach((  引数  ))  =>  { 処理 });
　　　　　　　　　アロー関数
　　　配列の中の要素を１つずつ取り出して同じ処理をする

＊アロー関数

　（引数）　　　　　＝＞　　　　｛処理｝
①要素１が入る　ーーーーー＞　要素１に対して処理
②要素２が入る　ーーーーー＞　要素２に対して処理
③要素３が入る　ーーーーー＞　要素３に対して処理

③findメソッド

コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出すメソッド

例）

const numbers = [1,3,5,7];
const foundNumber = numbers.find((number) => {
  return number > 3;
});

console.log(foundNumber);　　　　

コンソール
５
配列numbersの中から、3より大きい1つ目の要素である5がfoundNumberに代入されコンソールに出力されている

・findメソッドの使い方

配列numbersの要素が1つずつ引数numberに代入されて処理
　　　　　　　　　　↓
コールバック関数の中は { return 条件 } と書くことで、条件に合う要素が戻り値となる
　　　　　　　　　　↓
findメソッドは条件に合う要素が見つかった時に終了するので、条件に合う最初の1つの要素しか取り出せない

＊配列の要素がオブジェクトの場合もfindメソッドを使うことができる

例）

const characters = [
  {id : 1, name: "うさぎ"},
  {id : 2, name: "ぞう"}
];
const foundCharacter = characters.find((character) => {
  return character.id == 1;
});
console.log(foundCharacter);

コンソール
{id: 1, name: "うさぎ"}
character.id == 1の条件に合うオブジェクトそのものが取り出される

④filterメソッド

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

例）

const numbers = [1, 3, 5, 7];
const filteredNumbers = numbers.filter((number) => {
  return number > 3;
});
console.log(filteredNumbers);

コンソール
[5, 7]
条件に合う要素がすべて取り出されている

・filterの使い方

配列numbersの要素が1つずつ引数numberに代入される
　　　　　　　　　　　↓
その後、filterメソッド内で「3より大きい数字」かどうかを判定
　　　　　　　　　　　↓
条件に合う要素が定数filteredNumbersに配列として代入される

＊findメソッドと同様に、配列の要素がオブジェクトの場合もfilterメソッドを使うことができる

例）

const characters = [
  {name: "うさぎ”, age: 14},
  {name: "ぞう", age: 5},
  {name: "さる", age: 12}
];
const filteredCharacters = characters.filter((character) => {
  return character.age > 10;
});
console.log(filteredCharacters);

コンソール
[
  {name: "うさぎ", age: 14},
  {name: "さる", age: 12}
]
character.age > 10という条件に当てはまる要素がすべて取り出されている

⑤mapメソッド

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

例）

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((number) => {
  return number*2;
});
console.log(doubledNumbers);

コンソール
[2, 4, 6]
配列numbersの全ての数値が2倍された

・mapメソッドの使い方

配列numbersの要素が1つずつ引数numberに代入される
　　　　　　　　　　↓
mapメソッド内の 「要素を2倍する処理」 をした配列が新しく作られる
　　　　　　　　　　↓
定数doubledNumbersに配列として代入される

＊これまでのメソッドと同様に、配列のオブジェクト要素に対しても使うことができる

例）

const name = [
  {firstName: "Kate", lastName: "Jones"},
  {firstName: "Brian", lastName: "Smith"}
];
const fullNames = names.map((name) => {
  return name.firstName + name.lastName;
});
console.log(fullNames);

コンソール
["KateJones", "BrianSmith"]