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

我正在使用 JavaScript 开发一个 HTML 组件。这个组件将在页面上出现多次（大约数百或数千），我希望它们中的每一个都有一个唯一的标识符。

到目前为止，我正在通过为每个组件生成一个随机数并将其分配为 ID 来创建唯一 ID (UID)。像这样的东西：

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

但是这种方法有很大的问题，因为某些 ID 可能会重复。至少我应该添加一个检查以确保 ID 不重复，但除此之外还有什么其他方法可以生成唯一标识符？JavaScript中是否有一个本机函数可以做到这一点？（类似于uniqidPHP）。

javascript

9 Answers

  1. Best Answer

    当前有一个库可以生成实现RFC4122标准的 UUID 。它的使用非常简单，只需添加库并根据您要生成的版本使用方法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. 这取决于您所说的unique。

    使用数字变量并在每次使用时递增其值是微不足道的，就像将其转换为字符串一样。

    window.UUID = 0;

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

    您已经拥有数亿个唯一标识符。每次执行++UUID时，计数器都会自动增加。

    您可以随时重置生成器：UUID = 0;. 或使用前缀：

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

    或者在函数中使用它：

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

  3. 在这里，我给你留下一个我已经使用了很长时间的函数，它对我生成唯一的 id 有很大的作用。

    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. 另一种选择如下：

    使用当前日期构建一个 id 值，该值在每次生成时始终是唯一的。

    对于这个示例，我从 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. 自然，不，你不能。您必须构建一个将 ID 绑定到命名空间并随每个元素递增的方法。

    您可以使用下划线的 _.uniqueId 方法，而不是重新发明轮子，这正是您需要的。

    • 3

  8. 如果它们必须仅在客户端是唯一的（也就是说，您不需要加密安全的东西），您可以放置​​一个计数器来生成 id，就像uniqueId@amendadiel 评论的下划线函数一样，然后保存一个外部库，所以如果我们检查上面提到的函数，我们会看到非常简单（编辑删除下划线命名空间）：

    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. 如果您希望它们用于 UI，您可以使用 Symbol https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol

    没有库，没有 uids/字符串生成器

    真的很独特

    快速等于

    • 0