Как генерировать уникальные id в цикле?

Question

[Max89]

Здравствуйте. Есть много компонентов Vue, все они выводятся в нескольких циклах в родительском компоненте. В них необходимо через props передавать уникальный Id. Как можно автоматические его генерировать? Index и id элементов не годятся тк они повторяются.

Comments

[Александр Маджугин]

id элементов не годятся тк они повторяются

У вас уже что-то пошло не так. Не могут они повторятся, иначе это не id

[Max89]

Александр Маджугин, Там сделано так, что есть товары и пользователи. У пользователей идут свои id, у товаров свои, но в двух группах они начинаются с 1,2,3

[garbagecollected]

let id = (~~(Math.random()*1e16)).toString(16)

[Александр Маджугин]

Max89, значит добавляйте к id префикс сущности g_{id} и u_{id} например и все. И будут у вас g_1, g_2 и т.д. и u_1...

[Max89]

garbagecollected, Главное нет вероятности что они повторятся в компонентах у которых внутри цикл с выводом?

[garbagecollected]

Max89, вероятность повторения равна количеству выданных на странице id делённое на 10000000000000000 (1e16 - единичка и 16 нолей).

[Николай]

А что вам мешает сделать вычисляемое свойство(computed ? ), обогатить объект, по которому вы итерируете ключом Symbol ? Вот вам и не костыльное решение. Вам Symbol гарантированно будет говорить, что ключи уникальные

[garbagecollected]

Николай, Symbol несереализуем. Его не сохранишь в localStorage, не передашь между переходами.

[Николай]

garbagecollected, Так задача не стоит о том, что нужно передавать или сохранять

Answer 1

[Владимир Коротенко]

https://www.npmjs.com/package/uuid
Почему никто не использует поиск?

Comments

[Gumper]

Люди учатся гуглить этот скилл самый сложный в освоении. Этот вопрос ещё можно сказать что не смог найти по неопытности.
В ленте по JS задают вопросы как добавить класс элементу или как на клик скрыть элемент, в общем совсем грустно, хотя даже видосы есть чтобы наверняка...

[Николай]

Вообще, уже встроенный есть, не обязательно теперь ставить этот пакет

Answer 2

[garbagecollected]

Решение весьма лютое.

{ const idgen=Object.assign(()=>idgen.gen.next().value,
{val:0,gen:(function*(){while(1)yield ++idgen.val})()});
Object.defineProperty(window,'uniqueId',{get:()=>idgen()}); }
// Проверочка
for( let i = 0; i < 3;  i ++ ) console.log(uniqueId); // 1,2,3;

Настоящий хардкор.

Answer 3

[lilroy]

Есть отличный вариант в JavaScript crypto.randomUUID() . Всегда его использую и библиотек не нужно. Прочитайте
инфо MDN