随机生成随机串

叁歲伎倆 2022-05-09 02:18 455阅读 0赞

### <1>js生成uuid的四种方法 ###

全局唯一标识符（GUID，Globally Unique Identifier）也称作 UUID(Universally Unique IDentifier) 。

GUID是一种由算法生成的二进制长度为128位的数字标识符。GUID 的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”，其中的 x 是 0-9 或 a-f 范围内的一个32位十六进制数。在理想情况下，任何计算机和计算机集群都不会生成两个相同的GUID。

GUID 的总数达到了2^128（3.4×10^38）个，所以随机生成两个相同GUID的可能性非常小，但并不为0。GUID一词有时也专指微软对UUID标准的实现。

算法1

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>function</code>&nbsp;<code>uuid() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>s = [];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>hexDigits =&nbsp;</code><code>"0123456789abcdef"</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>i = 0; i &lt; 36; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>s[14] =&nbsp;</code><code>"4"</code><code>;&nbsp;&nbsp;</code><code>// bits 12-15 of the time_hi_and_version field to 0010</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>s[19] = hexDigits.substr((s[19] &amp; 0x3) | 0x8, 1);&nbsp;&nbsp;</code><code>// bits 6-7 of the clock_seq_hi_and_reserved to 01</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>s[8] = s[13] = s[18] = s[23] =&nbsp;</code><code>"-"</code><code>;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>uuid = s.join(</code><code>""</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>uuid;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

算法2

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>function</code>&nbsp;<code>guid() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'</code><code>.replace(/[xy]/g,&nbsp;</code><code>function</code><code>(c) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>r = Math.random()*16|0, v = c ==&nbsp;</code><code>'x'</code>&nbsp;<code>? r : (r&amp;0x3|0x8);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>v.toString(16);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

