5 个 NICE 的 JavaScript 代码片段分享

精选原创

掘金安东尼 2022-09-10 16:09:14 ©著作权

文章标签 2d html 深拷贝 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者掘金安东尼的原创作品，请联系作者获取转载授权，否则将追究法律责任

减轻阅读负担，启发创作心智，轻松学习 JavaScript 技巧，日拱一卒，jym，冲~

5 个 NICE 的 JavaScript 代码片段分享_2d

本篇带来 5 个 NICE 的 JavaScript 代码片段分享

4 种 html string 转 dom 方式

我们最常常用到 document.createElement('div') 然后用 div.innerHTML 赋值可以将 html string 转成 dom；除此之外，还可以通过另外 3 种方式实现同样效果，代码如下：

收藏等于学会~

// 方式 1
function str2DOMFn1(str) {
  const div = document.createElement('div');
  div.innerHTML = str;
  return div.firstElementChild;
}

// 方式 2
function str2DOMFn2(str) {
  return new DOMParser().parseFromString(str, 'text/html').body
    .firstElementChild;
}

// 方式 3
function str2DOMFn3(str) {
  return document.createRange().createContextualFragment(str);
}

// 方式 4
function str2DOMFn4(str) {
  const div = document.createElement('div');
  div.insertAdjacentHTML('afterbegin', str);
  return div.firstElementChild;
}

// test
function main(name) {
  const str = `<h1>Hello ${name}</h1>`;
  const element1 = str2DOMFn1(str) 
  const element2 = str2DOMFn2(str) 
  const element3 = str2DOMFn3(str) 
  const element4 = str2DOMFn4(str) 
  document.body.appendChild(element1);
  document.body.appendChild(element2);
  document.body.appendChild(element3);
  document.body.appendChild(element4);
}

main('World');

在线地址：

5 个 NICE 的 JavaScript 代码片段分享_html_02

js 计算比特

我们常常需要计算比特大小，如何换算1024 是多少比特，可以用以下方法：

const formatBytes = (bytes, decimals = 2) => {
  if (bytes < 0) return '';
  if (bytes <= 1) return `${bytes}B`;
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`;
};

// 🎉 1KB
console.log(formatBytes(1024));

// 🎉 1MB
console.log(formatBytes(1024 ** 2));

4 种 js 格式化金钱方式

格式化金钱，我们提过很多次，这里提供 4 种方式进行格式化：

之前看有人问：为什么钱的格式要按千分位去划分？

原因是：依西方的习惯，每隔三位数加进一个逗号，也就是千位分隔符，以便更加容易认出数值。英语里没有“万”“亿”，只有“百万（million）”“十亿（billion）”，千位分隔符就是这么产生的。。。简而言之，“国际标准”~

// Option 1
function formatMoneyFn1(num) {
  return num.toLocaleString();
}

// Option 2
function formatMoneyFn2(num) {
  const nf = new Intl.NumberFormat();
  return nf.format(num);
}

// Option 3
function formatMoneyFn3(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// Option 4
function formatMoneyFn4(num) {
  const arr = num.toString().split('');
  let index = -3;
  while (arr.length + index > 0) {
    arr.splice(index, 0, ',');
    index -= 4;
  }
  return arr.join('');
}

// 🎉 '20,220,316'
console.log(formatMoneyFn1(20220316));
console.log(formatMoneyFn2(20220316));
console.log(formatMoneyFn3(20220316));
console.log(formatMoneyFn4(20220316));

解析 url 参数为对象

解析 url 参数，并生成对象，也是我们常常遇到的需求：

好用~

const getURLParams = (url) => {
  return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce((acc, cur) => {
    const [k, v] = cur.split('=');
    const p = acc[k];

    acc[k] = p ? (Array.isArray(p) ? p : [p]).concat(v) : v;
    return acc;
  }, {});
};

// 🎉 {}
console.log(getURLParams('google.com'));

// 🎉 { name: '1', age: '2' }
console.log(getURLParams('https://www.google.com/?name=1&age=2'));

// Support duplicate key
// 🎉 { name: '1', age: [ '2', '3' ] }
console.log(getURLParams('https://www.google.com/?name=1&age=2&age=3'));

// 🎉 { name: '1', age: '2' }
console.log(getURLParams('name=1&age=2'));

完全体深拷贝

什么样的深拷贝堪称完全体？即：任何类型的数据都会被深拷贝~ 看代码：

const deepClone = (obj, map = new WeakMap()) => {
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);

  if (map.has(obj)) {
    return map.get(obj);
  }

  const allDesc = Object.getOwnPropertyDescriptors(obj);
  const cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);

  map.set(obj, cloneObj);

  for (const key of Reflect.ownKeys(obj)) {
    const value = obj[key];

    cloneObj[key] =
      value instanceof Object && typeof value !== 'function'
        ? deepClone(value, map)
        : value;
  }
  return cloneObj;
};