數組是JavaScript中使用頻率非常高的一種數據類型,其中最常用的就是數組打亂方法。Vue的數組打亂方法同樣也非常實用,下面我們就來詳細介紹一下。
//Vue中打亂數組方法的實現 shuffledArray: function(arr) { let _arr = arr.slice() for (let i = 0; i< _arr.length; i++) { let j = this._getRandomInt(i, _arr.length); let temp = _arr[i]; _arr[i] = _arr[j]; _arr[j] = temp; } return _arr }, _getRandomInt: function(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) }
上述代碼中,Vue中打亂一個數組的方法被封裝在數組中。此方法需要一個參數,即要被打亂的數組。這樣一來,我們每次只需調用這個方法并傳遞需要被打亂的數組即可實現數組打亂的目的。
在實現中,首先我們使用slice方法復制了一份原數組,這是因為數組在JavaScript中是對象,如果不復制,那么我們打亂的是原數組,一旦修改了原數組,其在其它部分的引用都會發生變化。使用slice方法復制數組可以避免以上問題。
接著,我們使用了一個for循環,通過循環對數組進行遍歷,從而對數組中的每一個元素都進行了操作。該循環的索引是i,而j則是從函數中傳遞出來的隨機索引。函數中的_getRandomInt()函數通過Math.random()方法生成隨機數索引j,該索引位于i及數組長度之間,并且需要取整以保證其為整數類型。接下來,我們通過一個temp變量先將原數組中的元素記錄下來。然后在對j位置上的元素和i位置上的元素進行交換,最終返回被打亂后的數組即可。
總體來說,這個方法實現較為簡單,比較容易理解。但其流程控制部分卻較為巧妙,通過遍歷數組并隨機生成一個數,來進行數組中元素的交換。同時,方法的上方也給出了對該函數所使用的變量的詳細說明和解釋,使得該函數的每個變量的作用都得到了很好的體現。
這是Vue中常用的一個小工具方法,其功能簡單實用。在編程過程中,我們需要隨機打亂一個數組時,可以非常方便地使用該函數,不用再徒手寫一個打亂數組的方法了。