JS随机打乱数组
function shuffle(arr) { // 随机打乱数组
let _arr = arr.slice() // 调用数组副本,不改变原数组
for (let i = 0; i < _arr.length; i++) {
let j = getRandomInt(0, i)
let t = _arr[i]
_arr[i] = _arr[j]
_arr[j] = t
}
return _arr
}
function getRandomInt(min, max) { // 获取min到max的一个随机数,包含min和max本身
return Math.floor(Math.random() * (max - min + 1) + min)
}
<!-- ## vue demo
::: demo
<template>
<div>
原数组:{{arr}}
<button @click="clickBut">click me!打乱数组</button></br></br>
打乱结果:{{result}}
</div>
</template>
<script>
export default {
data(){
return {
arr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
result: []
}
},
methods:{
clickBut(){
this.result = this.shuffle(this.arr)
},
shuffle(arr) { // 随机打乱数组
let _arr = arr.slice() // 调用数组副本,不改变原数组
for (let i = 0; i < _arr.length; i++) {
let j = this.getRandomInt(0, i)
let t = _arr[i]
_arr[i] = _arr[j]
_arr[j] = t
}
return _arr
},
getRandomInt(min, max) { // 获取min到max的一个随机数,包含min和max本身
return Math.floor(Math.random() * (max - min + 1) + min)
}
}
}
</script>
::: -->
::: demo [vanilla]
<html>
原数组:<span id="span1"></span>
<button id="btn">click me!打乱数组</button> </br></br>
打乱结果:<span id="span2"></span>
</html>
<script>
function getRandomInt(min, max) { // 获取min到max的一个随机数,包含min和max本身
return Math.floor(Math.random() * (max - min + 1) + min)
}
function shuffle(arr) { // 随机打乱数组
let _arr = arr.slice() // 调用数组副本,不改变原数组
for (let i = 0; i < _arr.length; i++) {
let j = getRandomInt(0, i)
let t = _arr[i]
_arr[i] = _arr[j]
_arr[j] = t
}
return _arr
}
//使用
function $(el){
return document.querySelector(el)
}
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const $span2 = $('#span2');
$('#span1').textContent = arr;
$('#btn').onclick = function () {
$span2.textContent = shuffle(arr);
}
</script>
:::