日常开发中，一般的程序员通常会遇到以下场景：

vue中遍历一个列表，但接口数据没有唯一标识，需要手动生成UUID来v-bind:key，怎么生成呢？Google一下运行一段复杂代码，记得好像H5新的Api Worker可以开启多线程执行还能避免阻塞，但是具体怎么用呢？Google一下当脱离框架，要实现删除一个节点、为节点添加或删除类、插入节点等操作时，隐隐记得好像都做过，但是忘了，Google一下遇到设备兼容问题要对某个环境做特殊处理时，怎么判断移动端下的ios设备的自带浏览器？Google一下有一个打乱数组的需求，这个我做过，(⊙o⊙)…好像写不太出来。算了，Google一下

不知道各位程序猿兄弟姐妹有没有出现以上类似场景，笔者是历历在目了。在开发时，很多功能我们都实现过，或者死记硬背过，或者看过实现原理。但是一旦到了应用的时候，脑袋便一片空白。所以还是那句老话，好记性不如烂笔头。开发不比面试，遇到问题随心所欲，要百度就百度，要谷歌就谷歌，但是查到的内容就参差不齐了，如果查到的文章本身就有问题，那试错成本就太高了。为了避免一般的程序员日复一日的Google，本文旨在打造一份满足日常开发的原生js代码片段库。可让一般的程序员可开箱即用，节省额外搜索的时间。

js代码片段使用 ES6 编写，已尽量精简和考虑兼容问题，大家可点赞、收藏一波，以便使用，闲暇时可常打开看看推敲其实现原理。

笔者会不定期更新哟，有问题可在评论区一起讨论，谢谢大家..

工具生成 UUID

const UUIDGeneratorBrowser = () =>  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>    (      c ^      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))    ).toString(16)  );// ExamplesUUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'

const parseCookie = (str) =>  str    .split(";")    .map((v) => v.split("="))    .reduce((acc, v) => {      acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());      return acc;    }, {});// ExamplesparseCookie("foo=bar; equation=E%3Dmc%5E2");// { foo: 'bar', equation: 'E=mc^2' }

const getURLParameters = (url) =>  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(    (a, v) => (      (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a    ),    {}  );// ExamplesgetURLParameters("google.com"); // {}getURLParameters(";);// {name: 'Adam', surname: 'Smith'}

以下方式仅在用户执行操作时有效，如：click 事件

const copyToClipboard = (str) => {  const el = document.createElement("textarea");  el.value = str;  el.setAttribute("readonly", "");  el.style.position = "absolute";  el.style.left = "-9999px";  document.body.appendChild(el);  const selected =    document.getSelection().rangeCount > 0      ? document.getSelection().getRangeAt(0)      : false;  el.select();  document.execCommand("copy");  document.body.removeChild(el);  if (selected) {    document.getSelection().removeAllRanges();    document.getSelection().addRange(selected);  }};// ExamplescopyToClipboard("Lorem ipsum"); // 'Lorem ipsum' copied to clipboard.

// 仅选中第一个元素const $ = document.querySelector.bind(document);// 选中所有const $$ = document.querySelectorAll.bind(document);const mainContent = $(".main-content");const externalLinks = $$('a[target="_blank"]');

const runAsync = (fn) => {  const worker = new Worker(    URL.createObjectURL(new Blob([`postMessage((${fn})());`]), {      type: "application/javascript; charset=utf-8",    })  );  return new Promise((res, rej) => {    worker.onmessage = ({ data }) => {      res(data), worker.terminate();    };    worker.onerror = (err) => {      rej(err), worker.terminate();    };  });};// Examplesconst longRunningFunction = () => {  let result = 0;  for (let i = 0; i < 1000; i++)    for (let j = 0; j < 700; j++)      for (let k = 0; k < 300; k++) result = result + i + j + k;  return result;};/*  NOTE: Since the function is running in a different context, closures are not supported.  The function supplied to `runAsync` gets stringified, so everything becomes literal.  All variables and functions must be defined inside.*/runAsync(longRunningFunction).then(console.log); // 209685000000runAsync(() => 10 ** 3).then(console.log); // 1000let outsideVariable = 50;runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'

作者：i.faker