JS generiert eindeutige ID-Methoden: UUID und NanoID

JS generiert eindeutige ID-Methoden: UUID und NanoID

Vorwort:

Es gibt eine bessere Möglichkeit, eine eindeutige ID zu haben: NanoID . Der heutige Artikel berichtet, dass NanoID UUID ersetzt? Und JS-Methode zum Generieren von UUID und NanoID.

1. Warum NanoID UUID ersetzt

1. Sicherer: Die meisten Zufallsgeneratoren verwenden das unsichere Math.random() . NanoID verwendet jedoch crypto Kryptomodul und die Web Crypto API , was bedeutet, dass NanoID sicherer ist. Darüber hinaus verwendet NanoID in seiner ID-Generatorimplementierung einen eigenen Algorithmus, den sogenannten einheitlichen Algorithmus, anstatt random % alphabet zu verwenden.

2. Es ist schnell und kompakt. NanoID ist 60 % schneller als UUID . Im Gegensatz zum 36-stelligen Alphabet der UUIDs haben NanoIDs nur 21 Zeichen.

Darüber hinaus unterstützt NanoID 14 verschiedene Programmiersprachen:

C#, C++, Clojure und ClojureScript, Crystal, Dart & Flutter, Deno, Go, Elixir, Haskell, Janet, Java, Nim, Perl, PHP, Python mit Wörterbüchern, Ruby, Rust, Swift


3. Kompatibilität

Es unterstützt auch PouchDB , CouchDB WebWorkers , Rollup und Bibliotheken wie React und Reach-Native . Wir können die eindeutige ID im Terminal mithilfe von npx nanoid abrufen.

2. So generieren Sie js

Mal sehen, wie sie mit js generiert werden

Lassen Sie uns zunächst darüber sprechen, wie wir zuvor uuid generiert haben.

Methode 1:

Funktion guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, Funktion (c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        gibt v.toString(16) zurück;
    });
}
guid() // "a1ca0f7b-51bd-4bf3-a5d5-6a74f6adc1c7"


Methode 2:

var _S4 = Funktion() {
  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}

// Holen Sie sich die eindeutige ID der Anzeigenanfrage. Ist es der aktuelle Zeitstempel + 13 zufällige Ziffern? export function GetsingleId() {
  var _res = (_S4() + _S4() + '-' + _S4() + '-' + _S4() + '-' + _S4() + '-' + _S4() + '-' + _S4() + _S4() + _S4())
  returniere '_' + Konfigurationsversion + '_' + _res
}


Methode 3:

Funktion uuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    für (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // Bits 12-15 des Feldes time_hi_and_version auf 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // Bits 6-7 der clock_seq_hi_and_reserved auf 01
    s[8] = s[13] = s[18] = s[23] = "-";

    var uuid = s.join("");
    UUID zurückgeben;
}
uuid() // "ffb7cefd-02cb-4853-8238-c0292cf988d5"


3. NanoID-Methode

importiere { nanoid } von 'nanoid'
let idA = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"
//Sie können auch die Länge des generierten Strings angeben let idB = nanoid(5)


Es kann hauptsächlich in Form eines NPM-Pakets installiert werden. Der Kerncode lautet wie folgt:

let urlAlphabet =
  „useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict“

lass nanoid = (Größe = 21) => {
  lass id = ''
  // Eine kompakte Alternative für „for (var i = 0; i < step; i++)“.
  sei i = Größe
  während (i--) {
    // `| 0` ist kompakter und schneller als `Math.floor()`.
    id += urlAlphabet[(Math.random() * 64) | 0]
  }
  Rücksende-ID
}

Dies ist das Ende dieses Artikels über UUID und NanoID, die Methoden zum Generieren eindeutiger IDs in JS. Weitere Informationen zum Generieren eindeutiger IDs in JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • So generieren Sie eine UUID mit zwei Zeilen Javascript-Code
  • JS implementiert ein vollständiges Beispiel zum Generieren einer UUID durch Klicken [basierend auf jQuery]
  • Beispiel zum Generieren einer UUID mit JS
  • Javascript-Methode zum Generieren einer global eindeutigen Kennung (GUID, UUID)

<<:  Der Unterschied zwischen Div und Tabelle in Geschwindigkeit, Laden, Webanwendung usw.

>>:  htm-Anfängerhinweise (unbedingt für Anfänger lesen)

Artikel empfehlen

So positionieren Sie die Kopfzeile mithilfe des CSS-Sticky-Layouts oben

Anwendungsszenarien: Eine der neuen Anforderungen...

Entmystifizierung des HTML 5-Arbeitsentwurfs

Das World Wide Web Consortium (W3C) hat einen Entw...

5 coole und praktische Einführung in HTML-Tags und -Attribute

Tatsächlich handelt es sich auch hier um einen Cl...

Einführung in die Überwachung des MySQL MHA-Betriebsstatus

Inhaltsverzeichnis 1. Projektbeschreibung 1.1 Hin...

Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?

Inhaltsverzeichnis Erster Schritt: Der zweite Sch...

Detailliertes Tutorial zur Installation von mysql-8.0.20 unter Linux

** Installieren Sie mysql-8.0.20 unter Linux ** U...

Empfehlen Sie einige nützliche Lernmaterialien für Neulinge im Webdesign

Viele Leute haben mich auch gefragt, welche Büche...

Vier Lösungen für die Verwendung von setTimeout in JS for-Schleifen

Inhaltsverzeichnis Überblick Lösung 1: Verschlüss...

JavaScript Canvas implementiert Tic-Tac-Toe-Spiel

In diesem Artikel wird der spezifische Code von J...

Beispielcode zur Implementierung des Aushöhlungseffekts mit CSS

Wirkungsprinzip Verwenden Sie hauptsächlich CSS-F...

Vue implementiert zwei Methoden zur Steuerung der Routing-Berechtigung

Inhaltsverzeichnis Methode 1: Routing von Metainf...