JavaScript常用工具函数库汇总

2024-09-27 23:04:57

对象或数组的深拷贝

/**
 * 对象或数组的深拷贝
 * @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 co 函数库的含义和用法实例总结

本文实例讲述了JS co 函数库的含义和用法.分享给大家供大家参考,具体如下: 继续学习阮一峰老师异步编程四部曲之三:co co在很早之前就听超哥讲过,说在node编程中大量用到,源码很简单,但是想法很强大. 让我有空抓紧了解下,前一段时间弄离职的事情,跑来跑去累的够呛. 现在终于一切回归正常了,还在拼命的适应新公司的节奏.只能趁周末继续学习了. 好了,不瞎扯了,回归主题,前两篇文章我们分别学习了 Generator 函数和 Thunk 方式的自动执行. 今天我们接着上次的思路学习使用 co 工
JavaScript 常用函数库详解

为此,收集了自己平时常用到一些JavaScript函数,它们在其它的JS库也常见,现在整理并附上注释,方便查阅,希望对大家有所帮助.注:假设以下所有函数都放在一个CC对象中,方便引用. 复制代码代码如下: //这个方法相信是最常用的了, //它虽然没有选择器那么强大,但也有个小增强版,可查指定结点下ID所在的子元素 function $(id, p) { //id是否是字符串,还是一个HTML结点 var iss = id instanceof String || typeof id == "
js 通用javascript函数库整理

复制代码代码如下: /* * 包含jquery-1.3.2.min.js */ document.write("<script language='javascript' src='js/jquery-1.3.2.min.js'></script>"); /* * 公共参数 */ var hostUrl='http://'+window.location.host; //获取网站主机头 /* * 水平居中left值 */ function HorCenter(
初步认识JavaScript函数库jQuery

jQuery 库可以通过一行简单的标记被添加到网页中. jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. 可以通过下面的标记把 jQuer
（推荐一个超好的JS函数库）S.Sams Lifexperience ScriptClassLib

1/**//*------------------------------------------------------------ 2 * S.Sams Lifexperience 3 * CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib 4 * MSNLive: S.Sams#msn.com 5 * Http://blog.8see.net/ 6 * UPdate
javascript函数库-集合框架

Classes: Collections Arrays ArrayList SortedList extends ArrayList HashMap HashSet */ /**************** Collections NOTE:sort() return a new List ****************/ function Collections(){} Collections.sort=function(){ if(arguments.length==1){ var s=
在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法

easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步设置网页. 首先导入easyUI函数库: <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
基于prototype扩展的JavaScript常用函数库

复制代码代码如下: /** 2 * 检索数组元素(原型扩展或重载) 3 * @param {o} 被检索的元素值 4 * @type int 5 * @returns 元素索引 6 */ 7 Array.prototype.contains = function(o) { 8 var index = -1; 9 for(var i=0;i<this.length;i++){if(this[i]==o){index = i;break;}} return index; } /** * 日期格式化
通用javascript脚本函数库方便开发

将下面代码保存为Common.js 类库功能: 1.Trim(str)--去除字符串两边的空格 2.XMLEncode(str)--对字符串进行XML编码 3.ShowLabel(str,str)--鼠标提示功能(显示字符,提示字符) 可以设置显示的提示的文字的字体.颜色.大小以及提示的背景颜色.边框等 4.IsEmpty(obj)--验证输入框是否为空 5.IsInt(objStr,sign,zero)--验证是否为整数,正整数,负整数,以及是否包括零 6.IsFloat(objStr,sig
JavaScript常用工具函数库汇总

对象或数组的深拷贝 /** * 对象或数组的深拷贝 * @param {*} cloneObj 被克隆的对象 * @param {*} targetObj 克隆的目标对象 * @param {*} isOverride 若属性重复,是否覆盖被克隆对象的属性 */ function deepClone(cloneObj, targetObj, isOverride = true) { const _toString = Object.prototype.toString if (_toString
JavaScript常用工具函数汇总（浏览器环境）

前端业务中比较常用的JavaScript工具函数,浏览器环境常用,可直接拷贝在项目里使用.这里统一整理,方便查阅,本文章会持续更新. 一.file转为base64 /** * file转为base64 * @param {*} file file对象 * @param {*} callback */ export const fileToDataURL = (file, callback) => { let freader = new FileReader(); freader.readAsDa
JavaScript常用工具函数大全

本文实例总结了JavaScript常用工具函数.分享给大家供大家参考,具体如下: 为元素添加on方法 Element.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = function (event, fn) {. []['forEach'].call(this, function (el) { el.on(event, fn); }); return this; }; 为元素添加trigger方
JavaScript常用验证函数实例汇总

本文实例汇总了JavaScript常用验证函数.分享给大家供大家参考.具体汇总如下: 一.字符串类验证 1. 长度限制复制代码代码如下: <script> function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符!"); document.a.b.focus(); return false; } } </script> <form name=a onsubmit=&
一文掌握JavaScript数组常用工具函数总结

目录一. 实现Array.isArray 二. 将类数组转换为数组 1. 借用数组的方法进行转换 2. es6的方式转换三. 判断是否为数组四. 数组方法实现 1.forEach 2. filter 3. every 4. some 5. findIndex 6. Reduce 五. 实现数组扁平化 1. 普通递归+concat 2. reduce+concat 3. while+concat 4. toString+split 5. flat 6. 正则六. 去重 1. 利用 ES6
一些手写JavaScript常用的函数汇总

前言在JavaScript中,几乎每次编写一段代码时,通常都会写入一个函数.我们的大部分代码执行都是函数调用的结果.所以本文主要给大家介绍了一些JavaScript常用的函数,下面话不多说了,来一起看看详细的介绍吧 JavaScript常用的函数一.bind.call.apply函数的实现改变函数的执行上下文中的this指向,但不执行该函数(位于Function构造函数的原型对象上的方法) Function.prototype.myBind = function (target) { if
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】

本文实例总结了PHP常用工具函数.分享给大家供大家参考,具体如下: 移除XSS攻击脚本 function RemoveXSS($val) { // remove all non-printable characters. CR(0a) and LF(0b) and TAB(9) are allowed // this prevents some character re-spacing such as <java\0script> // note that you have to handle
JavaScript常用数学函数用法示例

本文实例讲述了JavaScript常用数学函数用法.分享给大家供大家参考,具体如下: 一.代码 <script language="javascript"> <!-- document.write("欧拉常数e的值为(e属性):"+Math.E+"<br>"); document.write("2的自然对数为(LN2属性):"+Math.LN2+"<br>");//
Lua中的常用函数库汇总

lua库函数这些函数都是Lua编程语言的一部分, 点击这里了解更多. assert(value) - 检查一个值是否为非nil, 若不是则(如果在wow.exe打开调试命令)显示对话框以及输出错误调试信息 collectgarbage() - 垃圾收集器. (新增于1.10.1) date(format, time) - 返回当前用户机器上的时间. error("error message",level) - 发生错误时,输出一条定义的错误信息.使用pcall() (见下面)捕捉错误
Python常用断言函数实例汇总

Python assert 语句,又称断言语句,可以看做是功能缩小版的 if 语句,它用于判断某个表达式的值,如果值为真,则程序可以继续往下执行:反之,Python 解释器会报 AssertionError 错误. assert 语句的语法结构为: assert 表达式 assert 语句的执行流程可以用 if 判断语句表示(等效),如下所示: if 表达式==True: 程序继续执行 else: 程序报 AssertionError 错误有读者可能会问,明明 assert 会令程序崩溃,为什

JavaScript常用工具函数库汇总

相关推荐

随机推荐