常用的前端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;
        }



相关文章
|
8天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
10天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
14 0
|
11天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
8天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
1天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
|
2天前
|
JavaScript 前端开发
js绑定事件的方法
js绑定事件的方法
18 11
|
3天前
|
JavaScript
JS生成uuid的四种方法
JS生成uuid的四种方法
7 0
|
3天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
9 0
|
11天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集