为什么我不能打乱这段代码中的元素？

Question

我需要在 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>

Answer 1

[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>

为什么我不能打乱这段代码中的元素？

Why can't I shuffle the elements in this code?

html

javascript

element

shuffle

object