如何在对象数组上映射时突出显示多个项目？

// 假设有一个对象数组
const data = [
  { id: 1, name: '项目A', highlight: true },
  { id: 2, name: '项目B', highlight: false },
  { id: 3, name: '项目C', highlight: true },
  // ...
];

// 遍历对象数组，为需要突出显示的项目添加特定的标记
const mappedData = data.map(item => {
  if (item.highlight) {
    return { ...item, highlighted: true };
  }
  return item;
});

// 在前端展示时，根据标记应用不同的样式
mappedData.forEach(item => {
  if (item.highlighted) {
    // 应用突出显示的样式
    // 例如，可以使用CSS类名来改变文字颜色或者背景色
    console.log(`<span class="highlighted">${item.name}</span>`);
  } else {
    console.log(item.name);
  }
});