Angular 2中如何随机打乱嵌套对象图片的模板展示顺序？

我明白你的需求啦——既要保留原对象用来快速查找，又想每次刷新页面时让图片的展示顺序随机打乱，而且不想把整个对象转成数组。其实核心思路很简单：不改动原对象，只打乱我们遍历对象键的顺序，毕竟对象本身的键顺序本来就不可靠，我们完全不需要去折腾对象本身。

下面给你两个可行的方案：

方案一：实时生成随机排序的键数组（适合需要频繁刷新顺序的场景） #

在组件里写一个方法，专门用来生成随机排序的键数组，模板里直接调用这个方法遍历就行，原对象完全不动：

组件代码 #

// 组件类中添加这个方法
getRandomizedKeys(obj: Record<string, any>): string[] {
  const keys = Object.keys(obj);
  // 用Fisher-Yates洗牌算法高效打乱数组，适合大量数据的场景
  for (let i = keys.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    // 交换位置
    [keys[i], keys[randomIndex]] = [keys[randomIndex], keys[i]];
  }
  return keys;
}

模板代码 #

<ul id="thumbnailsList">
  <!-- 这里用Angular的属性绑定[src]比插值表达式更规范 -->
  <li *ngFor="let key of getRandomizedKeys(newTmp)">
    <img [src]="newTmp[key].url">
  </li>
</ul>

方案二：缓存随机键数组（适合只在初始化/特定时机打乱的场景） #

如果不想每次变更检测都重新生成随机数组（比如页面刷新后只打乱一次），可以把随机数组缓存起来，在组件初始化或者需要刷新顺序的时候再更新：

组件代码 #

// 组件类中
randomizedKeys: string[] = [];

ngOnInit(): void {
  // 初始化时生成一次随机键数组
  this.refreshRandomKeys();
}

// 可以手动调用这个方法来重新打乱顺序
refreshRandomKeys(): void {
  const keys = Object.keys(this.newTmp);
  // Fisher-Yates洗牌
  for (let i = keys.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [keys[i], keys[randomIndex]] = [keys[randomIndex], keys[i]];
  }
  this.randomizedKeys = keys;
}

模板代码 #

<ul id="thumbnailsList">
  <li *ngFor="let key of randomizedKeys">
    <img [src]="newTmp[key].url">
  </li>
</ul>

为什么不直接打乱对象？ #

简单说：对象的键顺序是不可靠且无法稳定控制的。即使你尝试通过添加/删除键的方式调整顺序，不同浏览器的遍历行为也可能不一致，完全没必要做这种无用功。我们只需要控制遍历键的顺序，原对象依然保留，完全不影响你后续的快速查找需求。

内容的提问来源于stack exchange，提问作者Anna F