为什么我不能随机播放这段代码中的元素？答案

【问题标题】：Why can't I shuffle the elements in this code?为什么我不能随机播放这段代码中的元素？
【发布时间】：2020-07-18 01:20:21
【问题描述】：

我需要在 HTML 中打乱对象的某些部分。我发现这段代码可以使用，但是当我执行它时，它变成了空白。我有订单问题吗？我需要做什么来修复它？当我将它放入 JSFiddle 时它可以工作，但是当我将以下代码放入 CodePen 时，它不起作用并且控制台显示一个空白屏幕。我也没有收到任何错误消息。（我编辑了问题以展示我的工作和所做的更改）。

<html>
  <div class="qbdisplay"></div>
  <div class="qbdisplay"></div>
  <div class="qbdisplay"></div>
<script>
  function shuffle(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  };
  var stats = [{
      name: 'Patrick Mahomes',
      team: 'KC',
      overall: 99
    },
    {
      name: 'Lamar Jackson',
      team: 'BAL',
      overall: 97
    },
    {
      name: 'Russell Wilson',
      team: 'SEA',
      overall: 98
    },
    {
      name: 'Deshaun Watson',
      team: 'HOU',
      overall: 95
    },
    {
      name: 'Drew Brees',
      team: 'NO',
      overall: 95
    },
    {
      name: 'Aaron Rodgers',
      team: 'GB',
      overall: 92
    },
    {
      name: 'Ryan Tannehill',
      team: 'TEN',
      overall: 92
    },
    {
      name: 'Kyler Murray',
      team: 'ARI',
      overall: 90
    },
    {
      name: 'Carson Wentz',
      team: 'PHI',
      overall: 88
    },
    {
      name: 'Matt Ryan',
      team: 'ATL',
      overall: 86
    },
  ];
  var shuffled = shuffle([stats]); // take a copy before shuffling
  for (let display of document.querySelectorAll(".qbdisplay")) {
    let {
      name,
      team,
      overall
    } = shuffled.pop();
    display.textContent = name + ' ' + team + ' ' + overall;
  }
</script>


</html>

【问题讨论】：

我无法重现该问题：jsfiddle.net/5k20eoug
“它变成空白” - 检查错误日志/控制台，因为可能存在抛出错误，或者它从未运行过，或者在这些元素可能出现之前运行发现/操纵，或..
我更新了问题。请让我知道是否需要更改某些内容以使其正常工作。
如果脚本在某些情况下有效而在其他情况下无效，那么显示脚本本身是没有用的。您是否考虑过将 codepen 链接到失败的地方？
你在创建它引用的 DOM 元素之前运行你的脚本。将<script> 标记移到<div> 标记之后。

标签： javascript html object element shuffle

【解决方案1】：

[stats] 是一个数组字面量，创建一个以stats 作为第一个元素的新数组。（你是双重包装你的 stats 数组）。所以 stats===[stats][0] 和 [stats].name 是未定义的，所以你的 for 循环在尝试解构 {name} 时抛出错误。

要制作数组的（浅）副本，您可以使用扩展运算符 [...stats] 或 stats.slice()：

  var shuffled = shuffle([...stats]); // take a copy before shuffling

注意：浅拷贝意味着它只复制一层（只是数组本身，而不是数组中的对象）。

<html>
  <div class="qbdisplay"></div>
  <div class="qbdisplay"></div>
  <div class="qbdisplay"></div>
<script>
  function shuffle(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  };
  var stats = [{
      name: 'Patrick Mahomes',
      team: 'KC',
      overall: 99
    },
    {
      name: 'Lamar Jackson',
      team: 'BAL',
      overall: 97
    },
    {
      name: 'Russell Wilson',
      team: 'SEA',
      overall: 98
    },
    {
      name: 'Deshaun Watson',
      team: 'HOU',
      overall: 95
    },
    {
      name: 'Drew Brees',
      team: 'NO',
      overall: 95
    },
    {
      name: 'Aaron Rodgers',
      team: 'GB',
      overall: 92
    },
    {
      name: 'Ryan Tannehill',
      team: 'TEN',
      overall: 92
    },
    {
      name: 'Kyler Murray',
      team: 'ARI',
      overall: 90
    },
    {
      name: 'Carson Wentz',
      team: 'PHI',
      overall: 88
    },
    {
      name: 'Matt Ryan',
      team: 'ATL',
      overall: 86
    },
  ];
  var shuffled = shuffle([...stats]); // take a copy before shuffling
  for (let display of document.querySelectorAll(".qbdisplay")) {
    let {
      name,
      team,
      overall
    } = shuffled.pop();
    display.textContent = name + ' ' + team + ' ' + overall;
  }
</script>


</html>

【讨论】：