JavaScript常用工具函数库汇总

 更新时间:2020年09月17日 08:38:08   作者:大明的IT笔记  
业务中比较常用的JavaScript工具函数,可以用在前端环境,也可以用在node服务端,统一整理,方便查阅,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下

对象或数组的深拷贝

/**
 * 对象或数组的深拷贝
 * @param {*} cloneObj 被克隆的对象
 * @param {*} targetObj 克隆的目标对象
 * @param {*} isOverride 若属性重复,是否覆盖被克隆对象的属性
 */
function deepClone(cloneObj, targetObj, isOverride = true) {
 const _toString = Object.prototype.toString
 if (_toString.call(cloneObj) !== '[object Array]' && _toString.call(cloneObj) !== '[object Object]') {
  return cloneObj
 }
 var cloneTarget = _toString.call(cloneObj) === '[object Array]' ? [] : {}
 for (let key in cloneObj) {
  if (Object.prototype.hasOwnProperty.call(cloneObj, key)) {
   if (_toString.call(cloneObj[key]) === '[object Array]' || _toString.call(cloneObj[key]) === '[object Object]') {
    cloneTarget[key] = deepClone(cloneObj[key])
   } else {
    cloneTarget[key] = cloneObj[key]
   }
  }
 }
 if (targetObj && (_toString.call(cloneObj) === _toString.call(targetObj))) {
  //这里要注意,克隆的目标对象也要deepClone下
  cloneTarget = isOverride
   ? Object.assign(cloneTarget, deepClone(targetObj))
   : Object.assign(deepClone(targetObj), cloneTarget)
 }
 return cloneTarget
}

精准判断数据类型

//精准判断数据类型
function getVerifyDataTypes() {
 const types = ["String", "Number", "Boolean", "Null", "Undefined", "Function", "Object", "Array", "Date", "Error", "RegExp", "Symbol", "Map", "Set"]
 let Type = {}
 // 示例用法:Type.isString('javascript')
 for (let i = 0; i < types.length; i++) {
  Type[`is${types[i]}`] = obj => Object.prototype.toString.call(obj) === `[object ${types[i]}]`
 }
 // 判断字符串是否为json格式
 Type.isJsonStr = str => {
  if (typeof str == 'string') {
   try {
    let obj = JSON.parse(str);
    if (obj && typeof obj == 'object') {
     return true;
    }
    return false;
   } catch (e) {
    return false;
   }
  } else {
   return false;
  }
 }
 return Type
}

日期格式化

/**
 * 日期格式化
 * @param {*} date 日期对象
 * @param {*} beforeHyphen 年月日连字符
 * @param {*} afterHyphen 时分秒连字符
 */
function formatDate(date = new Date(), beforeHyphen = '-', afterHyphen = ':') {
 const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
 }
 const year = date.getFullYear()
 const month = date.getMonth() + 1
 const day = date.getDate()
 const hour = date.getHours()
 const minute = date.getMinutes()
 const second = date.getSeconds()
 const ymd = [year, month, day].map(formatNumber).join(beforeHyphen)
 const hms = [hour, minute, second].map(formatNumber).join(afterHyphen)
 return `${ymd} ${hms}`
}

把时间戳转换为剩余的天、时、分、秒

/**
 * 把时间戳转换为剩余的天、时、分、秒,一般应用于倒计时场景中
 * @param {*} timestamp 时间戳
 */
function converTimestamp(timestamp) {
 const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
 }
 let day = Math.floor((timestamp / 1000 / 3600) / 24);
 let hour = Math.floor((timestamp / 1000 / 3600) % 24);
 let minute = Math.floor((timestamp / 1000 / 60) % 60);
 let second = Math.floor(timestamp / 1000 % 60);
 return {
  day: day,
  hour: formatNumber(hour),
  minute: formatNumber(minute),
  second: formatNumber(second)
 }
}

从数组中随机取出一项

// 从数组中随机取出一项
function getRandomItemByArray(items) {
 return items[Math.floor(Math.random() * items.length)];
}

将有父子关系的数组转换成树形结构数据

let data = [
 { parentId: 0, id: 1, value: 'xxx' },
 { parentId: 1, id: 3, value: 'xxx' },
 { parentId: 4, id: 6, value: 'xxx' },
 { parentId: 3, id: 5, value: 'xxx' },
 { parentId: 2, id: 4, value: 'xxx' },
 { parentId: 1, id: 2, value: 'xxx' },
]

// 转换为树形Array结构
function toTreeAry(arr, pId = 0) {
 return arr
  .filter(({ parentId }) => parentId === pId)
  .map(a => ({
   ...a,
   children: toTreeAry(arr.filter(({ parentId }) => parentId !== pId), a.id)
  }))
}

// 转换为树形Object结构
function toTreeObj(arr, pId = 0) {
 let res = {}
 arr.filter(({ parentId }) => parentId === pId)
  .forEach(a => {
   res[a.id] = {
    ...a,
    children: toTreeObj(arr.filter(({ parentId }) => parentId !== pId), a.id)
   }
  })
 return res
}

console.log(toTreeAry(data))
console.log(toTreeObj(data))

生成随机字符串

// 随机字符串
const randomStr = () => {
 return new Date().getTime() + '-' + Math.random().toString(36).substr(2)
}

过滤html标签

// 过滤html标签
const filterHTMLTag = (str) => {
 str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
 str = str.replace(/[|]*\n/, '') //去除行尾空格
 str = str.replace(/&npsp;/ig, ''); //去掉npsp
 return str;
}

以上就是JavaScript常用工具函数库汇总的详细内容,更多关于JavaScript工具函数库的资料请关注脚本之家其它相关文章!

相关文章

  • JS求解两数之和算法详解

    JS求解两数之和算法详解

    这篇文章主要介绍了JS求解两数之和算法,结合实例形式详细分析了JS求解两数之和算法相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 基于JavaScript实现复选框的全选和取消全选

    基于JavaScript实现复选框的全选和取消全选

    这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 基于JavaScript编写一个翻卡游戏

    基于JavaScript编写一个翻卡游戏

    这篇文章主要为大家详细介绍了如何溧阳JavaScript编写一个简单的翻卡游戏,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下
    2023-02-02
  • 详解ES6 中的Object.assign()的用法实例代码

    详解ES6 中的Object.assign()的用法实例代码

    这篇文章主要介绍了ES6 Object.assign()的用法及用途,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • JavaScript输入邮箱自动提示实例代码

    JavaScript输入邮箱自动提示实例代码

    这篇文章主要介绍了JavaScript输入邮箱自动提示实例代码,有需要的朋友可以参考一下
    2014-01-01
  • js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    本篇文章主要介绍了js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • requirejs按需加载angularjs文件实例

    requirejs按需加载angularjs文件实例

    本篇文章主要介绍了requirejs按需加载angularjs文件实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • JS实现自动切换文字的导航效果代码

    JS实现自动切换文字的导航效果代码

    这篇文章主要介绍了JS实现自动切换文字的导航效果代码,涉及javascript动态切换页面样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • Javascript的闭包

    Javascript的闭包

    所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
    2009-12-12
  • javascript对中文按照拼音排序代码

    javascript对中文按照拼音排序代码

    将中文编入数组,调用数组的sort方法,再用到一个localeCompare即可实现中文排序,需要的朋友可以参考下
    2014-08-08

最新评论