要列出的随机且唯一数组的字符串答案

【问题标题】：Random and unique array's string to list要列出的随机且唯一数组的字符串
【发布时间】：2017-02-14 18:59:32
【问题描述】：

我无法按照<li> 进行随机游戏。每个游戏都应该是独一无二的。

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA']

<ul class="list-group"><h4>These are the games that James like the most</h4>
        <li class="james list-group-item">...</li>
        <li class="james list-group-item">...</li>
        <li class="james list-group-item">...</li>
</ul>

【问题讨论】：

问题是什么？
实际分配随机值的JS在哪里？
@BenM 我做到了，但它不正确所以我没有发布它。

标签： javascript arrays dom random

【解决方案1】：

你可以用jQuery做这样的事情。

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

var filteredArr = [...new Set(Array.from(randomGames))]

for(var i = 0; i < filteredArr.length; i++) {
  $('.list-group').append('<li class="james list-group-item">' + filteredArr[i] + '</li>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>These are the games that James like the most</h4>
<ul class="list-group">
</ul>

或者只是纯 JS。

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

var filteredArr = [...new Set(Array.from(randomGames))]

for(var i = 0; i < filteredArr.length; i++) {
  var node = document.createElement("li");  
  var textnode = document.createTextNode(filteredArr[i]); 
  node.appendChild(textnode);    
  document.getElementById("list-group").appendChild(node); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>These are the games that James like the most</h4>
<ul id="list-group">
</ul>

【讨论】：

该问题没有 jQuery 标签 - 为什么提供 jQuery 答案？
您没有按照要求删除重复项：“每个游戏都应该是独一无二的。”
Argh，上面的代码实际上并没有随机化元素，它只是过滤掉重复项并动态推送它并创建一个无序列表。我只是没有完全理解 OP。

【解决方案2】：

从数组中选择随机项，将其添加为当前li 文本并将其从数组中删除。

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA']
var li = document.querySelectorAll('li')

for(var i = 0; i < li.length; i++) {
  var n = parseInt(Math.random(randomGames.length) * randomGames.length) 
  li[i].textContent = randomGames[n]
  randomGames.splice(n, 1)
 
}

<ul class="list-group">
  <h4>These are the games that James like the most</h4>
  <li class="james list-group-item">...</li>
  <li class="james list-group-item">...</li>
  <li class="james list-group-item">...</li>
</ul>

【讨论】：

【解决方案3】：

这将随机化数组并过滤掉重复项，然后将游戏作为新的 li 元素添加到 ul（我给它一个 id 以便于访问）：

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

// randomize the array:
// (shuffle function taken from http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

randomGames = shuffle(randomGames);

// remove duplicates
randomGames.filter(function (elem, index, self) {
  return elem !== "" && index == self.indexOf(elem)
});

// add the games to the list
var gameslist = document.getElementById('gameslist');
for (var i = 0; i < randomGames.length; i++) {  
  var newLi = document.createElement('li');
  newLi.className = 'james list-group-item';
  newLi.textContent = randomGames[i];
  gameslist.appendChild(newLi);
}

<h4>These are the games that James like the most</h4>
<ul class="list-group" id="gameslist">
</ul>

【讨论】：