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 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
Angular的MVC和作用域
Dec 26 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
webpack项目轻松混用css module的方法
Jun 12 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
php根据用户语言跳转相应网页
2015/11/04 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
js表头排序实现方法
2015/01/16 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
Python实现Youku视频批量下载功能
2017/03/14 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python实现超市商品销售管理系统
2019/11/22 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
C语言编程题
2015/03/09 面试题
护理自荐信
2013/10/22 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
销售人员工作自我评价
2014/09/21 职场文书
市场督导岗位职责
2015/04/10 职场文书
公司2015年终工作总结
2015/05/26 职场文书
安全守法证明
2015/06/23 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL