常用的前端Js方法封装

简介: 常用的前端Js方法封装

1、输入一个值,返回其数据类型

functiontype(para) {
returnObject.prototype.toString.call(para)
        }


2、数组去重

functionunique1(arr) {
return [...newSet(arr)]
        }
functionunique2(arr) {
varobj= {};
returnarr.filter(ele=> {
if (!obj[ele]) {
obj[ele] =true;
returntrue;
                }
            })
        }
functionunique3(arr) {
varresult= [];
arr.forEach(ele=> {
if (result.indexOf(ele) ==-1) {
result.push(ele)
                }
            })
returnresult;
        }

3、字符串去重

String.prototype.unique=function () {
varobj= {},
str='',
len=this.length;
for (vari=0; i<len; i++) {
if (!obj[this[i]]) {
str+=this[i];
obj[this[i]] =true;
                }
            }
returnstr;
        }
// 去除连续的字符串functionuniq(str) {
returnstr.replace(/(\w)\1+/g, '$1')
        }

4、深拷贝 浅拷贝

//深克隆(深克隆不考虑函数)functiondeepClone(obj, result) {
varresult=result|| {};
for (varpropinobj) {
if (obj.hasOwnProperty(prop)) {
if (typeofobj[prop] =='object'&&obj[prop] !==null) {
// 引用值(obj/array)且不为nullif (Object.prototype.toString.call(obj[prop]) =='[object Object]') {
// 对象result[prop] = {};
                        } else {
// 数组result[prop] = [];
                        }
deepClone(obj[prop], result[prop])
                    } else {
// 原始值或funcresult[prop] =obj[prop]
                    }
                }
            }
returnresult;
        }
// 深浅克隆是针对引用值functiondeepClone(target) {
if (typeof (target) !=='object') {
returntarget;
            }
varresult;
if (Object.prototype.toString.call(target) =='[object Array]') {
// 数组result= []
            } else {
// 对象result= {};
            }
for (varpropintarget) {
if (target.hasOwnProperty(prop)) {
result[prop] =deepClone(target[prop])
                }
            }
returnresult;
        }
// 无法复制函数varo1=JSON.parse(JSON.stringify(obj1));

5、返回当前的时间(年月日时分秒)

functiongetDateTime() {
vardate=newDate(),
year=date.getFullYear(),
month=date.getMonth() +1,
day=date.getDate(),
hour=date.getHours() +1,
minute=date.getMinutes(),
second=date.getSeconds();
month=checkTime(month);
day=checkTime(day);
hour=checkTime(hour);
minute=checkTime(minute);
second=checkTime(second);
functioncheckTime(i) {
if (i<10) {
i="0"+i;
                }
returni;
            }
return""+year+"年"+month+"月"+day+"日"+hour+"时"+minute+"分"+second+"秒"        }

      6、获取url中的参数

functiongetWindonHref() {
varsHref=window.location.href;
varargs=sHref.split('?');
if (args[0] ===sHref) {
return'';
            }
varhrefarr=args[1].split('#')[0].split('&');
varobj= {};
for (vari=0; i<hrefarr.length; i++) {
hrefarr[i] =hrefarr[i].split('=');
obj[hrefarr[i][0]] =hrefarr[i][1];
            }
returnobj;
        }

7、数组排序

// 快排 [left] + min + [right]functionquickArr(arr) {
if (arr.length<=1) {
returnarr;
            }
varleft= [],
right= [];
varpIndex=Math.floor(arr.length/2);
varp=arr.splice(pIndex, 1)[0];
for (vari=0; i<arr.length; i++) {
if (arr[i] <=p) {
left.push(arr[i]);
                } else {
right.push(arr[i]);
                }
            }
// 递归returnquickArr(left).concat([p], quickArr(right));
        }
// 冒泡functionbubbleSort(arr) {
for (vari=0; i<arr.length-1; i++) {
for (varj=i+1; j<arr.length; j++) {
if (arr[i] >arr[j]) {
vartemp=arr[i];
arr[i] =arr[j];
arr[j] =temp;
                    }
                }
            }
returnarr;
        }
functionbubbleSort(arr) {
varlen=arr.length;
for (vari=0; i<len-1; i++) {
for (varj=0; j<len-1-i; j++) {
if (arr[j] >arr[j+1]) {
vartemp=arr[j];
arr[j] =arr[j+1];
arr[j+1] =temp;
                    }
                }
            }
returnarr;
        }

8、防抖

functiondebounce(handle, delay) {
vartimer=null;
returnfunction () {
var_self=this,
_args=arguments;
clearTimeout(timer);
timer=setTimeout(function () {
handle.apply(_self, _args)
                }, delay)
            }
        }

9、节流

functionthrottle(handler, wait) {
varlastTime=0;
returnfunction (e) {
varnowTime=newDate().getTime();
if (nowTime-lastTime>wait) {
handler.apply(this, arguments);
lastTime=nowTime;
                }
            }
        }

10、封装自己的filter方法

Array.prototype.myFilter=function (func, obj) {
varlen=this.length;
vararr= [];
var_this=arguments[1] ||window;
for (vari=0; i<len; i++) {
func.call(_this, this[i], i, this) &&arr.push(this[i]);
            }
returnarr;
        }



相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2天前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
27 13
|
2月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
150 52
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
58 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
84 1
|
8月前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
116 5
|
8月前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
8月前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
8月前
|
XML 前端开发 JavaScript
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
2022 前端JavaScript高频手写面试题大全,助你查漏补缺