Javascript 合集自己整理的收藏记录一下(最下面有惊喜)

1、校验数据类型

export const typeOf = function(obj) {return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}示例：
typeOf('树哥')  // string
typeOf([])  // array
typeOf(new Date())  // date
typeOf(null) // null
typeOf(true) // boolean
typeOf(() => { }) // function

2、防抖

export const debounce = (() => {let timer = nullreturn (callback, wait = 800) => {timer&&clearTimeout(timer)timer = setTimeout(callback, wait)}
})()示例：
如 vue 中使用
methods: {loadList() {debounce(() => {console.log('加载数据')}, 500)}
}

3、节流

export const throttle = (() => {let last = 0return (callback, wait = 800) => {let now = +new Date()if (now - last > wait) {callback()last = now}}
})()

4、手机号脱敏

export const hideMobile = (mobile) => {return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
}

5、大小写转换

//str 待转换的字符串
//type 1-全大写 2-全小写 3-首字母大写
export const turnCase = (str, type) => {switch (type) {case 1:return str.toUpperCase()case 2:return str.toLowerCase()case 3://return str[0].toUpperCase() + str.substr(1).toLowerCase() // substr 已不推荐使用return str[0].toUpperCase() + str.substring(1).toLowerCase()default:return str}
}示例：
turnCase('vue', 1) // VUE
turnCase('REACT', 2) // react
turnCase('vue', 3) // Vue

6、解析url参数

export const getSearchParams = () => {const searchPar = new URLSearchParams(window.location.search)const paramsObj = {}for (const [key, value] of searchPar.entries()) {paramsObj[key] = value}return paramsObj
}示例：
// 假设目前位于 https://****com/index?id=154513&age=18;
getSearchParams(); // {id: "154513", age: "18"}

7、判断手机是Andoird还是IOS

/** * 1: ios* 2: android* 3: 其它*/
export const getOSType=() => {let u = navigator.userAgent, app = navigator.appVersion;let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if (isIOS) {return 1;}if (isAndroid) {return 2;}return 3;
}

8、数组对象根据字段去重

参数：arr 要去重的数组
key 根据去重的字段名
export const uniqueArrayObject = (arr = [], key = 'id') => {if (arr.length === 0) returnlet list = []const map = {}arr.forEach((item) => {if (!map[item[key]]) {map[item[key]] = item}})list = Object.values(map)return list
}
示例：const responseList = [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' },{ id: 1, name: '黄老爷' },{ id: 2, name: '张麻子' },{ id: 3, name: '树哥' },{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' },
]uniqueArrayObject(responseList, 'id')
// [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' }]

9、滚动到页面顶部

export const scrollToTop = () => {const height = document.documentElement.scrollTop || document.body.scrollTop;if (height > 0) {window.requestAnimationFrame(scrollToTop);window.scrollTo(0, height - height / 8);}
}

10、滚动到元素位置

export const smoothScroll = element =>{document.querySelector(element).scrollIntoView({behavior: 'smooth'});
};示例：
smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素

11、uuid

export const uuid = () => {const temp_url = URL.createObjectURL(new Blob())const uuid = temp_url.toString()URL.revokeObjectURL(temp_url) //释放这个urlreturn uuid.substring(uuid.lastIndexOf('/') + 1)
}uuid() // a640be34-689f-4b98-be77-e3972f9bffdd

12、金额格式化

参数：{number} number：要格式化的数字
{number} decimals：保留几位小数
{string} dec_point：小数点符号
{string} thousands_sep：千分位符号
export const moneyFormat = (number, decimals, dec_point, thousands_sep) => {number = (number + '').replace(/[^0-9+-Ee.]/g, '')const n = !isFinite(+number) ? 0 : +numberconst prec = !isFinite(+decimals) ? 2 : Math.abs(decimals)const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sepconst dec = typeof dec_point === 'undefined' ? '.' : dec_pointlet s = ''const toFixedFix = function(n, prec) {const k = Math.pow(10, prec)return '' + Math.ceil(n * k) / k}s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')const re = /(-?\d+)(\d{3})/while (re.test(s[0])) {s[0] = s[0].replace(re, '$1' + sep + '$2')}if ((s[1] || '').length < prec) {s[1] = s[1] || ''s[1] += new Array(prec - s[1].length + 1).join('0')}return s.join(dec)
}示例：moneyFormat(10000000) // 10,000,000.00
moneyFormat(10000000, 3, '.', '-') // 10-000-000.000

13、存储操作

class MyCache {constructor(isLocal = true) {this.storage = isLocal ? localStorage : sessionStorage}setItem(key, value) {if (typeof (value) === 'object') value = JSON.stringify(value)this.storage.setItem(key, value)}getItem(key) {try {return JSON.parse(this.storage.getItem(key))} catch (err) {return this.storage.getItem(key)}}removeItem(key) {this.storage.removeItem(key)}clear() {this.storage.clear()}key(index) {return this.storage.key(index)}length() {return this.storage.length}
}const localCache = new MyCache()
const sessionCache = new MyCache(false)export { localCache, sessionCache }示例：localCache.getItem('user')
sessionCache.setItem('name','树哥')
sessionCache.getItem('token')
localCache.clear()

14、深拷贝

export const clone = parent => {// 判断类型const isType = (obj, type) => {if (typeof obj !== "object") return false;const typeString = Object.prototype.toString.call(obj);let flag;switch (type) {case "Array":flag = typeString === "[object Array]";break;case "Date":flag = typeString === "[object Date]";break;case "RegExp":flag = typeString === "[object RegExp]";break;default:flag = false;}return flag;};// 处理正则const getRegExp = re => {var flags = "";if (re.global) flags += "g";if (re.ignoreCase) flags += "i";if (re.multiline) flags += "m";return flags;};// 维护两个储存循环引用的数组const parents = [];const children = [];const _clone = parent => {if (parent === null) return null;if (typeof parent !== "object") return parent;let child, proto;if (isType(parent, "Array")) {// 对数组做特殊处理child = [];} else if (isType(parent, "RegExp")) {// 对正则对象做特殊处理child = new RegExp(parent.source, getRegExp(parent));if (parent.lastIndex) child.lastIndex = parent.lastIndex;} else if (isType(parent, "Date")) {// 对Date对象做特殊处理child = new Date(parent.getTime());} else {// 处理对象原型proto = Object.getPrototypeOf(parent);// 利用Object.create切断原型链child = Object.create(proto);}// 处理循环引用const index = parents.indexOf(parent);if (index != -1) {// 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象return children[index];}parents.push(parent);children.push(child);for (let i in parent) {// 递归child[i] = _clone(parent[i]);}return child;};return _clone(parent);
};此方法存在一定局限性：一些特殊情况没有处理: 例如Buffer对象、Promise、Set、Map。
如果确实想要完备的深拷贝，推荐使用 lodash 中的 cloneDeep 方法。深拷贝递归：
function deepClone(obj){let objClone = Array.isArray(obj)?[]:{};if(obj  typeof obj==="object"){for(key in obj){if(obj.hasOwnProperty(key)){//判断ojb子元素是否为对象，如果是，递归复制if(obj[key]typeof obj[key] ==="object"){objClone[key] = deepClone(obj[key]);}else{//如果不是，简单复制objClone[key] = obj[key];}}}}return objClone;
}
let a=[1,2,3,4],
b=deepClone(a);
a[0]=2;
console.log(a,b);
深拷贝 JSON.parse(JSON.stringify());
var inspecObj = JSON.parse(JSON.stringify(this.newAddData[0]));
弊端
JSON.parse(JSON.stringify())复制时间对象、Error对象、正则表达式，函数，或者undefined等值，此方法就会出现问题
1.如果json里面有时间对象，则序列化结果：时间对象=>字符串的形式；
2.如果json里有RegExp、Error对象，则序列化的结果将只得到空对象 RegExp、Error => {}；
3.如果json里有 function,undefined，则序列化的结果会把 function,undefined 丢失；
4.如果json里有NaN、Infinity和-Infinity，则序列化的结果会变成null；
5.如果json里有对象是由构造函数生成的，则序列化的结果会丢弃对象的 constructor；
6.如果对象中存在循环引用的情况也无法实现深拷贝
function deepClone(obj){let _obj = JSON.stringify(obj),objClone = JSON.parse(_obj);return objClone
}
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

15、模糊搜索

参数：list 原数组
keyWord 查询的关键词
attribute 数组需要检索属性
export const fuzzyQuery = (list, keyWord, attribute = 'name') => {const reg = new RegExp(keyWord)const arr = []for (let i = 0; i < list.length; i++) {if (reg.test(list[i][attribute])) {arr.push(list[i])}}return arr
}示例：const list = [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' },{ id: 4, name: '汤师爷' },{ id: 5, name: '胡万' },{ id: 6, name: '花姐' },{ id: 7, name: '小梅' }
]
fuzzyQuery(list, '树', 'name') // [{id: 1, name: '树哥'}]

16、遍历树节点

export const foreachTree = (data, callback, childrenName = 'children') => {for (let i = 0; i < data.length; i++) {callback(data[i])if (data[i][childrenName] && data[i][childrenName].length > 0) {foreachTree(data[i][childrenName], callback, childrenName)}}
}示例：假设我们要从树状结构数据中查找 id 为 9 的节点const treeData = [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]
}],let result
foreachTree(data, (item) => {if (item.id === 9) {result = item}
})
console.log('result', result)  // {id: 9,label: "三级 1-1-1"}

以上参考地址：20 个 JS 工具函数助力高效开发

20个不容错过的ES6技巧

25个有用的 JavaScript 单行代码

45 个 Git 经典操作场景，专治不会合代码

6 个 JavaScript 算术运算符

60个Vue常见问题汇总及解决方案

90% 的前端都会使用 ES6 来简化代码，你都用过哪些？

Array.forEach()和Array.map()方法之间的区别

Vue中组件神兵利器，插槽Slot！

60种前端常用的JavaScript函数方法汇总

实现数组去重的 9 种高阶方法

面试官：说说你对闭包的理解？闭包使用场景?

面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？

28个常用的JavaScript 数组方法备用清单

23个常用的JavaScript 字符串方法备忘清单

Vue-router各个属性的作用与用法

49 个在工作中常用且容易遗忘的 CSS 样式清单整理

17 个JavaScript 中你必须知道的数组方法

CSS 属性选择器深入挖掘（实现这些功能，CSS完胜）

30 个 Javascript 知识点总结，总有你不会的！

Javascript 合集自己整理的收藏记录一下(最下面有惊喜)相关推荐

java 多线程最优_Java多线程与并发系列从0到1全部合集，强烈建议收藏！
在过去的时间中,我写过Java多线程与并发的整个系列. 为了方便大家的阅读,也为了让知识更系统化,这里我单独把Java多线程与并发的整个系列一并罗列于此,希望对有用的人有用,也希望能帮助到更多的人. ...
技惊四座，全新视觉，强悍街舞！——［全美最佳舞团］第3季冠军！ Quest Crew 表演合集 (清晰版) 【收藏】
技惊四座,全新视觉,强悍街舞!--［全美最佳舞团］第3季冠军! Quest Crew 表演合集 (清晰版) [收藏] 更换后的编辑器更差劲了.很多BUG..... 这段插入引用视频的代码,无法识别.老 ...
Java多线程与并发系列从0到1全部合集，强烈建议收藏！
在过去的时间中,我写过Java多线程与并发的整个系列. 为了方便大家的阅读,也为了让知识更系统化,这里我单独把Java多线程与并发的整个系列一并罗列于此,希望对有用的人有用,也希望能帮助到更多的人. ...
2023年最新整理的中兴设备命令合集，网络工程师收藏！
今天给大家分享的是中兴网络设备的命令大全.花了一天的时间去找手册和整理.排版,希望对大家有用,觉得好的话还请点个赞,转发一下. 一.端口配置端口基本配置在中兴的设备上,可以对端口参数进行配置,如自 ...
进入 IT 企业必读的Java面试题合集，强烈建议收藏！
说起要找工作了,你觉得此刻最该做的事情是什么? 当然是找个大厂的面试题看一下套路: 今天小编分享给大家一些Java面试题: 欢迎阅读! 更多2021最新Java面试题全部答案及Java零基础入门教程资 ...
假期文案丨运营必看！各类节日文案合集，强烈建议收藏
大家好呀,我是小新~ 一年到头,各种假期纷至沓来,应季的推文对于运营来说是绝对不能少的. 我猜大家在节日前写推文的状态都是扎耳挠腮无从下手- 为了让大家能够轻松过个欢乐假期,小新特意准备了三十几条文案 ...
ubuntukylin日常软件合集-个人整理，喜欢的来看看。
制图软件:gimp 浏览器:maxthon 网络电话:skype 下载软件:fatrat mac菜单栏:cairo-dock 本地音乐软件:audacious 在线音乐软件:kwplayer 在线视频 ...
最强Java面试题全部合集，涵盖BAT大厂面试必考的9大技术！-强烈建议收藏
过去2年我持续分享了BAT TMD为代表的大厂最新面试题目,特别是蚂蚁金服.天猫.淘宝.头条.拼多多等Java面试题目. 过去2年,我已经成功的帮助了部分同学进入了大厂. 2020开始,我依然会为大家 ...
eNSP综合实验合集（eNSP综合大作业合集）_可先收藏
作者:BSXY_19计科_陈永跃 BSXY_信息学院注:未经允许禁止转发任何内容 **注:在该文章中就只对ensp综合实验做一个总结和归纳,只给出相应的topo图和需求说明和对应的文章的连接.有什么 ...

Javascript 合集自己整理的收藏记录一下(最下面有惊喜)

Javascript 合集自己整理的收藏记录一下(最下面有惊喜)相关推荐

最新文章

热门文章

Javascript 合集 自己整理的收藏 记录一下(最下面有惊喜)

Javascript 合集 自己整理的收藏 记录一下(最下面有惊喜)相关推荐

最新文章

热门文章

Javascript 合集自己整理的收藏记录一下(最下面有惊喜)

Javascript 合集自己整理的收藏记录一下(最下面有惊喜)相关推荐