javascript - 洗牌后恢复到原始数组顺序

Question

我正在 Angular 中构建一个音乐站点，用户可以在其中通过单击随机播放按钮来随机播放歌曲。我可以使用以下代码进行随机播放:

var shuffleArray = function(array) {
    var m = array.length, t, i;
    // While there remain elements to shuffle
    while (m) {
        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);
        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }
    return array;
}
$scope.shuffleThis = function(tracks){
    shuffleArray(tracks);
}

我想不通的是如何允许用户在不刷新页面或调用原始 JSON 响应的情况下恢复到原始订单。

更新:

所以我使用了以下代码，本质上是克隆数组以便以后使用它，但是我遇到了一个问题。当我去打乱数组时(将 $scope.tracks 绑定(bind)到 $scope.unshuffled)，它正在设置父 Controller 的 $scope.tracks。我目前的结构是:mainCtrl 设置在 html 标记中，这是 shuffle/unshuffle 函数所在的位置。然后每个页面 url 都有一个 Controller 。为了给您一些背景信息，这是我正在构建的网站...

www.beta.audiblecoffee.com

如您所见，如果您开始播放歌曲，底部的播放器控件就会出现。当您单击一次随机播放按钮(右下角)时，歌曲随机播放。然后你再次点击 shuffle 按钮，没有任何反应......现在如果你选择一个顶部导航项目(New，Popular，Shuffled 等)，原始有序数组将短暂出现，然后是该特定页面的新 $scope.tracks Controller 将覆盖 unshuffle 函数中的 $scope.tracks。但是，如果您单击另一个顶部导航项，则会发生同样的情况。所以我想我的问题是如何将未改组的数组设置为子 Controller $scope.tracks？

var shuffleArray = function(array) {
    var m = array.length, t, i;
    // While there remain elements to shuffle
    while (m) {
        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }

    return array;
}


$scope.shuffleThis = function(tracks) {
    $scope.isShuffled = true;
    $scope.unshuffled = tracks.slice(0);
    shuffleArray(tracks);
    console.log(player.tracks);
}

$scope.unshuffleThis = function() {
    $scope.isShuffled = false;
    player.tracks = $scope.unshuffled;
    $scope.tracks = $scope.unshuffled;
}

Answer 1

这里的想法是使用一个中间引用，从不实际修改原始播放列表

var originalArray = [1,2,3];
var playlist = originalArray;

function shufflePlaylist() {
    playlist = shuffleArray(originalArray.slice());
}

function restoreOriginalPlaylist() {
    playlist = originalArray;
}

---

作为旁注:这并不是一个真正的 Angular 问题，您只需要在之后将它绑定(bind)到范围即可。