Home / Questions / 49976
Accepted
Alvaro Montoro
Asked: 2020-02-17 13:39:09 +0800 CST 2020-02-17 13:39:09 +0800 CST

Как генерировать уникальные идентификаторы с помощью JavaScript?

  • 772

Я работаю над компонентом HTML с JavaScript. Этот компонент будет появляться на странице несколько раз (порядка сотен или, может быть, тысяч), и я хочу, чтобы каждый из них имел уникальный идентификатор.

Пока я создаю уникальные идентификаторы (UID), генерируя случайное число для каждого из компонентов и назначая его в качестве идентификатора. Что-то вроде этого:

var UID = "componente-" + Math.floor(Math.random() * 999999);
miComponente.id = UID;

Но у этого метода есть серьезные проблемы, потому что некоторые идентификаторы могут повторяться. По крайней мере, я должен добавить проверку, чтобы убедиться, что идентификаторы не повторяются, но помимо этого, какой другой метод существует для создания уникальных идентификаторов? Есть ли встроенная функция в JavaScript, которая делает это? (что-то вроде uniqidPHP).

javascript

9 Answers

  1. Best Answer

    В настоящее время существует библиотека для генерации UUID, реализующая стандарт RFC4122 . Его использование очень простое, просто добавьте библиотеку и используйте методы v1и v4версию, которую вы хотите сгенерировать.

    console.log('UUID v1:', uuid.v1());
console.log('UUID v4:', uuid.v4());
    <script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.7/uuid.min.js"></script>

    • 15

  2. Это зависит от того, что вы подразумеваете под уникальностью .

    Использование числовой переменной и увеличение ее значения каждый раз, когда вы ее используете, так же тривиально, как и преобразование ее в строку.

    window.UUID = 0;

miIdUnica = ( ++UUID ).toString( );

    У вас уже есть несколько сотен миллионов уникальных идентификаторов. Каждый раз, когда вы выполняете ++UUID, счетчик автоматически увеличивается.

    Вы можете сбросить генератор, когда захотите: UUID = 0;. Или используйте префикс :

    miIdUnica = 'prefijo' + ( ( ++UUID ).toString( ) );

    Или используйте его в функции:

    function randomId( prefix ) {
  prefix = prefix || '';
  return prefix + ( ( ++UUID ).toString( ) );
}
    • 6

  3. Здесь я оставляю вам функцию, которую я использую в течение длительного времени, и она творит чудеса для меня, создавая уникальные идентификаторы.

    function generateUUID() {
    var d = new Date().getTime();
    var uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}

console.log(generateUUID());
console.log(generateUUID());
console.log(generateUUID());

    • 6

  4. Фрагмент книги "JavaScript The Good Parts" (стр. 41)

    var serial_maker = function ( ) {

    var prefix = '';
    var seq = 0;
    return {
        set_prefix: function (p) {
            prefix = String(p);
        },
        set_seq: function (s) {
            seq = s;
        },
        gensym: function ( ) {
            var result = prefix + seq;
            seq += 1;
            return result;
        }
    };
};

var seqer = serial_maker( );
seqer.set_prefix('Q');
seqer.set_seq(1000);
var unique = seqer.gensym( ); // unique is "Q1000"
console.log('unique: '+seqer.gensym( ));
console.log('unique: '+seqer.gensym( ));

    • 5

  5. Другой вариант следующий:

    Используйте текущую дату для создания значения идентификатора, которое всегда будет уникальным при каждом его создании .

    Для этого примера я позаимствовал код из W3Schools и адаптировал его, чтобы лучше проиллюстрировать вышеизложенное:

    // Función "añadir cero".
function addZero(x, n) {
  while (x.toString().length < n) {
    x = "0" + x;
  }
  return x;
}

// Añadir control al elemento "p" principal de la página.
function addControl() {
  var d = new Date();
  var x = document.getElementById("demo");
  var h = addZero(d.getHours(), 2);
  var m = addZero(d.getMinutes(), 2);
  var s = addZero(d.getSeconds(), 2);
  var ms = addZero(d.getMilliseconds(), 3);
  x.innerHTML += "<p id='" + h + m + s + ms + "'>ID: " + h + m + s + ms + "</p>";
}
    <p>
  <i>En el div de abajo, usted encontrará elementos<br/>
