小知识随手记（十一）：一行代码实现星级评分、同步阻塞实现sleep函数、一行代码生成随机字符串（唯一ID/Number.prototype.toString([radix])用法）、获取浏览器Cookie的值、颜色RGB转十六进制、使用数字分隔符、try...catch...finally 与 return 一起使用的问题、最快获取dom的方法（ID同名变量获取 dom 元素）

一、一行代码实现星级评分

const getRate = (rate = 0) => '★★★★★☆☆☆☆☆'.slice(5 - rate, 10 - rate);
getRate(3);

　　记下，这还是比较巧妙的。

二、同步阻塞法实现sleep函数

const sleep = delay => {
    const start = new Date().getTime();
    while (new Date().getTime() < start + delay) {
       continue;
    };
};
console.log(1);
sleep(3000);
console.log(2);

三、一行代码生成随机字符串（唯一ID）

　　也许你需要临时的唯一ID，这是一个技巧，你可以使用它生成随机字符串

const randomString = () => Math.random().toString(36).slice(2);

　　Math.random().toString(36) ，toString(36) 里面的36是做什么用的：

　　Number.prototype.toString([radix])中的 radix 指定要用于数字到字符串的转换的基数(从2到36)。如果未指定 radix 参数，则默认值为 10。所有不在范围内的基数会报错：Uncaught RangeError: toString() radix argument must be between 2 and 36

Math.random().toString(36)
// '0.8p0w72uxgjr'

　　先是 Math.random() 生成 [0, 1) 的数，也就是0.123312、0.982931之类的，然后调用 number 的 toString方法将其转换成36进制的，按照MDN的说法，36进制的转换应该是包含了字母a~z 和数字0~9的，因为这样生成的是 0.89kjna21sa 类似这样的，所以要截取一下小数部分，即从索引 2 开始截取10个字符就是我们想要的随机字符串了。很多开源库都使用此方式为DOM元素创建随机ID。

四、获取浏览器Cookie的值、清除全部Cookie

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
cookie('_ga');

const clearCookies = document.cookie.split(';').forEach(
　　cookie => 
　　document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

　　通过使用document.cookie访问cookie并将其清除，可以轻松清除网页中存储的所有cookie。

五、颜色RGB转十六进制、生成随机十六进制颜色

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(0, 51, 255); 
// Result: #0033ff

　　可以使用 Math.random 和 padEnd 属性生成随机的十六进制颜色。

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// Result: #92b008

六、数字分隔符

// 有时你会在文件中定义一个数字常量
const myMoney = 1000000000000

　　这么多个 0 ，1、2 ... 6、7 ... 数晕了都，怎么办？—— 数字分隔符整起来！

const myMoney = 1_000_000_000_000
console.log(myMoney)  // 1000000000000

　　这样写是没问题的，而且数字分割开后也更直观！！

七、try...catch...finally 与 return 一起使用 - 谁厉害（finally 更厉害）

　　普通函数调用中，return 一般会提前结束函数的执行，而在 try...catch...finally 中，return 就不会提前结束执行。先看一个问题：

function demo () {
  try {
    return 1
  } catch (err) {
    console.log(err)
    return 2
  } finally {
    return 3
  }
}

console.log(demo())   // 返回什么？？

　　答案是：3。由此可见，还是 finally 比较厉害。那么我们可以搞一些骚操作

function demo () {
  try {
    return 1
  } catch (err) {
    console.log(err)
    return 2
  } finally {
    try {
      return 3
    } finally {
      return 4
    }
  }
}
console.log(demo())  // 返回 4

八、最快获取dom的方法

　　HTML中带有 id 属性的元素，都会被全局的 ID 同名变量所引用

<div id="zero2one"></div>
// 原本获取 dom 是这样的
const el = document.getElementById('zero2one')  
console.log(el)   // <div id="zero2one"></div>

// 现在可以这样
console.log(zero2one)   // <div id="zero2one"></div>

　　是不是很方便，我们直接来测试下：我这个页面有 id 为 ticket 的 html 元素，我直接在控制台输入 ticket 变量，就拿到了该 dom 元素。