24个解决实际问题的ES6代码片段(小结)
这是从30secondsofcode中挑出来的非常有用的一些代码片段，这是一个非常棒的项目，大家可以去github上去搜索一下，给个star。
在本文中，我试图根据它们的实际用途对它们进行分类，回答您在项目中可能遇到的常见问题：
1.如何隐藏指定的所有元素？
consthide=(...el)=>[...el].forEach(e=>(e.style.display='none'));
//Example
hide(document.querySelectorAll('img'));//Hidesall![]()
elementsonthepage
2.如何检查元素是否具有指定的类？
consthasClass=(el,className)=>el.classList.contains(className);
//Example
hasClass(document.querySelector('p.special'),'special');//true
3.如何为元素切换类？
consttoggleClass=(el,className)=>el.classList.toggle(className);
//Example
toggleClass(document.querySelector('p.special'),'special');
//Theparagraphwillnothavethe'special'classanymore
这里使用了classList.toggle()方法
toggle(String[,force])
当只有一个参数时：切换类值；也就是说，即如果类值存在，则删除它并返回false，如果不存在，则添加它并返回true。
当存在第二个参数时：若第二个参数的执行结果为true，则添加指定的类值，若执行结果为false，则删除它。
4.如何获取当前页面的滚动位置?
constgetScrollPosition=(el=window)=>({
x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollLeft,
y:el.pageYOffset!==undefined?el.pageYOffset:el.scrollTop
});
//Example
getScrollPosition();//{x:0,y:200}
5.如何平滑滚动到页面顶部?
constscrollToTop=()=>{
constc=document.documentElement.scrollTop||document.body.scrollTop;
if(c>0){
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0,c-c/8);
}
};
//Example
scrollToTop();
递归的方法不断调用使用scrollToTop()，requestAnimationFrame方法告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。它的回调函数执行次数通常与浏览器屏幕刷新次数相匹配，所以效果会比较平滑。
获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft
6.如何检查父元素是否包含子元素？
constelementContains=(parent,child)=>parent!==child&&parent.contains(child);
//Examples
elementContains(document.querySelector('head'),document.querySelector('title'));
//true
elementContains(document.querySelector('body'),document.querySelector('body'));//false
7.如何检查指定的元素在视口中是否可见？
constelementIsVisibleInViewport=(el,partiallyVisible=false)=>{
const{top,left,bottom,right}=el.getBoundingClientRect();
const{innerHeight,innerWidth}=window;
returnpartiallyVisible
?((top>0&&top0&&bottom0&&left0&&right=0&&left>=0&&bottom<=innerHeight&&right<=innerWidth;
};
//Examples
elementIsVisibleInViewport(el);//(notfullyvisible)
elementIsVisibleInViewport(el,true);//(partiallyvisible)
传入partiallyVisible参数，区分判断是是部分可见还是全部可见。
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
8.如何获取元素中的所有图像？
constgetImages=(el,includeDuplicates=false)=>{
constimages=[...el.getElementsByTagName('img')].map(img=>img.getAttribute('src'));
returnincludeDuplicates?images:[...newSet(images)];
};
//Examples
getImages(document,true);//['image1.jpg','image2.png','image1.png','...']
getImages(document,false);//['image1.jpg','image2.png','...']
9.如何确定设备是移动设备还是台式机/笔记本电脑？
constdetectDeviceType=()=> /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ?'Mobile' :'Desktop'; //Example detectDeviceType();//"Mobile"or"Desktop"
10.如何获取当前URL
constcurrentURL=()=>window.location.href; //Example currentURL();//'https://google.com'
11.如何创建包含当前URL参数的对象？
constgetURLParameters=url=>
(url.match(/([^?=&]+)(=([^&]*))/g)||[]).reduce(
(a,v)=>((a[v.slice(0,v.indexOf('='))]=v.slice(v.indexOf('=')+1)),a),
{}
);
//Examples
getURLParameters('http://url.com/page?n=Adam&s=Smith');//{n:'Adam',s:'Smith'}
getURLParameters('google.com');//{}
12.如何将一组表单元素编码为对象？
constformToObject=form=>
Array.from(newFormData(form)).reduce(
(acc,[key,value])=>({
...acc,
[key]:value
}),
{}
);
//Example
formToObject(document.querySelector('#form'));//{email:'test@email.com',name:'TestName'}
Array.from方法用于将两类对象转为真正的数组。类似数组的对象（array-likeobject）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
reducer函数接收4个参数:
- Accumulator(acc)(累计器)
- CurrentValue(cur)(当前值)
- CurrentIndex(idx)(当前索引)
- SourceArray(src)(源数组)
13.如何从对象中检索出给定的一组属性？
constget=(from,...selectors)=>
[...selectors].map(s=>
s
.replace(/\[([^\[\]]*)\]/g,'.$1.')
.split('.')
.filter(t=>t!=='')
.reduce((prev,cur)=>prev&&prev[cur],from)
);
constobj={selector:{to:{val:'valtoselect'}},target:[1,2,{a:'test'}]};
//Example
get(obj,'selector.to.val','target[0]','target[2].a');//['valtoselect',1,'test']
14.延迟调用提供的函数（以毫秒为单位）
constdelay=(fn,wait,...args)=>setTimeout(fn,wait,...args);
delay(
function(text){
console.log(text);
},
1000,
'later'
);
//Logs'later'afteronesecond.
15.如何在给定元素上触发特定事件，并可选地传递自定义数据？
consttriggerEvent=(el,eventType,detail)=>
el.dispatchEvent(newCustomEvent(eventType,{detail}));
//Examples
triggerEvent(document.getElementById('myId'),'click');
triggerEvent(document.getElementById('myId'),'click',{username:'bob'});
构造方法CustomerEvent()创建一个新的CustomEvent对象。
CustomEvent事件是由程序创建的，可以有任意自定义功能的事件。
16.如何从元素中移除事件侦听器？
constoff=(el,evt,fn,opts=false)=>el.removeEventListener(evt,fn,opts);
constfn=()=>console.log('!');
document.body.addEventListener('click',fn);
off(document.body,'click',fn);//nolongerlogs'!'uponclickingonthepage
17.将给定的毫秒数转换为可读格式
constformatDuration=ms=>{
if(ms<0)ms=-ms;
consttime={
day:Math.floor(ms/86400000),
hour:Math.floor(ms/3600000)%24,
minute:Math.floor(ms/60000)%60,
second:Math.floor(ms/1000)%60,
millisecond:Math.floor(ms)%1000
};
returnObject.entries(time)
.filter(val=>val[1]!==0)
.map(([key,val])=>`${val}${key}${val!==1?'s':''}`)
.join(',');
};
//Examples
formatDuration(1001);//'1second,1millisecond'
formatDuration(34325055574);//'397days,6hours,44minutes,15seconds,574milliseconds'
18.如何得到两个日期之间的差异（以天为单位）
constgetDaysDiffBetweenDates=(dateInitial,dateFinal)=>
(dateFinal-dateInitial)/(1000*3600*24);
//Example
getDaysDiffBetweenDates(newDate('2017-12-13'),newDate('2017-12-22'));//9
19.如何对传递的URL发出GET请求
consthttpGet=(url,callback,err=console.error)=>{
constrequest=newXMLHttpRequest();
request.open('GET',url,true);
request.onload=()=>callback(request.responseText);
request.onerror=()=>err(request);
request.send();
};
httpGet(
'https://jsonplaceholder.typicode.com/posts/1',
console.log
);
//Logs:{"userId":1,"id":1,"title":"sampletitle","body":"mytext"}
20.如何对传递的URL发出POST请求？
consthttpPost=(url,data,callback,err=console.error)=>{
constrequest=newXMLHttpRequest();
request.open('POST',url,true);
request.setRequestHeader('Content-type','application/json;charset=utf-8');
request.onload=()=>callback(request.responseText);
request.onerror=()=>err(request);
request.send(data);
};
constnewPost={
userId:1,
id:1337,
title:'Foo',
body:'barbarbar'
};
constdata=JSON.stringify(newPost);
httpPost(
'https://jsonplaceholder.typicode.com/posts',
data,
console.log
);
//Logs:{"userId":1,"id":1337,"title":"Foo","body":"barbarbar"}
21.如何为指定的选择器创建具有指定范围、步骤和持续时间的计数器？
constcounter=(selector,start,end,step=1,duration=2000)=>{
letcurrent=start,
_step=(end-start)*step<0?-step:step,
timer=setInterval(()=>{
current+=_step;
document.querySelector(selector).innerHTML=current;
if(current>=end)document.querySelector(selector).innerHTML=end;
if(current>=end)clearInterval(timer);
},Math.abs(Math.floor(duration/(end-start))));
returntimer;
};
//Example
counter('#my-id',1,1000,5,2000);//Createsa2-secondtimerfortheelementwithid="my-id"
22.如何将字符串复制到剪贴板
constcopyToClipboard=str=>{
constel=document.createElement('textarea');
el.value=str;
el.setAttribute('readonly','');
el.style.position='absolute';
el.style.left='-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);
}
};
//Example
copyToClipboard('Loremipsum');//'Loremipsum'copiedtoclipboard.
document.getSelection()返回一个 Selection对象，表示用户选择的文本范围或光标的当前位置。
23.判断页面的浏览器选项卡是否聚焦
constisBrowserTabFocused=()=>!document.hidden; //Example isBrowserTabFocused();//true
24.如果不存在目录，则如何创建
constfs=require('fs');
constcreateDirIfNotExists=dir=>(!fs.existsSync(dir)?fs.mkdirSync(dir):undefined);
//Example
createDirIfNotExists('test');//createsthedirectory
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。