HTML de tipo "p" con valores de identificación únicos:</i>
</p>
<p>
  <button onclick="addControl()">Agregar control</button>
</p>


<p id="demo"></p>

    Конечно, если речь идет о безопасности или другой функции, которую должны иметь уникальные значения, это может быть не лучший вариант в зависимости от потребности разработчика .

    • 5

  6. locutus.ioопубликовал на своем веб-сайте реализацию uniqid en JS, эквивалентную реализацииuniqid de PHP

    function uniqid (prefix, moreEntropy) {
  //  discuss at: http://locutus.io/php/uniqid/
  // original by: Kevin van Zonneveld (http://kvz.io)
  //  revised by: Kankrelune (http://www.webfaktory.info/)
  //      note 1: Uses an internal counter (in locutus global) to avoid collision
  //   example 1: var $id = uniqid()
  //   example 1: var $result = $id.length === 13
  //   returns 1: true
  //   example 2: var $id = uniqid('foo')
  //   example 2: var $result = $id.length === (13 + 'foo'.length)
  //   returns 2: true
  //   example 3: var $id = uniqid('bar', true)
  //   example 3: var $result = $id.length === (23 + 'bar'.length)
  //   returns 3: true
  if (typeof prefix === 'undefined') {
    prefix = ''
  }
  var retId
  var _formatSeed = function (seed, reqWidth) {
    seed = parseInt(seed, 10).toString(16) // to hex str
    if (reqWidth < seed.length) {
      // so long we split
      return seed.slice(seed.length - reqWidth)
    }
    if (reqWidth > seed.length) {
      // so short we pad
      return Array(1 + (reqWidth - seed.length)).join('0') + seed
    }
    return seed
  }
  var $global = (typeof window !== 'undefined' ? window : global)
  $global.$locutus = $global.$locutus || {}
  var $locutus = $global.$locutus
  $locutus.php = $locutus.php || {}
  if (!$locutus.php.uniqidSeed) {
    // init seed with big random int
    $locutus.php.uniqidSeed = Math.floor(Math.random() * 0x75bcd15)
  }
  $locutus.php.uniqidSeed++
  // start with prefix, add current milliseconds hex string
  retId = prefix
  retId += _formatSeed(parseInt(new Date().getTime() / 1000, 10), 8)
  // add seed hex string
  retId += _formatSeed($locutus.php.uniqidSeed, 5)
  if (moreEntropy) {
    // for more entropy we add a float lower to 10
    retId += (Math.random() * 10).toFixed(8).toString()
  }
  return retId
}

console.log(uniqid());

    • 4

  7. Естественно, нет, нельзя. Вам нужно будет создать метод, который привязывает идентификаторы к пространству имен и увеличивает их с каждым элементом.

    Вместо того, чтобы изобретать велосипед, вы можете использовать метод подчеркивания _.uniqueId, который делает именно то, что вам нужно.

    • 3

  8. Если они должны быть уникальными только на стороне клиента (то есть вам не нужно что-то криптографически безопасное), вы можете поставить счетчик для генерации идентификатора точно так же, как uniqueIdфункция подчеркивания, которую прокомментировал @amendadiel, и вы сохраняете внешнюю библиотеку , поэтому, если мы проверим упомянутую функцию, мы увидим, что она довольно проста (отредактировано для удаления пространства имен Underscore ):

    var idCounter = 0;
function uniqueId(prefix) {
    var id = ++idCounter + '';
    return prefix ? prefix + id : id;
};
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));

    Точно так же вы можете использовать метку времени и случайное число, если хотите что-то более длинное (хотя со счетчиком это должно работать для вас): 

    function uniqueId(prefix) {
    var id = + new Date() + '-' + Math.floor(Math.random() * 1000);
    return prefix ? prefix + id : id;
};
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));

    • 3

  9. Если вы хотите использовать их для пользовательского интерфейса, вы можете использовать Symbol https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol .

    Никаких библиотек, никаких генераторов uid/string

    действительно уникальный

    С быстрым равным

    • 0