JavaScript函数片段
发表于：2020-10-04
字数统计：6.9k 字
阅读时长：17 分钟
阅读量：355
字符串反转
var str = '123'
str.split('').reverse().join('')数组去重
functionnoRepeat(arr){
return[...newSet(arr)];
}查找数组最大值
functionarrayMax(arr){
returnMath.max(...arr);
}查找数组最小值
functionarrayMin(arr){
returnMath.min(...arr);
}查找数组最小值
functionarrayMin(arr){
returnMath.min(...arr);
}返回已size为长度的数组分割的原数组
functionchunk(arr,size=1){
returnArray.from({
length:Math.ceil(arr.length/size),
},
(v,i)=>arr.slice(i*size,i*size+size)
);
}检查数组中某元素出现的次数
functioncountOccurrences(arr,value){
returnarr.reduce((a,v)=>(v===value?a+1:a+0),0);
}扁平化数组
functionflatten(arr,depth=-1){
if(depth===-1){
return[].concat(
...arr.map((v)=>(Array.isArray(v)?this.flatten(v):v))
);
}
if(depth===1){
returnarr.reduce((a,v)=>a.concat(v),[]);
}
returnarr.reduce(
(a,v)=>a.concat(Array.isArray(v)?this.flatten(v,depth-1):v),
[]
);
}返回两个数组中不同的元素
functiondiffrence(arrA,arrB){
returnarrA.concat(arrB).filter(function(v,i,arr){
returnarr.indexOf(v)===arr.lastIndexOf(v);
});
}返回两个数组中相同的元素
functionintersection(arr1,arr2){
returnarr2.filter((v)=>arr1.includes(v));
}从右删除n个元素
functiondropRight(arr,n=0){
returnn<arr.length?arr.slice(0,arr.length-n):[];
}返回数组中下标间隔nth的元素
例
letarr=[1,2,3,4,5,6,7,8,9]
console.log(this.everyNth(arr,2))返回[2,4,6,8]
functioneveryNth(arr,nth){
returnarr.filter((v,i)=>i%nth===nth-1);
}返回数组中第n个元素（支持负数）
functionnthElement(arr,n=0){
return(n>=0?arr.slice(n,n+1):arr.slice(n))[0];
}数组乱排
functionshuffle(arr){
letarray=arr;
letindex=array.length;
while(index){
index-=1;
letrandomInedx=Math.floor(Math.random()*index);
letmiddleware=array[index];
array[index]=array[randomInedx];
array[randomInedx]=middleware;
}
returnarray;
}浏览器对象BOM
当前网页地址
functioncurrentURL(){
returnwindow.location.href;
}获取滚动条位置
functiongetScrollPosition(el=window){
return{
x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollLeft,
y:el.pageYOffset!==undefined?el.pageYOffset:el.scrollTop,
};
}获取url中的参数
functiongetURLParameters(url){
returnurl
.match(/([^?=&]+)(=([^&]*))/g)
.reduce((a,v)=>(
(a[v.slice(0,v.indexOf("="))]=v.slice(v.indexOf("=")+1)),a
),{});
}页面跳转，是否记录在history中
functionredirect(url,asLink=true){
asLink?(window.location.href=url):window.location.replace(url);
}滚动条回到顶部动画
functionscrollToTop(){
constscrollTop=
document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>0){
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0,c-c/8);
}else{
window.cancelAnimationFrame(scrollToTop);
}
}复制文本
functioncopy(str){
constel=document.createElement("textarea");
el.value=str;
el.setAttribute("readonly","");
el.style.position="absolute";
el.style.left="-9999px";
el.style.top="-9999px";
document.body.appendChild(el);
constselected=
document.getSelection().rangeCount>0?
document.getSelection().getRangeAt(0):
false;
el.select();
document.execCommand("copy");
document.body.removeChild(el);
if(selected){
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
}检测设备类型
functiondetectDeviceType(){
return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(
navigator.userAgent
)?
"Mobile":
"Desktop";
}Cookie
增
functionsetCookie(key,value,expiredays){
varexdate=newDate();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=
key+
"="+
escape(value)+
(expiredays==null?"":";expires="+exdate.toGMTString());
}删
functiondelCookie(name){
varexp=newDate();
exp.setTime(exp.getTime()-1);
varcval=getCookie(name);
if(cval!=null){
document.cookie=name+"="+cval+";expires="+exp.toGMTString();
}
}查
functiongetCookie(name){
vararr,
reg=newRegExp("(^|)"+name+"=([^;]*)(;|$)");
if((arr=document.cookie.match(reg))){
returnarr[2];
}else{
returnnull;
}
}日期Date
时间戳转换为时间
默认为当前时间转换结果
isMs为时间戳是否为毫秒
functiontimestampToTime(timestamp=Date.parse(newDate()),isMs=true){
constdate=newDate(timestamp*(isMs?1:1000));
return`${date.getFullYear()}-${
date.getMonth()+1<10?"0"+(date.getMonth()+1):date.getMonth()+1
}-${date.getDate()}${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}文档对象DOM
/**
*固定滚动条
*功能描述：一些业务场景，如弹框出现时，需要禁止页面滚动，
*这是兼容安卓和iOS禁止页面滚动的解决方案
*/
letscrollTop=0;
functionpreventScroll(){
存储当前滚动位置
scrollTop=window.scrollY;
将可滚动区域固定定位，可滚动区域高度为0后就不能滚动了
document.body.style["overflow-y"]="hidden";
document.body.style.position="fixed";
document.body.style.width="100%";
document.body.style.top=-scrollTop+"px";
document.body.style['overscroll-behavior']='none'
}恢复滚动
functionrecoverScroll(){
document.body.style["overflow-y"]="auto";
document.body.style.position="static";
document.querySelector('body').style['overscroll-behavior']='none'
window.scrollTo(0,scrollTop);
}判断当前位置是否为页面底部
functionbottomVisible(){
return(
document.documentElement.clientHeight+window.scrollY>=
(document.documentElement.scrollHeight||
document.documentElement.clientHeight)
);
}判断元素是否在可视范围内
partiallyVisible为是否为完全可见
functionelementIsVisibleInViewport(el,partiallyVisible=false){
const{
top,
left,
bottom,
right
}=el.getBoundingClientRect();
returnpartiallyVisible?
((top>0&&top<innerHeight)||
(bottom>0&&bottom<innerHeight))&&
((left>0&&left<innerWidth)||(right>0&&right<innerWidth)):
top>=0&&left>=0&&bottom<=innerHeight&&right<=innerWidth;
}获取元素css样式
functiongetStyle(el,ruleName){
returngetComputedStyle(el,null).getPropertyValue(ruleName);
}进入全屏
launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("id"));//某个元素进入全屏
functionlaunchFullscreen(element){
if(element.requestFullscreen){
element.requestFullscreen();
}elseif(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}elseif(element.msRequestFullscreen){
element.msRequestFullscreen();
}elseif(element.webkitRequestFullscreen){
element.webkitRequestFullScreen();
}
}退出全屏
functionexitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}elseif(document.msExitFullscreen){
document.msExitFullscreen();
}elseif(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}elseif(document.webkitExitFullscreen){
document.webkitExitFullscreen();
}
}全屏事件
document.addEventListener("fullscreenchange",function(e){
if(document.fullscreenElement){
console.log("进入全屏");
}else{
console.log("退出全屏");
}
});数字Number
数字千分位分割
functioncommafy(num){
returnnum.toString().indexOf(".")!==-1?
num.toLocaleString():
num.toString().replace(/(\d)(?=(?:\d{3})+$)/g,"$1,");
}生成随机数
functionrandomNum(min,max){
switch(arguments.length){
case1:
returnparseInt(Math.random()*min+1,10);
case2:
returnparseInt(Math.random()*(max-min+1)+min,10);
default:
return0;
}
}去除字符串中的html
functionremovehtml(str=''){
returnstr.replace(/<[\/\!]*[^<>]*>/ig,'')
}防抖
debounce (fn, time) {
let timeout = null;
return function() {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, time);
}
}节流
throttle (fn, time) {
let flag = true;
return function() {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, time);
}
}