配列処理(mapメソッド)

はじめに

今後しばらくの間、配列処理のメソッドについての記事を残します。(以降掲載予定のメソッドはfilter,find,every,some,reduce,includes)
またこれらのメソッドはforEachで書き換え可能ですが、forEachは実行するだけで値を返さないというデメリット(デメリットと感じるのは僕個人の見解です)を持っています。
なので基本的には上記の配列処理メソッドに頼って、どうしてもという時にforEachを使うといった方針で配列を処理しようと思います。

mapの基礎構文

map内コールバック関数の引数は最大３つの引数を設定できます。
第１引数は、配列の一つ一つの要素。第２引数は、index(０からの添字)。第３引数は配列自体。
第１引数はよく使いますが第２、第３引数はあまり使わないといった印象です。

const data = [2, 4, 6, 8];
const result1 = data.map((value) => {
  return value * value;
});
const result2 = data.map((_, index) => {
  return index;
});
const result3 = data.map((_, __, array) => {
  return array;
});
console.log(result1);//[4, 16, 36, 64]
console.log(result2);//[0, 1, 2, 3]
console.log(result3);
//0: (4) [2, 4, 6, 8]
//1: (4) [2, 4, 6, 8]
//2: (4) [2, 4, 6, 8]
//3: (4) [2, 4, 6, 8]

mapメソッドを用いた例題

①次の連想配列(images)のheightだけを取得し、新しい配列(heights)を作成しなさい。

type Images = {
  height: string;
  width: string;
}[];

const images: Images = [
  { height: "20px", width: "40px" },
  { height: "34px", width: "56px" },
  { height: "28px", width: "64px" },
];

解答

const heights = images.map(({ height }) => {//オブジェクトの分割代入の利用
  return height;
});

②次の連想配列(member)の中から名前(name)の値だけを抜き取った配列が返るような関数getNameを作成しなさい。

type Members = {
  name: string;
  age: number;
  sex: "male" | "female";
}[];

const members: Members = [
  { name: "松井", age: 39, sex: "male" },
  { name: "今田", age: 34, sex: "female" },
  { name: "鈴木", age: 24, sex: "male" },
  { name: "山田", age: 56, sex: "male" },
  { name: "田中", age: 89, sex: "female" },
];

解答

type GetName<T extends Members, U> = (array: T) => U[];

const getName: GetName<Members, string> = (array) => {
  return array.map(({ name }) => name);
};
console.log(getName(members)); //["松井", "今田", "鈴木", "山田", "田中"]