删除元素时如何保留数组键？

Question

我想通过随机插入字符来构建一个文本字符串，但是按顺序插入（作为一种效果）。到目前为止，我得到了：

// make a string and an array
var input = "Hello, world!",
    output = [];
// split the string
input = input.split('');

我的想法是这样称呼它

function addAnElement(){
  // check if there are any left
  if(input.length){
     // pick an element at random
     var rand = Math.floor(Math.random() * input.length);
     // remove it, so we don't call it again
     var element = input.splice(rand,1);
     // insert it
     output[rand] = element;
     // use the string returned as new innerHTML, for example 
     return output.join('');
     // repeat until finished
     setTimeout(addAnElement,5);
  }
}

我希望这会返回如下内容：

'e'
'er'
...
'Hel, or!'
...
'Helo, Word!'
... and finally ...
'Hello, World!'

当然，问题在于数组在拼接时会重新索引 - 这会产生乱码。我认为答案必须是将元素链接到它们在input 中的位置，然后将它们原封不动地插入，必要时在返回之前按键排序。 我该怎么做？

Answer 1

这样的事情怎么样：

var input = 'Hello world',
    inputIndexes = [],
    output = [];

for (var i = 0; i < input.length; i++) { 
    inputIndexes[i] = i;
};

function addAnElement() {
    if (inputIndexes.length) {
        var rand = Math.floor(Math.random() * inputIndexes.length);
        var element = inputIndexes.splice(rand, 1);
        output[element] = input[element];
        //console.log(output.join(' '));
        document.getElementById('text').innerHTML = output.join(' ');
        setTimeout(addAnElement, 2000);

    }
}

addAnElement();

http://jsfiddle.net/fg2ybz8j/

Answer 2

您可以通过不使用splice 来避免它。相反，请在使用后清除条目，并记录您已清除的条目。

例如：

var entriesLeft = input.length;
function addAnElement(){
   // pick an element at random, re-picking if we've already
   // picked that one
   var rand;
   do {
      rand = Math.floor(Math.random() * input.length);
   }
   while (!input[rand]);

   // get it
   var element = input[rand];
   // clear it, so we don't use it again
   input[rand] = undefined;
   // insert it
   output[rand] = element;
   // repeat until finished
   if (--entriesLeft) {
       setTimeout(addAnElement,5);
   }
   // use the string returned as new innerHTML, for example 
   return output.join('');
}

当然，对于最后几个字符，选择随机数的循环可能会持续一段时间。如果您担心这一点，您可以创建一个随机索引数组以预先使用。 This question and its answers 地址。

现场示例：

var input = "Hello, there!".split("");
var output = [];
var entriesLeft = input.length;

function addAnElement() {
  // pick an element at random, re-picking if we've already
  // picked that one
  var rand;
  do {
    rand = Math.floor(Math.random() * input.length);
  }
  while (!input[rand]);

  // get it
  var element = input[rand];
  // clear it, so we don't use it again
  input[rand] = undefined;
  // insert it
  output[rand] = element;
  // repeat until finished
  if (--entriesLeft) {
    setTimeout(addAnElement, 5);
  }
  // use the string returned as new innerHTML, for example 
  document.body.innerHTML = output.join('');
}

addAnElement();

---

旁注：请注意我是如何将呼叫转移到setTimeout 之前 return。 return 退出函数，因此不会有任何对 setTimeout 的调用。也就是说，我对return output.join(''); 的需求感到困惑。除了第一个调用之外，所有调用都是通过计时器机制进行的，它不关心返回值。在实际示例中，我已将该返回值替换为对 document.body.innerHTML 的赋值。

---

这里演示了改组索引数组的方法。它使用这个答案中的shuffle 方法，但我并不是说这一定是最好的随机播放方法。

function shuffle(array) {
  var tmp, current, top = array.length;
  if (top)
    while (--top) {
      current = Math.floor(Math.random() * (top + 1));
      tmp = array[current];
      array[current] = array[top];
      array[top] = tmp;
    }
  return array;
}

var input = "Hello, there".split("");
var output = [];
var indexes = input.map(function(entry, index) {
  return index;
});
shuffle(indexes);
var n = 0;

function addAnElement() {
  // get this index
  var index = indexes[n];
  // get this loop's element
  var element = input[index];
  // insert it
  output[index] = element;
  // repeat until finished
  if (++n < indexes.length) {
    setTimeout(addAnElement, 5);
  }
  // use the string returned as new innerHTML, for example 
  document.body.innerHTML = output.join("");
}

addAnElement();