{T}

代码片段

代理 console.log 函数

javascript
function log(msg) {
  console.log(msg);
}

log("hello world!") // hello world!

要传⼊多个参数要使用 apply() 函数

javascript
function log(){
  console.log.apply(console, arguments); 
};

格式化如期

获取今日日期 YYYY-MM-DD

javascript
function getDate() {
  let d = new Date()
  let year = d.getFullYear()
  let month = d.getMonth() + 1 // ⽉份⽐较特殊，0是1⽉，11是12⽉
  month = month < 10 ? "0" + month : month
  let day = d.getDate()
  day = day < 10 ? "0" + day : day
  let date = year + "-" + month + "-" + day
  console.log(date)
  return date
}

格式化时间戳

javascript
function parseTime(time) {
  if (time) {
    var date = new Date(time)
    var year = date.getFullYear()

    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
    // 拼接
    let dateNow = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
    console.log(dateNow)
    return dateNow
  } else {
    return ""
  }
}

parseTime(new Date())

格式化时间

javascript
export function formatTime(time) {
  time = +time * 1000
  const d = new Date(time)
  const now = Date.now()

  const diff = (now - d) / 1000

  if (diff < 30) {
    return "刚刚"
  } else if (diff < 3600) {
    return Math.ceil(diff / 60) + "分钟前"
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + "小时前"
  } else if (diff < 3600 * 24 * 2) {
    return "1天前"
  }

  return d.getMonth() + 1 + "月" + d.getDate() + "日" + d.getHours() + "时" + d.getMinutes() + "分"
}

类名操作

javascript
/**
 * Check if an element has a class
 * @param {HTMLElement} elm
 * @param {string} cls
 * @returns {boolean}
 */
export function hasClass(ele, cls) {
  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}

/**
* Add class to element
* @param {HTMLElement} elm
* @param {string} cls
*/
export function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += ' ' + cls
}

/**
* Remove class from element
* @param {HTMLElement} elm
* @param {string} cls
*/
export function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
    ele.className = ele.className.replace(reg, ' ')
  }
}

替换邮箱手机号关键信息

javascript
// 替换邮箱字符
export function regEmail(email) {
  if (String(email).indexOf("@") > 0) {
    const str = email.split("@")
    let _s = ""
    if (str[0].length > 3) {
      for (var i = 0; i < str[0].length - 3; i++) {
        _s += "*"
      }
    }
    var new_email = str[0].substr(0, 3) + _s + "@" + str[1]
    }
  console.log(new_email)
  return new_email
}

// 替换手机字符
export function regMobile(mobile) {
  if (mobile.length > 7) {
    var new_mobile = mobile.substr(0, 3) + "****" + mobile.substr(7)
    }
  console.log(new_mobile)
  return new_mobile
}

regEmail("12345678901@qq.com")
regMobile("12345678901") // 123****8901

判断外链

在函数体中使用了正则表达式 ^(https?:|mailto:|tel:) 来进行检查。字符串的开头(^)是否是 http: 、https:、mailto: 或 tel: 中的任何一个。

  • http: 和 https: 是网络链接的常见协议
  • mailto: 是用于电子邮件地址的协议
  • tel: 是用于电话号码的协议

isExternal 函数的作用就是检查输入的 path 是否是一个以 "http:"、"https:"、"mailto:" 或 "tel:" 开头的外部链接

javascript
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

防抖

javascript
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp; 

    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }

    return result
  }
}

rgb 颜色阶梯渐变效果

javascript
function gradientColor(startColor, endColor, step) {

  var startRGB = this.colorRgb(startColor);//转换为rgb数组模式
  var startR = startRGB[0];
  var startG = startRGB[1];
  var startB = startRGB[2];
  var endRGB = this.colorRgb(endColor);
  var endR = endRGB[0];
  var endG = endRGB[1];
  var endB = endRGB[2];
  var sR = (endR - startR) / step;//总差值
  var sG = (endG - startG) / step;
  var sB = (endB - startB) / step;
  var colorArr = [];
  for (var i = 0; i < step; i++) {
    //计算每一步的hex值 
    var hex = this.colorHex('rgb(' + parseInt((sR * i + startR)) + ',' 
              + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
    colorArr.push(hex);
  }
  return colorArr;
}

// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
gradientColor.prototype.colorRgb = function (sColor) {
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  var sColor = sColor.toLowerCase();
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      var sColorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }
      sColor = sColorNew;
    }
    //处理六位的颜色值
    var sColorChange = [];
    for (var i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
    }
    return sColorChange;
  } else {
    return sColor;
  }
};

// 将rgb表示方式转换为hex表示方式
gradientColor.prototype.colorHex = function (rgb) {
  var _this = rgb;
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  if (/^(rgb|RGB)/.test(_this)) {
    var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
    var strHex = "#";
    for (var i = 0; i < aColor.length; i++) {
      var hex = Number(aColor[i]).toString(16);
      hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
      if (hex === "0") {
        hex += hex;
      }
      strHex += hex;
    }
    if (strHex.length !== 7) {
      strHex = _this;
    }
    return strHex;
  } else if (reg.test(_this)) {
    var aNum = _this.replace(/#/, "").split("");
    if (aNum.length === 6) {
      return _this;
    } else if (aNum.length === 3) {
      var numHex = "#";
      for (var i = 0; i < aNum.length; i += 1) {
        numHex += (aNum[i] + aNum[i]);
      }
      return numHex;
    }
  } else {
    return _this;
  }
}
export {gradientColor}

使用

javascript
let colors = new gradientColor("#000", "#FFFFFF", 10)
console.log(colors)

// 输出
['rgb(0,0,0)','rgb(25,25,25)','rgb(51,51,51)','rgb(76,76,76)','rgb(102,102,102)','rgb(127,127,127)',
 'rgb(153,153,153)','rgb(178,178,178)','rgb(204,204,204)','rgb(229,229,229)']

随机 10–100 之间 10 个数字

javascript
let iArray = []

function getRandom(istart, iend) {
  var iChoice = iend - istart + 1
  return Math.floor(Math.random() * iChoice + istart)
}

for (var i = 0; i < 10; i++) {
  iArray.push(getRandom(10, 200))
}

iArray.sort((a, b) => a - b)

console.log(iArray)

提取 URL 中 GET 参数

有这样⼀个 URL ： http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e

javascript
function serilizeUrl(url) {
  var result = {};
  url = url.split("?")[1];
  var map = url.split("&");
  for (var i = 0, len = map.length; i < len; i++) {
    result[map[i].split("=")[0]] = map[i].split("=")[1];
  }
  return result;
}


console.log(serilizeUrl( 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'))

获取查询参数

可以使⽤ window 对象的属性，获取 URL 中的参数

javascript
window.location.search

如果⼀个 URL 为 https://www.baidu.com?project=js&type=1，那么通过上⾯操作就会获取到 ?project=js&type=1。如果在想获取到其中某⼀个参数，可以这样：

javascript
let type = new URLSearchParams(location.search).get('type');

计算代码性能

可以使⽤以下操作来计算代码的性能：

javascript
const startTime = performance.now();

// 某些程序
for(let i = 0; i < 1000; i++) {
  console.log(i) 
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 30.299999952316284