算法3

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>function</code>&nbsp;<code>guid() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>S4() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>(((1+Math.random())*0x10000)|0).toString(16).substring(1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>(S4()+S4()+</code><code>"-"</code><code>+S4()+</code><code>"-"</code><code>+S4()+</code><code>"-"</code><code>+S4()+</code><code>"-"</code><code>+S4()+S4()+S4());</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

算法4

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </td> 
 <td> <code>function</code>&nbsp;<code>uuid(len, radix) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>chars =&nbsp;</code><code>'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'</code><code>.split(</code><code>''</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>uuid = [], i;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>radix = radix || chars.length;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(len) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// Compact form</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(i = 0; i &lt; len; i++) uuid[i] = chars[0 | Math.random()*radix];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// rfc4122, version 4 form</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>r;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// rfc4122 requires these characters</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>uuid[8] = uuid[13] = uuid[18] = uuid[23] =&nbsp;</code><code>'-'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>uuid[14] =&nbsp;</code><code>'4'</code><code>;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// Fill in random data.&nbsp; At i==19 set the high bits of clock sequence as</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// per rfc4122, sec. 4.1.5</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(i = 0; i &lt; 36; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(!uuid[i]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>r = 0 | Math.random()*16;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>uuid[i] = chars[(i == 19) ? (r &amp; 0x3) | 0x8 : r];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>uuid.join(</code><code>''</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

这个可以指定长度和基数。比如

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>// 8 character ID (base=2)</code> <code>uuid(8, 2)&nbsp;&nbsp;</code><code>//&nbsp; "01001010"</code> <code>// 8 character ID (base=10)</code> <code>uuid(8, 10)&nbsp;</code><code>// "47473046"</code> <code>// 8 character ID (base=16)</code> <code>uuid(8, 16)&nbsp;</code><code>// "098F4D35"</code> </td> 
 </tr> 
 </tbody> 
</table>

### <2>js生成 有效的代码片段 ###

## 浮点数取整 ##

const x = 123.4545;
    x >> 0; // 123
    ~~x; // 123
    x | 0; // 123
    Math.floor(x); // 123

> 注意：前三种方法只适用于32个位整数，对于负数的处理上和`Math.floor`是不同的。
> 
>     Math.floor(-12.53); // -13
>     -12.53 | 0; // -12

## 生成6位数字验证码 ##

// 方法一
    ('000000' + Math.floor(Math.random() *  999999)).slice(-6);
    
    // 方法二
    Math.random().toString().slice(-6);
    
    // 方法三
    Math.random().toFixed(6).slice(-6);
    
    // 方法四
    '' + Math.floor(Math.random() * 999999);

## 16进制颜色代码生成 ##

(function() {
 return '#'+('00000'+
 (Math.random()*0x1000000<<0).toString(16)).slice(-6);
 })();

## 驼峰命名转下划线 ##

'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase(); // component_map_model_registry

## url查询参数转json格式 ##

// ES6
    const query = (search = '') => ((querystring = '') => (q => (querystring.split('&').forEach(item => (kv => kv[0] && (q[kv[0]] = kv[1]))(item.split('='))), q))({}))(search.split('?')[1]);
    
    // 对应ES5实现
    var query = function(search) {
      if (search === void 0) { search = ''; }
      return (function(querystring) {
        if (querystring === void 0) { querystring = ''; }
        return (function(q) {
          return (querystring.split('&').forEach(function(item) {
            return (function(kv) {
              return kv[0] && (q[kv[0]] = kv[1]);
            })(item.split('='));
          }), q);
        })({});
      })(search.split('?')[1]);
    };
    
    query('?key1=value1&key2=value2'); // es6.html:14 {key1: "value1", key2: "value2"}

## 获取URL参数 ##

function getQueryString(key){
      var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if(r!=null){
          return  unescape(r[2]);
      }
      return null;
    }

## n维数组展开成一维数组 ##

> 注：更多方法请参考 [《How to flatten nested array in JavaScript?》][How to flatten nested array in JavaScript]

## 日期格式化 ##

// 方法一
    function format1(x, y) {
      var z = {
        y: x.getFullYear(),
        M: x.getMonth() + 1,
        d: x.getDate(),
        h: x.getHours(),
        m: x.getMinutes(),
        s: x.getSeconds()
      };
      return y.replace(/(y+|M+|d+|h+|m+|s+)/g, function(v) {
        return ((v.length > 1 ? "0" : "") + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2))
      });
    }
    
    format1(new Date(), 'yy-M-d h:m:s'); // 17-10-14 22:14:41
    
    // 方法二
    Date.prototype.format = function (fmt) { 
      var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
      };
      if (/(y+)/.test(fmt)){
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      } 
      for (var k in o){
        if (new RegExp("(" + k + ")").test(fmt)){
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
      }     
      return fmt;
    }
    
    new Date().format('yy-M-d h:m:s'); // 17-10-14 22:18:17

## 统计文字个数 ##

## 特殊字符转义 ##

function htmlspecialchars (str) {
 var str = str.toString().replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"');
 return str;
 }
 
 htmlspecialchars('&jfkds<>'); // "&jfkds<>"

## 动态插入js ##

function injectScript(src) {
        var s, t;
        s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = src;
        t = document.getElementsByTagName('script')[0];
        t.parentNode.insertBefore(s, t);
    }

## 格式化数量 ##

// 方法一
    function formatNum (num, n) {
      if (typeof num == "number") {
        num = String(num.toFixed(n || 0));
        var re = /(-?\d+)(\d{3})/;
        while (re.test(num)) num = num.replace(re, "$1,$2");
        return num;
      }
      return num;
    }
    
    formatNum(2313123, 3); // "2,313,123.000"
    
    // 方法二
    '2313123'.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // "2,313,123"
    
    // 方法三
    function formatNum(str) {
      return str.split('').reverse().reduce((prev, next, index) => {
        return ((index % 3) ? next : (next + ',')) + prev
      });
    }
    
    formatNum('2313323'); // "2,313,323"

## 身份证验证 ##

## 测试质数 ##

function isPrime(n) {
      return !(/^.?$|^(..+?)\1+$/).test('1'.repeat(n))
    }

## 统计字符串中相同字符出现的次数 ##

var arr = 'abcdaabc';
    
    var info = arr
        .split('')
        .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {});
    
    console.log(info); //{ a: 3, b: 2, c: 2, d: 1 }

