【javascript】findとfindIndexとindexOfの違いと使い分け

Copy
type article = {
  title: string;
  tags: string[];
  cotent: string;
};

// 記事一覧
const articleList: Array<article> = Array.of(
  { title: "記事1", tags: ["java"], cotent: "aaaaaaaaaa" },
  { title: "記事2", tags: ["react"], cotent: "bbb" },
  { title: "記事3", tags: ["emotion"], cotent: "cccc" },
  { title: "記事4", tags: ["javascript"], cotent: "ddddddddddddd" },
  { title: "記事5", tags: ["css"], cotent: "eeeeeeeeeee" },
  { title: "記事6", tags: ["gatsby"], cotent: "f" }
);

// find
// 条件に一致した最初のオブジェクトが返却される
const findResult: article | undefined = articleList.find(
  (article) => article.title === "記事1"
);
console.log(findResult);

Copy
type article = {
  title: string;
  tags: string[];
  cotent: string;
};

// 記事一覧
const articleList: Array<article> = Array.of(
  { title: "記事1", tags: ["java"], cotent: "aaaaaaaaaa" },
  { title: "記事2", tags: ["react"], cotent: "bbb" },
  { title: "記事3", tags: ["emotion"], cotent: "cccc" },
  { title: "記事4", tags: ["javascript"], cotent: "ddddddddddddd" },
  { title: "記事5", tags: ["css"], cotent: "eeeeeeeeeee" },
  { title: "記事6", tags: ["gatsby"], cotent: "f" }
);

// findIndex
// 条件に一致した最初のオブジェクトのindexが返却される
const findIndexResult: number = articleList.findIndex(
  (article) => article.title === "記事4"
);
console.log(findIndexResult);

Copy
// indexOf
// 配列の場合はindexOfで対象のindexを取得できる
// ※オブジェクト配列では使えない
const stringArray: Array<string> = ["aaa", "bbb", "ccc"];
const indexOfResult: number = stringArray.indexOf("bbb");
console.log(indexOfResult);