代码段(3).md

async/await 并发执行

async/await并不一定必须单个顺序执行，配合 Promise.all可以并发：

function sleep(timer = 1000) {
  return new Promise(resolve => {
    setTimeout(()=>{ resolve(timer) }, timer)
  })
}
async function fn1() {
  const arr = [1, 2, 3, 4, 5, 6]
  // 并行执行所有的
  const down = await Promise.all(arr.map(i => sleep(i * 1000)))
  console.log('down:', down)
}

fn1()

自定义滚动条相关的七个伪元素

• ::-webkit-scrollbar：整个滚动条
• ::-webkit-scrollbar-button：滚动条上的按钮（下下箭头）
• ::-webkit-scrollbar-thumb：滚动条上的滚动滑块
• ::-webkit-scrollbar-track：滚动条轨道
• ::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
• ::-webkit-scrollbar-corner：当同时有垂直和水平滚动条时交汇的部分
• ::-webkit-resizer：某些元素的交汇部分的部分样式（类似 textarea的可拖动按钮）

16进制颜色代码生成

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

驼峰命名转下划线

function camel2Underline(name) {
  return name.match(/[a-z][0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase()
}

日期格式化

// 版本1
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' : '') + z[v.slice(-1)]).slice(-(v.length > 2 ? v.length : 2))
  })
}
// 版本2
Date.prototype.format2 = 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)) {
    // 这里 RegExp的用法挺有意思的
    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
}

// 使用
format1(new Date(), 'yy-MM-dd hh:m:ss')  // 18-08-23 11:46:11
new Date().format2('yyyy-M-d h:m:s')  // 2018-8-23 11:46:11

数字四舍五入

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

浏览器原生 Base64编码和解码方法

支持度为 IE10+，其他主流浏览器完全支持

编码(btoa):

window.btoa(stringToEncode)

解码(atob)：

// encodedData 代表 base64字符串
window.atob(encodedData)

对中文进行编码会报错，可以先将中文转码，再进行编码，解码同样如此：

window.btoa(window.encodeURIComponent('嘻嘻哈哈'))
window.atob(window.decodeURIComponent('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4'))

如果 IE9-浏览器需要此功能，可使用 polyfill， 然后像下面这样引入即可：

<!--[if IE]>
<script src="./base64-polyfill.js"></script>
<![endif]-->

任意文件也可以使用此 api进行编码和解码，使用 FileReader:

var reader = new FileReader();
reader.onload = function(e) {
  // e.target.result就是该文件的完整Base64 Data-URI
};
reader.readAsDataURL(file);

获取当前时区

可以通过 new Date().getTimezoneOffset()获取到当前时区与 0时区的时间差(单位是分钟) 例如在东八区，值为 -480，也就是 8小时，就是东八区

compose函数的实现

function compose(...funcs) {
  if (funcs.length === 0) return arg => arg
  if (funcs.length === 1) return funcs[0]
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
// 使用
const a = x => x + 1.2
const b = x => x * 10
const c = (x, y) => x + y
// 从右向左执行
compose(a, b, c)(2, 3)  // => 51.2

模拟实现 new关键字

function myNew() {
  const obj = Object.create(null)
  const Con = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototpe
  const result = Con.apply(obj, arguments)
  return typeof result === 'object' ? result : obj
}