JavaScriptの基礎的な文法とメソッド一覧

javascriptの基礎的な文法とよく見かけるメソッドを記載しました。 自分用メモです

文法

条件分岐

const number = 10;

if (number > 0) {
  console.log("+の値");
} else if (number < 0) {
  console.log("-の値");
} else {
  console.log("0");
}

三項演算子を用いた条件分岐

let a = 15;
let message = a > 10 ? "aは10以上" : "aは10以下";
console.log(message);

※三項演算子は、条件式が true の場合は?の左側の式を、false の場合は:の右側の式を評価。

switch文で条件分岐

const dayOfWeek = new Date().getDay();

switch(dayOfWeek) {
  case 0:
    console.log("今日は日曜日です。");
    break;
  case 1:
    console.log("今日は月曜日です。");
    break;
  case 2:
    console.log("今日は火曜日です。");
    break;
  case 3:
    console.log("今日は水曜日です。");
    break;
  case 4:
    console.log("今日は木曜日です。");
    break;
  case 5:
    console.log("今日は金曜日です。");
    break;
  case 6:
    console.log("今日は土曜日です。");
    break;
  default:
    console.log("日付を取得できませんでした。");
    break;
}

forを使ったループ処理

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// breakの例
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // iが5になったらループ終了
  }
  console.log(i);
}

whileを使ったループ処理

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

よく見るメソッド

filter()

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

配列の要素をフィルタリングするメソッドで、指定された条件に合致する要素を新しい配列として返します。

find()

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(element => element > 3);
console.log(found); // 4

配列内の最初の要素を返します。指定した要素が見つからない場合はundefinedを返します。

forEach()

const array = [1, 2, 3, 4, 5];

array.forEach(function(item) {
  console.log(item);
});

配列の各要素に対して、指定された関数を一度ずつ実行します。

includes()

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false

与えられた値が配列に含まれているかどうかを調べます。true falseで返します。

reduce()

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15

配列内の各要素を指定された関数に基づいて単一の値にまとめることができます。2つの引数があり、前者は初期値または前の関数呼び出しの戻り値。後者は現在の配列要素。関数は各要素に対して1回ずつ呼び出されます。

map()

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

与えられた関数を配列の要素それぞれに適用し、その結果を新しい配列として返します。データを加工したり、取り出したりする場面でよく使われます。

flatMap()

const arr = [1, 2, 3, 4, 5];
const result = arr.flatMap(x => [x * 2, x * 2]);
console.log(result); // [2, 2, 4, 4, 6, 6, 8, 8, 10, 10]

最初にマッピング関数を使用してそれぞれの要素をマップしたあと、全ての結果を1つのフラットな配列にマージします。map()とflat()の組み合わせです。配列の要素を増やすこともできます。