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



相关文章
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1556 0
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1559 80
|
JavaScript 前端开发 API
|
JSON 前端开发 JavaScript
前端工具方法整理
前端工具方法整理
285 8
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
682 8
|
移动开发 JavaScript 前端开发
|
JavaScript 前端开发 开发者
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1640 14

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1229
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    551
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    426
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    426
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    539
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    715
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1378
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    308
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1148
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    495