JavaScript | 配列メソッドの使い分け（map / forEach / filter / reduce の違い）

JavaScript

2020.07.282025.10.26

では「最大3つまで表示して、それ以上は『…他◯件』とするリスト表現」を作ってみましょう。

カートの例
やりたいこと
実装例
ポイント

カートの例

const cart = [
  { name: 'Tシャツ', price: 1500, quantity: 2 },
  { name: 'ジーンズ', price: 5000, quantity: 1 },
  { name: '帽子', price: 2000, quantity: 1 },
  { name: '靴', price: 8000, quantity: 1 },
  { name: 'バッグ', price: 6000, quantity: 1 }
];

const cart = [
  { name: 'Tシャツ', price: 1500, quantity: 2 },
  { name: 'ジーンズ', price: 5000, quantity: 1 },
  { name: '帽子', price: 2000, quantity: 1 },
  { name: '靴', price: 8000, quantity: 1 },
  { name: 'バッグ', price: 6000, quantity: 1 }
];

JavaScript

やりたいこと

商品が3つ以下 → すべて表示
商品が4つ以上 → 最初の3つを表示して「…他◯件」とする

実装例

const names = cart
  .filter(item => item.quantity > 0)
  .map(item => item.name);

let list;
if (names.length <= 3) {
  list = names.join(', ');
} else {
  const shown = names.slice(0, 3).join(', ');
  const remaining = names.length - 3;
  list = `${shown} …他${remaining}件`;
}

console.log(list);
// "Tシャツ, ジーンズ, 帽子 …他2件"

const names = cart
  .filter(item => item.quantity > 0)
  .map(item => item.name);

let list;
if (names.length <= 3) {
  list = names.join(', ');
} else {
  const shown = names.slice(0, 3).join(', ');
  const remaining = names.length - 3;
  list = `${shown} …他${remaining}件`;
}

console.log(list);
// "Tシャツ, ジーンズ, 帽子 …他2件"