JavaScript常用工具函数库汇总


Posted in Javascript onSeptember 17, 2020

对象或数组的深拷贝

/**
 * 对象或数组的深拷贝
 * @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工具函数库的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 函数调用的对象和方法
Jul 01 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
JS中Location使用详解
May 12 Javascript
javascript操作ul中li的方法
May 14 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
el-form 多层级表单的实现示例
Sep 10 #Javascript
详解React的回调渲染模式
Sep 10 #Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 #Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 #Javascript
vue中jsonp插件的使用方法示例
Sep 10 #Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 #Javascript
You might like
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python3中的json模块使用详解
2018/05/05 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
个人批评与自我批评
2014/10/15 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
初三化学教学反思
2016/02/22 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS