隨機數組的兩種方式

一、不使用額外空間

思路：隨機交換

Array.prototype.shuffle = function () {
    var array = this;
    for (var i = array.length - 1; i >= 0; i--) {
        var randomIndex = Math.floor(Math.random() * (i + 1));
        var itemAtIndex = array[randomIndex];
        array[randomIndex] = array[i];
        array[i] = itemAtIndex;
    }
    return array;
};

二、使用額外空間

思路：每次隨機從數組抽出一個數, 放進新數組, 然后將這個數從原數組中刪除

Array.prototype.shuffle = function () {
    var array = this
    var len = array.length
    var newArray = []
    while (len > 0) {
        var randomIndex = Math.floor(Math.random() * len)
        var itemAtIndex = array[randomIndex]
        newArray.push(itemAtIndex)
        array.splice(randomIndex, 1)
        len--
    }

    return newArray
}

隨機數組的應用：隨機展示頁面數據

方法一：劫持數據的改變

var app = {
    render (data) {
        ...
    },
    shuffle () {
        this.list = this.list.shuffle()
    }
}

Object.defineProperty(app, 'list', {
    get () {
        return this._list
    },  
    set (data) {
        if (!Array.isArray(data)) return
        this._list = data
        this.render(this._list)
    }
})

// 請求后端數據, 並渲染
fetch(...)
    .then(response => response.json())
    .then(data => {
        app.list = data
    })

// 隨機后, 渲染
app.shuffle()

方法二：class

class App {
    constructor (list) { // 初始化
        this.list = list    
    }

    get list () {
        return this._list
    }

    set list (data) {
        if (!Array.isArray(data)) return
        this._list = data
        this.render(this._list)
    }

    render (data) {
        ...
    }

    shuffle () {
        this.list = this.list.shuffle()
    }
}

let app = new App()

// 請求后端數據, 並渲染
fetch(...)
    .then(response => response.json())
    .then(data => {
        app.list = data
    })

// 隨機后, 渲染
app.shuffle()