🦏 array.findを用いた配列操作+TypeScript
作成日: 2021/07/19
0

array.findを用いた配列操作


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 基本編

// 型定義したusers idは無いものも欲しいので?を付けて抽象化する
let users: { name: string; id?: number }[] = [
  { name: '太郎' },
  { name: '次郎', id: 1 },
  { name: '三郎' },
  { name: '次郎', id: 10 },
];

// 同様に
let user: { name?: string } = {};

// for文を用いた方法
for (let i: number = 0; i < users.length; i++) {
  if (users[i].name === '次郎') {
    user = users[i];
    break;
  }
}
console.log(user);

// array.findを用いた方法
// nameが'次郎'のオブジェクトを探している。
// 最初に見つかった次郎つまりid:1の次郎だけが出力される
console.log(
  users.find((user: { name: string }) => {
    return user.name === '次郎';
  })
);

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 応用編

// Posts用の型定義
type Posts = {
  id: number;
  title: string;
};

// Comment用の型定義
type Comment1 = { postId: number; content: string };

// Postsの型定義に基づいた配列
let posts: Posts[] = [
  { id: 1, title: '古い投稿' },
  { id: 2, title: '新しい投稿' },
];

// Comment1の型定義に基づいたプロパティ
let comment: Comment1 = {
  postId: 2,
  content: 'いいね',
};

// PostのIDとcommentのIDが紐づいているものを探す関数
function postForComment(arg1: Posts[], arg2: Comment1) {
  return arg1.find(function (post) {
    return post.id === arg2.postId;
  });
}

// id2が紐づいた{ id: 2, title: '新しい投稿' }が表示される。
console.log(postForComment(posts, comment));