如何在16个容器里随机放（1~8）16个数字，要求1~8每个数字各有两个

[不能秃]

代码只能随机让部分span有数字（且不超过8个span），怎么样才能让所有span有数字
求大佬给个思路，或者有什么别的方法实现

// 获取元素
var front = document.getElementById('front');
var spans = front.children;
// 在16个span里随机生成1-8的数字，每个数字出现两次

//用来存放1~8  8个随机数;
var arr1 = [];
//用来存放0~15  16个随机数;
var arr2 = [];
for (var i = 0; i < spans.length / 2; i++) { //这里如果用 i < span.length，会在第9次循环时导致find()函数冲突
    var random1 = getRandom1();
    var random2 = getRandom2();
    // 判断随机数1-8在数组中是否出现过, 没有出现过的话就把随机数放到arr1中;
    if (!find(random1, arr1)) {
        arr1.push(random1);
        // 判断随机数0-15在数组中是否出现过, 没有出现过的话就把随机数放到arr2中;
        if (!find(random2, arr2)) {
            arr2.push(random2);
            spans[random2].innerHTML = random1; // 会随机在16个span里生成数字，但random2会随机到重复的数字,有数字的span少于8个
        }        
    } else {
        i--;//重复的话就返回重新循环
    }
    // 此时只有部分span中有数字
    
}

console.log(arr1);
console.log(arr2);
console.dir(spans);


//查找item在arr中是否出现过,出现过返回true,没出现过返回false;
function find(item, arr) {
    for (var i = 0; i < arr.length; i++) {
        if (item === arr[i]) return true;
    }
    return false;
}
// 生成随机数1-8
function getRandom1(random) {
    var random = Math.ceil((Math.random() * spans.length / 2));
    return random;
}
// 生成随机数0-15，用于span盒子
function getRandom2(random) {
    var random = Math.floor((Math.random() * spans.length));
    return random;
}

[天际的海浪]

var arr = [];
for (var i = 1; i <= spans.length / 2; i++) {
	arr.push(i,i);
}
for (var i = 0; i < spans.length; i++) {
	spans[i].innerHTML = arr.splice(Math.floor((Math.random()*arr.length)),1)[0];
}

[不能秃]

引用 1 楼 天际的海浪 的回复:

var arr = [];
for (var i = 1; i <= spans.length / 2; i++) {
	arr.push(i,i);
}
for (var i = 0; i < spans.length; i++) {
	spans[i].innerHTML = arr.splice(Math.floor((Math.random()*arr.length)),1)[0];
}

arr.splice(Math.floor((Math.random()*arr.length)),1) 这个是随机删除一个数组里的数字 但是后面的[0]的作用是什么啊，难道是{arr.splice(Math.floor((Math.random()*arr.length)),1)}这个删除的内容也会是一个数组吗，然后取第一个?

[泡泡鱼_]

是不是就是1~8中随机取2次，放在16个格子里？

[不能秃]

引用 3 楼 泡泡鱼_ 的回复:

是不是就是1~8中随机取2次，放在16个格子里？

是的，要求是16个格子里，1-8各两个，随机分布

[泡泡鱼_]

偷懒的办法

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
arr.sort((a, b) => Math.random() - 0.5);
console.log(arr);

[天际的海浪]

splice可以移除数组中的多个元素。并返回一个由被移除的多个元素组成的数组。 如果只移除一个元素也是返回只有一个元素的数组。

[不能秃]

懂了，谢谢大佬

[不能秃]

引用 5 楼 泡泡鱼_ 的回复:

偷懒的办法

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
arr.sort((a, b) => Math.random() - 0.5);
console.log(arr);

arr.sort((a, b) => Math.random() - 0.5); 这个排序机制还不是很懂 arr.sort加compareNumber函数是怎么让数组对象比较的？ arr[0]和arr[1]比较 arr[1]和arr[2]比较 arr[2]和arr[3]比较 一直这样子吗？可不可以 详细说下

[泡泡鱼_]

Math.random()是0~1之间取值，-0.5以后的返回值，你可以看成就是简单粗暴的来确定 Math.random()的值是中间值以下还是以上或者等于0.5，从而确定排序位置；<0.5,a在b之前，=0.5不变，>0.5b,b在a之前

//其实这种方法做的随机排序，可以不要a,b两个参数，就这样就行
arr.sort(() => Math.random() - 0.5);

至于sort的更详细，你可以自行搜索Array.sort

[泡泡鱼_]

Math.random() - 0.5<0,a在b之前， Math.random() - 0.5=0不变， Math.random() - 0.5>0,b在a之前

[不能秃]

引用 10 楼 泡泡鱼_的回复:

Math.random() - 0.5<0,a在b之前， Math.random() - 0.5=0不变， Math.random() - 0.5>0,b在a之前

谢谢大佬，懂了

[落落叶叶无声]

生成一个 [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8] 的数组，然后百度下如何 shuffle 数组，将数组乱序，乱序后数组依次赋值给每个 span... 我觉得 1 楼答主用的 splice 比较好。另一位答主用的 sort 也是实现 shuffle 的一种，这种方式比较取巧，但做不到真正意义的随机。

[不能秃]

引用 12 楼 落落叶叶无声的回复:

生成一个 [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8] 的数组，然后百度下如何 shuffle 数组，将数组乱序，乱序后数组依次赋值给每个 span... 我觉得 1 楼答主用的 splice 比较好。另一位答主用的 sort 也是实现 shuffle 的一种，这种方式比较取巧，但做不到真正意义的随机。

谢谢，我知道了