Как отсеивать повторяющиеся числа в Math.random?

Question

[boga-net]

Всем привет. Необходимо вывести на страницу n-ое кол-во элементов (с числами) в случайном порядке. Ну или n-ое кол-во элементов в обычном порядке, но со случайными числами. Числа не должны повторяться. Может я не так начал, но я использую Math.rand();
Есть несколько кнопок с числами, которые определяют, сколько элементов будет создано на странице. А так же эти числа определяют нумерацию этих элементов. Всё получилось, и создание и нумерация, но только не получилось сделать рандомные неповторяющиеся числа на этих элементах.

в общем, нужно получить что-то такое, если на 8 чисел :

4 7 1
5 2 9
8 6

9 2 3
6 5 1
4 8

ссылка на jsfiddle

<div class="buttons">
  <div class="btn" data-amont="3">3</div>
  <div class="btn" data-amont="8">8</div>
  <div class="btn" data-amont="15">15</div>
  <div class="btn" data-amont="24">24</div>
</div>

// Получить выбранное кол-во блоков
$('.btn').on('click', function() {
	var x = $(this).text();
	setBlocks(x);
});

// Установить кол-во блоков
function setBlocks(x) {

	for (var i = 1; i <= x; i++) {
		var res = getRandom(1, x);
		
		var block = '<div class="box" data-num="'+ res +'">'+ res +'</div>';
		wrap.append(block);
	}
}

// Получить рандомное число
function getRandom(min, max) {
	var arr = [];
	for (var i = 0; i < max; i++) {
		x = Math.floor(Math.random() * (max - min + 1)) + min;

		if (arr.indexOf(x)) {
			return;
                        // или return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		else {
 			arr.push(x);
		}
		
		return arr;
	}
}

Вот здесь не пойму, как делать проверку на наличие числа в массиве. В воображении всё просто : перебираю элементы в цикле (цикл = длина переменной max), и каждую итерацию цикла запускаю функцию, которая возвращает рандомное число. Потом это число записываю в массив. Если такое число уже есть, то снова запускаю рандомное число или return.
Пол дня уже сижу, ломаю голову.

Пробовал по-разному. Я вот пока не знаю, как лучше - создавать элементы в обычном порядке и им присваивать рандомные числа, или наоборот, просто перемешивать эти элементы.

Спасибо

Comments

[longclaps]

Я не понял, что непонятно?
Вы мой код запускали?
Он запустился?
Вы смотрели вывод?
Ответы на эти вопросы прояснят ситуацию.

[boga-net]

longclaps, Конечно запускал. Что-то с сервером или у меня с интернетом. Уведомления не приходят, на ваш комментарий не мог ответить всё это время, поэтому ответ на ваш комментарий, добавил в вопрос. Продублирую здесь


Я пробовал переделать ваш пример под свои функции, но не получилось. А если просто вызвать вашу функцию, то вернёт object.

function getRandomSet(lo, hi, n) {
    var res = new Set();
    while (res.size < n) res.add(Math.floor(Math.random() * (hi - lo + 1)) + lo);
    return res;
};

var result = getRandomSet(0, 9, 5);
console.log(typeof(result));            // object
result = parseInt(result);
console.log(typeof(result));           //  number
console.log(result);                       // NaN

У меня есть конкретные числа, их всего четыре : 3, 8, 15, 29
Таким образом, у меня min (или как у вас - lo) всегда равняется 1.
А max (hi) будет зависеть от нажатой кнопки (3, 8, 15, 29)
То есть var x = выбранная кнопка или max

getRandomSet(1, x, 5) - не пойму, для чего нужно число 5 ? )

Может я в описании вопроса не совсем правильно описал задачу.
Мне нужно сгенерировать неповторяющиеся числа в рандомном порядке, от 1 до 3, от 1 до 8, от 1 до 15 и т.д. Или рандомно расставить элементы на странице с этими числами, чтобы получалось нечто такое :

4 7 1
5 2 9
8 6

9 2 3
6 5 1
4 8

[longclaps]

boga-net, вот эта строка у вас что выводит?
console.log(getRandomSet(0, 9, 5));

[boga-net]

longclaps,
сейчас выводит
Set(5) [ 7, 0, 6, 2, 9 ]

Теперь я понял, что третья цифра - сколько будет генерироваться рандомных чисел. Всё дело в том, что я запускал ваш код на codepen - а там возвращало в консоль

[object set] { }

И это навело на меня смуту )
А ваш код работает на ура. Извините, моя ошибка, что проверял на codepen. Спасибо большое.

Answer 1

[longclaps]

function getRandomSet(lo, hi, n) { // я привык к тому, что min и max - функции )))
    var res = new Set();
    while (res.size < n) res.add(Math.floor(Math.random() * (hi - lo + 1)) + lo);
    return res;
}

console.log(getRandomSet(0, 9, 5));

Comments

[boga-net]

Оба ответа работают, но этот ещё гениальней )
Меньше кода и есть над чем подумать и что поучить : new Set(), .size, .add - всё это в новинку )

Answer 2

[Сергей delphinpro]

Может просто перемешать массив чисел?

function shuffle( array ) {
  for(var j, x, i = array.length; i; j = parseInt(Math.random() * i), x = array[--i], array[i] = array[j], array[j] = x);
    return true;
}

var a = [1,2,3,4,5,6,7,8,9];

shuffle(a);

out.innerHTML = a.toString();

https://jsfiddle.net/uhhqben9/

UPDATE:

Все просто — функция перемешивает массив чисел.

Вот ваша функция:

function getRandom(min, max) {
  var arr = [];
  for (var i = 0; i < max; i++) {
    x = Math.floor(Math.random() * (max - min + 1)) + min;
    if (arr.indexOf(x)) {
      return;
    }
    else {
      arr.push(x);
    }
    return arr;
  }
}

Дорабатываем ее с использованием функции shuffle:

function getRandom(min, max) {
  // Получаем массив чисел из диапазона от min до max
  var arr = Array.from(Array(max - min + 1).keys(), x => x + min);
  // Перемешиваем
  shuffle(arr);
  // возвращаем перемешанный массив
  return arr;
}

И можем использовать для получения массивов неповторяющихся случайных чисел

var a = getRandom(3,15);

https://jsfiddle.net/uhhqben9/1/

.