如何从对象数组中随机选取4个唯一对象并添加扩展属性？

需求与现存问题 #

需要实现的功能：

• 从包含大量对象（如500个）的数组中，随机选出4个ID唯一的对象
• 通过扩展运算符（spread operator）为这4个对象分别添加不同的样式属性
• 将修改后的对象映射到<MyComponent>，其余对象保持原样

现存问题：

• 原循环随机选取逻辑会出现重复对象
• switch分支逻辑无法正确为选中对象添加对应样式

优化思路 #

1. 接收原始对象数组作为输入
2. 通过无重复的随机选取逻辑筛选出4个ID唯一的对象
3. 为选中的4个对象按索引分别添加不同样式（使用扩展运算符保留原对象属性）
4. 遍历原始数组，将修改后的选中对象与未选中的原对象统一映射到组件

优化后的代码实现 #

// 生成指定数量的无重复随机对象
function getUniqueRandomItems(arr, count) {
  const copiedArr = [...arr];
  const selected = [];
  
  for (let i = 0; i < count; i++) {
    // 基于剩余数组长度生成随机索引
    const randomIndex = Math.floor(Math.random() * copiedArr.length);
    // 取出元素并从副本数组移除，避免重复选取
    selected.push(copiedArr.splice(randomIndex, 1)[0]);
  }
  
  return selected;
}

// 处理数组：为选中对象添加样式，返回可映射的数组
function processItems(originalArr) {
  const selectedItems = getUniqueRandomItems(originalArr, 4);
  
  // 为每个选中对象添加对应样式，保留原属性
  const styledSelected = selectedItems.map((item, index) => {
    let style = {};
    switch(index) {
      case 0:
        style = { backgroundColor: '#ff4444', padding: '12px' };
        break;
      case 1:
        style = { backgroundColor: '#33b5e5', color: '#fff' };
        break;
      case 2:
        style = { backgroundColor: '#99cc00', borderRadius: '8px' };
        break;
      case 3:
        style = { backgroundColor: '#ffbb33', border: '1px solid #333' };
        break;
    }
    return { ...item, style };
  });
  
  // 建立ID到修改后对象的映射，提升遍历查找效率
  const selectedIdMap = new Map(styledSelected.map(item => [item.id, item]));
  
  // 遍历原数组，替换选中对象，其余保持原样
  return originalArr.map(item => selectedIdMap.get(item.id) || item);
}

// 组件中使用示例
function ComponentList({ items }) {
  const processedItems = processItems(items);
  
  return (
    <div className="component-list">
      {processedItems.map(item => (
        <MyComponent key={item.id} data={item} />
      ))}
    </div>
  );
}

关键说明 #

• getUniqueRandomItems通过操作数组副本，每次取出随机元素后从副本中移除，彻底避免重复选取
• 使用Map存储选中对象的映射，在大数组场景下能将查找效率从O(n)提升到O(1)
• 扩展运算符{...item, style}保证原对象不被修改，符合数据不可变性原则
• switch逻辑根据选中对象的索引（0-3）绑定对应样式，确保4个对象的样式各不相同

内容的提问来源于stack exchange，提问作者Himanshu Sharma