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的键盘控制事件说明
Apr 15 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
script标签属性用type还是language
Jan 21 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 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
通过html表格发电子邮件
2006/10/09 PHP
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP 面向对象详解
2012/09/13 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
ASP Json Parser修正版
2009/12/06 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
详解JS函数防抖
2020/06/05 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
python比较两个列表大小的方法
2015/07/11 Python
Python内建数据结构详解
2016/02/03 Python
Python中文件的读取和写入操作
2018/04/27 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
利用Python检测URL状态
2019/07/31 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python如何重新加载模块
2020/07/29 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
python中time.ctime()实例用法
2021/02/03 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
出国签证在职证明
2014/09/20 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
门卫管理制度范本
2015/08/05 职场文书