## 使用`void 0`来解决`undefined`被污染问题 ##

undefined = 1;
    !!undefined; // true
    !!void(0); // false

## 单行写一个评级组件 ##

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

## JavaScript 错误处理的方式的正确姿势 ##

try {
        something
    } catch (e) {
        window.location.href =
            "http://stackoverflow.com/search?q=[js]+" +
            e.message;
    }

## 匿名函数自执行写法 ##

( function() {}() );
    ( function() {} )();
    [ function() {}() ];
    
    ~ function() {}();
    ! function() {}();
    + function() {}();
    - function() {}();
    
    delete function() {}();
    typeof function() {}();
    void function() {}();
    new function() {}();
    new function() {};
    
    var f = function() {}();
    
    1, function() {}();
    1 ^ function() {}();
    1 > function() {}();

## 两个整数交换数值 ##

var a = 20, b = 30;
    a ^= b;
    b ^= a;
    a ^= b;
    
    a; // 30
    b; // 20

## 数字字符转数字 ##

var a = '1';
    +a; // 1

## 最短的代码实现数组去重 ##

[...new Set([1, "1", 2, 1, 1, 3])]; // [1, "1", 2, 3]

## 用最短的代码实现一个长度为m(6)且值都n(8)的数组 ##

Array(6).fill(8); // [8, 8, 8, 8, 8, 8]

## 将argruments对象转换成数组 ##

var argArray = Array.prototype.slice.call(arguments);
    
    // ES6：
    var argArray = Array.from(arguments)
    
    // or
    var argArray = [...arguments];

## 获取日期时间缀 ##

// 获取指定时间的时间缀
    new Date().getTime();
    (new Date()).getTime();
    (new Date).getTime();
    // 获取当前的时间缀
    Date.now();
    // 日期显示转换为数字
    +new Date();

## 使用`~x.indexOf('y')`来简化`x.indexOf('y') > -1` ##

var str = 'hello world';
    if (str.indexOf('lo') > -1) {
      // ...
    }
    
    if (~str.indexOf('lo')) {
      // ...
    }

## `parseInt()` or `Number()` ##

两者的差别之处在于**解析**和**转换**两者之间的理解。

解析**允许**字符串中含有非数字字符，解析按从左到右的顺序，如果遇到非数字字符就停止。而转换**不允许**出现非数字字符，否者会失败并返回NaN。

var a = '520';
    var b = '520px';
    
    Number(a); // 520
    parseInt(a); // 520
    
    Number(b); // NaN
    parseInt(b); // 520

`parseInt`方法第二个参数用于指定转换的基数，ES5默认为10进制。

parseInt('10', 2); // 2
    parseInt('10', 8); // 8
    parseInt('10', 10); // 10
    parseInt('10', 16);  // 16

对于网上`parseInt(0.0000008)`的结果为什么为8，原因在于0.0000008转换成字符为"8e-7"，然后根据`parseInt`的解析规则自然得到"8"这个结果。

## `+`拼接操作，`+x` or `String(x)`？ ##

\+运算符可用于数字加法，同时也可以用于字符串拼接。如果+的其中一个操作符是字符串(或者通过 隐式强制转换可以得到字符串)，则执行字符串拼接；否者执行数字加法。

需要注意的时对于数组而言，不能通过`valueOf()`方法得到简单基本类型值，于是转而调用`toString()`方法。

[1,2] + [3, 4]; // "1,23,4"

对于对象同样会先调用`valueOf()`方法，然后通过`toString()`方法返回对象的字符串表示。

var a = {};
    a + 123; // "[object Object]123"

对于`a + ""`隐式转换和`String(a)`显示转换有一个细微的差别：`a + ''`会对a调用`valueOf()`方法，而`String()`直接调用`toString()`方法。大多数情况下我们不会考虑这个问题，除非真遇到。

var a  = {
      valueOf: function() { return 42; },
      toString: function() { return 4; }
    }
    
    a + ''; // 42
    String(a); // 4

## 判断对象的实例 ##

// 方法一: ES3
    function Person(name, age) {
      if (!(this instanceof Person)) {
        return new Person(name, age);
      }
      this.name = name;
      this.age = age;
    }
    
    // 方法二: ES5
    function Person(name, age) {
      var self = this instanceof Person ? this : Object.create(Person.prototype);
      self.name = name;
      self.age = age;
    
      return self;
    }
    
    // 方法三：ES6
    function Person(name, age) {
      if (!new.target) {
        throw 'Peron must called with new';
      }
      this.name = name;
      this.age = age;
    }

## 数据安全类型检查 ##

// 对象
    function isObject(value) {
      return Object.prototype.toString.call(value).slice(8, -1) === 'Object'';
    }
    
    // 数组
    function isArray(value) {
      return Object.prototype.toString.call(value).slice(8, -1) === 'Array';
    }
    
    // 函数
    function isFunction(value) {
      return Object.prototype.toString.call(value).slice(8, -1) === 'Function';
    }

## 让数字的字面值看起来像对象 ##

2.toString(); // Uncaught SyntaxError: Invalid or unexpected token
    
    2..toString(); // 第二个点号可以正常解析
    2 .toString(); // 注意点号前面的空格
    (2).toString(); // 2先被计算

## 对象可计算属性名(仅在ES6中) ##

var suffix = ' name';
    var person = {
      ['first' + suffix]: 'Nicholas',
      ['last' + suffix]: 'Zakas'
    }
    
    person['first name']; // "Nicholas"
    person['last name']; // "Zakas"

## 数字四舍五入 ##

// v: 值，p: 精度
    function (v, p) {
      p = Math.pow(10, p >>> 31 ? 0 : p | 0)
      v *= p;
      return (v + 0.5 + (v >> 31) | 0) / p
    }
    
    round(123.45353, 2); // 123.45

## 在浏览器中根据url下载文件 ##

## 快速生成UUID ##

function uuid() {
      var d = new Date().getTime();
      var uuid = 'xxxxxxxxxxxx-4xxx-yxxx-xxxxxxxxxxxx'.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;
    };
    
    uuid(); // "33f7f26656cb-499b-b73e-89a921a59ba6"

## JavaScript浮点数精度问题 ##

function isEqual(n1, n2, epsilon) {
      epsilon = epsilon == undefined ? 10 : epsilon; // 默认精度为10
      return n1.toFixed(epsilon) === n2.toFixed(epsilon);
    }
    
    0.1 + 0.2; // 0.30000000000000004
    isEqual(0.1 + 0.2, 0.3); // true
    
    0.7 + 0.1 + 99.1 + 0.1; // 99.99999999999999
    isEqual(0.7 + 0.1 + 99.1 + 0.1, 100); // true

## 格式化表单数据 ##

## 创建指定长度非空数组 ##

在JavaScript中可以通过`new Array(3)`的形式创建一个长度为3的空数组。在老的Chrome中其值为\[undefined x 3\]，在最新的Chrome中为\[empty x 3\]，即空单元数组。在老Chrome中，相当于显示使用`[undefined, undefined, undefined]`的方式创建长度为3的数组。

但是，两者在调用`map()`方法的结果是明显不同的

var a = new Array(3);
    var b = [undefined, undefined, undefined];
    
    a.map((v, i) => i); // [empty × 3]
    b.map((v, i) => i); // [0, 1, 2]

多数情况我们期望创建的是包含`undefined`值的指定长度的空数组，可以通过下面这种方法来达到目的：

var a = Array.apply(null, { length: 3 });
    
    a; // [undefined, undefined, undefined]
    a.map((v, i) => i); // [0, 1, 2]

总之，尽量不要创建和使用空单元数组。

## debounce方法 ##

`debounce()`方法用来延迟执行函数。

## 判断客户端 ##

[How to flatten nested array in JavaScript]: https://stackoverflow.com/questions/27266550/how-to-flatten-nested-array-in-javascript