时间戳

首页 > 解决方案 > 为什么我不能随机播放这段代码中的元素？

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

问题描述

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

标签： javascripthtmlobjectelementshuffle

解决方案

[stats]是一个数组字面量，以stats第一个元素创建一个新数组。（你是双重包装你的 stats 数组）。因此stats===[stats][0]，and[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>

推荐阅读