はじめに

目的

本記事はJavaScript&TypeScriptの基礎知識を体系的に学び直して、生成AIに頼りすぎず自力でコーディングできるようになることを目的としています。
学んだ内容のアウトプットとして、シリーズ形式で書いていきます。

ゴール

TypeScriptでフルスタックアプリを個人開発する
チーム開発でタスクを渡された際に、メンバーのコードを読んで理解したり自分で実装したりできる状態にする（調べる回数をできるだけ少なくする）

シリーズ記事

【ノート】JavaScript基礎①（変数const, let・データ型と型変換）
【ノート】JavaScript基礎②（条件分岐）

配列操作

もとの配列

const baseArray = ["A", "B", "C", "D", "E"];

配列の要素へアクセスする

  //配列の先頭から数えた位置の要素へアクセスする
  //インデックスは0から始まる
  console.log("baseArrayの0番目の値：",baseArray[0]); //A 
    //存在しないインデックスの場合はundefinedが返る
  
  //配列の末尾から数えた位置の要素へアクセスする
  console.log("baseArrayの末尾から1番目の値：",baseArray.at(-1)); //E
    //正の数字を指定した場合は通常のインデックスと同じ

配列の要素数を取得する

 console.log("baseArrayの要素数：",baseArray.length); //5

分割代入

配列に格納された値を変数に分けて処理したいときに使う。
オブジェクトに対しても同じ操作ができる。

const [first, second] = baseArray;
  console.log("firstの値：",first); //A
  console.log("secondの値：",second); //B
    //変数名は任意の名前をつけられる

配列をもとに新しい配列を作る

  //指定範囲の要素を取得して、新しい配列を作成する
  const slicedArray = baseArray.slice(1, 4);
  console.log("baseArrayの1番目から3番目までの値：",slicedArray); //["B", "C", "D"]

注意点

開始インデックスは含むが、終了インデックスは含まない
引数を省略した場合、もとの配列のコピーを返す
負の数を指定した場合、配列の末尾から数えた位置を表す
もとの配列は変更されない
第一引数＝第二引数の場合と、第一引数>第二引数の場合は空の配列を返す

条件に合う要素が配列に含まれているか調べる

 //配列に指定した要素が含まれているかを調べる
  console.log("baseArrayにCが含まれているか：",baseArray.includes("C")); //true
  console.log("baseArrayにZが含まれているか：",baseArray.includes("Z")); //false
    //大文字と小文字は区別される
    //配列の要素がオブジェクトの場合、参照が同じでないとtrueにならない
  
  //コールバック関数にマッチする要素が配列に含まれているかを調べる
  const hasLongString = baseArray.some((value) => value.length > 1);
  console.log("baseArrayに長さが2以上の文字列が含まれているか：",hasLongString); //false
    //一つでもマッチする要素があればtrueを返し、マッチする要素がなければfalseを返す

要素の追加・削除・並び替え

配列の値を変更するメソッドには、もとの配列本体を変更するものと、元の配列は変更せず、その参照（コピー）の配列の値を変更するものがある。前者を破壊的メソッドといい、後者を非破壊的メソッドという。

破壊的メソッド

 //配列の末尾に要素を追加する
  baseArray.push("F");
  console.log("baseArrayにFを追加：",baseArray); //["A", "B", "C", "D", "E", "F"]

  //配列の末尾の要素を削除する
  const removedValue = baseArray.pop();
  console.log("baseArrayの末尾の要素を削除：",baseArray); //["A", "B", "C", "D", "E"]
  console.log("削除された値：",removedValue); //F

  //配列の先頭に要素を追加する
  baseArray.unshift("Z");
  console.log("baseArrayの先頭にZを追加：",baseArray); //["Z", "A", "B", "C", "D", "E"]

  //配列の先頭の要素を削除する
  const removedFirstValue = baseArray.shift();
  console.log("baseArrayの先頭の要素を削除：",baseArray); //["A", "B", "C", "D", "E"]
  console.log("削除された値：",removedFirstValue); //Z

  //配列の任意の位置に要素を追加・削除する
  //第一引数：開始インデックス、第二引数：削除する要素数、第三引数以降：追加する要素
　//削除する要素数を0にすると、指定した位置に要素を追加できる
  baseArray.splice(2, 1, "X", "Y");
  console.log("baseArrayの2番目の要素を1つ削除して、XとYを追加：",baseArray); //["A", "B", "X", "Y", "D", "E"]
  
  //配列の要素を並び替える
  baseArray.sort();
  console.log("baseArrayをアルファベット順に並び替え：",baseArray); //["A", "B", "D", "E", "X", "Y"]

非破壊的メソッド

 //配列の展開（スプレッド構文：配列に含まれる値を個別の値として扱えるようにする）
 //配列のカッコ[]をはずして、中身をばらすイメージ
  const newArray = [...baseArray, "F", "G"];
  console.log("baseArrayを展開して、FとGを追加した新しい配列：",newArray); //["A", "B", "C, "D", "E", "F", "G"]
  
  //配列の末尾に要素を追加する
  const appendedArray = baseArray.concat("F", "G");//方法1
  const appendedArray2 = [...appendedArray, "X"]; //方法2
  console.log("baseArrayの末尾にFとGを追加した新しい配列：",appendedArray); //["A", "B", "C", "D", "E", "F", "G"]
  console.log("appendedArrayの末尾にXを追加した新しい配列：",appendedArray2); //["A", "B", "C", "D", "E", "F", "G", "X"]

  //配列の末尾から要素を削除する
  const arrayAfterPop = baseArray.toSpliced(0, baseArray.length - 1); //方法1
  console.log("baseArrayの末尾の要素を削除した新しい配列：",arrayAfterPop); //["A", "B", "C", "D"]
  const arrayAfterPop2 = baseArray.slice(0, -1); //方法2
  console.log("baseArrayの末尾の要素を削除した新しい配列（slice使用）：",arrayAfterPop2); //["A", "B", "C", "D"]

コールバック関数を使った反復処理

  //配列の各要素に対して、指定した処理を一度ずつ実行する
  //戻り値はない
  baseArray.forEach((value, index) => {
    console.log(`baseArrayの${index}番目の値：`, value);
  }); 

  //配列の各要素に対して、指定した処理を一度ずつ実行し、新しい配列を作成する
  //もとの配列は変更されない
  const mappedArray = baseArray.map((value) => {
    return value.toLowerCase()
  });
  console.log("mappedArray",mappedArray); //["a", "b", "c", "d", "e"]

  //コールバック関数内の条件にマッチする最初の要素を返す
  const foundValue = baseArray.find((value) => {
    return value === "C"
  });
  console.log("foundValue：",foundValue); //C

  //コールバック関数がtrueを返すすべての要素を集めた新しい配列を返す
  const filteredArray = baseArray.filter((value) => {
    return value < "D"
  });
  console.log("filteredArray：",filteredArray); //["A", "B", "C"]
  
  //配列から配列以外の要素を含む任意の値を生成する
  const reducedValue = baseArray.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
  }, ""); //初期値は空文字列(number型の場合は0)
  console.log("reducedValue：",reducedValue); //ABCDE
    //初期値を省略した場合、配列の最初の要素が初期値となる