JavaScriptのincludes()入門｜配列や文字列に要素が含まれるか判定する

// 配列でのincludes()
const fruits = ["りんご", "バナナ", "みかん", "いちご"];

console.log(fruits.includes("バナナ"));
console.log(fruits.includes("ぶどう"));

// 文字列でのincludes()
const message = "JavaScriptは楽しい言語です";
console.log(message.includes("楽しい"));
console.log(message.includes("難しい"));

true
false
true
false

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

// インデックス0から検索（デフォルト）
console.log(numbers.includes(3));

// インデックス4から検索
console.log(numbers.includes(3, 4));

// インデックス6から検索
console.log(numbers.includes(3, 6));

true
true
false

// NaNの扱い
const values = [1, 2, NaN, 4];

// includes()はNaNを正しく検出できる
console.log(values.includes(NaN));

// indexOf()はNaNを検出できない
console.log(values.indexOf(NaN));

// 戻り値の違い
const arr = ["a", "b", "c"];

// includes() -> boolean
console.log(arr.includes("b"));   // true/false

// indexOf() -> インデックス番号（-1は見つからない）
console.log(arr.indexOf("b"));    // 数値

// 条件分岐での比較
// includes()の方がシンプル
if (arr.includes("b")) {
  console.log("includes: 見つかった");
}

// indexOf()は-1との比較が必要
if (arr.indexOf("b") !== -1) {
  console.log("indexOf: 見つかった");
}

true
-1
true
1
includes: 見つかった
indexOf: 見つかった

// 許可された拡張子のチェック
const allowedExtensions = [".jpg", ".png", ".gif", ".webp"];
const fileName = "photo.png";
const ext = "." + fileName.split(".").pop();

if (allowedExtensions.includes(ext)) {
  console.log(`${fileName} はアップロード可能です`);
}

// 複数条件の簡潔な書き方
const userRole = "editor";

// if文の羅列を避けられる
if (["admin", "editor", "moderator"].includes(userRole)) {
  console.log("編集権限があります");
}

// filter()との組み合わせ
const allItems = ["りんご", "バナナ", "にんじん", "みかん", "キャベツ"];
const fruitList = ["りんご", "バナナ", "みかん", "いちご"];

const fruitsOnly = allItems.filter(item => fruitList.includes(item));
console.log("果物:", fruitsOnly);

const nonFruits = allItems.filter(item => !fruitList.includes(item));
console.log("果物以外:", nonFruits);

photo.png はアップロード可能です
編集権限があります
果物: ["りんご", "バナナ", "みかん"]
果物以外: ["にんじん", "キャベツ"]