es6-常用实例

1.如何隐藏所有指定的元素:

const hide=(...el)=>[...el][0].forEach(e=>(e.style.display='none'));
hide(document.querySelectorAll('div'))

2.如何检查元素是否具有指定的类？

页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

const hasClass=(el,className)=>[].slice.call(el.classList).includes(className);
console.log(hasClass(document.querySelector('.bbb'),'aaa'))//true

[].slice.call() 将类数组转化成数组  同 Array.from

3.如何切换一个元素的类?

const toggleClass=(el,className)=>el.classList.toggle(className);
toggleClass(document.querySelector('p.special'),'special')

4.如何获取当前页面的滚动位置？

const getScrollPosition=(el=window)=>({
 x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollLeft,
 y:el.pageYOffset!=undefined?el.pageYOffset:el.scrollTop:el.scrollTop
})
例
getScrollPositon()  //(x:0,y:200)

5.如何平滑滚动到页面顶部?

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。

const scrollToTop=()=>{
    const c=document.documentElement.scrollTop||document.body.scrollTop;
    if(c>0){
       window.requestAnimationFrame(scrollToTop);
 window.scrollTo(0,c-c/8);      
    }
}
//例
scrollToTop()

6.如何检查父元素是否包含子元素？

const elementContains=(parent,child)=>parent!=child&&parent.contains(child);
//例
elementContain(document.querySelector('head'),document.querySelector('title'))

7.如何检查指定的元素在视口中是否可见？

const elementIsVisibleInViewport=(el,partiallyVisible=false)=>{
  const {top,left,bottom,right}=el.getBoundingClientRect();
  const {innerHeight,innerWidth}=window;
  return partiallyVisible ?((top>0&&top<innerHeight)||(bottom>0&&bottom<innerHeight))&&
  ((left>0&&left<innerWidth)||(right>0&&right<innerWidth))
  :top>=0&&left>=0&&bottom<=innerHeight&&right<=innerWidth; 
}

//事例
elementIsVisibleInViewport(el);//需要左右可见
elementIsVisibleInViewport(el,true); //需要上下左右可见

8.如何获取元素中的所有图像？

const getImages =(el,includeDuplicates=false)=>{
    const images=[...el.getElementsByTagName('img')].map(img=>img.getAttribute('src'));
    return includeDuplicates?images:[...new Set(images)];
}
// false 表示的是不重复的 所有Img标签
getImages(document,true)
getImages(document,false)

9.如何确定设备是移动设备还是台式机/笔记本电脑？

const detectDeviceType=()=>
/Android|webOS|iphone|ipad|ipod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)
?'Mobile':'Desktop';
//事例
detectDeviceType()
//Desktop 是电脑

10.如何创建一个包含当前URL参数的对象？

const getURLParameters =url =>
(url.match(/([^?=&]+)(=([^&]*))/g)||[]).reduce(
   (a,v)=>((a[v.slice(0,v.indexOf('='))]=v.slice(v.indexOf('=')+1)),a),
   {}
)
getURLParameters('csdn.net/md/?articleId=119429376')
{articleId: "119429376"}

11.How to get the current URL?

const currentUrl=()=>window.location.href;
currentUrl()

12.如何将一组表单元素转化为对象？

const formToObject=form=>
     Array.from(new FormData(form)).reduce(
	 (acc,[key,value])=>({
	    ...acc,
            [key]:value		
          }),
          {}	
     );
formToObject(document.querySelector('#form'))
// {email:'test@email.com',name:'Testname'}

13.如何从对象检索给定选择器指示的一组属性？

const get=(from,...selectors)=>
  [...selectors].map(s=>
   s.replace(/\[([^\[\]]*)\]/g,'.$1.')
   .split('.')
   .filter(t=>t!=='')
   .reduce((prev,cur)=>prev&&prev[cur],from) 
);
const obj={selector:{to:{val:'val to select'}},target:[1,2,{a:'test'}] };
//事例
get(obj,'selector.to.val','target[0]','target[2].a')
// ["val to select", 1, "test"]

14.如何在等待指定时间后调用提供的函数？

const delay=
  (fn,wait,...args)=>setTimeout(fn,wait,...args);
delay(
  function(text){
   console.log(text)
  },
  1000,
  'later'
)
// 1s 后 打印 later

15.如何在给定元素上触发特定事件且能选择地传递自定义数据？

const triggerEvents=(el,eventType,detail)=>el.dispatchEvent(new CustomEvent(eventType,{detail}));
//例
triggerEvents(document.querySelector('.footer-column-t'),'click',{username:'wang'})

自定义事件的函数有 Event、CustomEvent 和 dispatchEvent

 Event
window.dispatchEvent(new Event('resize'))  //向window 派发一个resize事件
var event =new Event('build');//直接自定义事件 使用Event 构造函数
var elem =document.querySelector('.text-red');
elem.addEventListener('build',function(e){console.log(e,"-------�")},false)
//触发事件
elem.dispatchEvent(event)

CustomEvent 可以创建一个更高度自定义事件，还可以附带一些数据，具体用法如下：

CustomEvent
options={
   bubbles:true,//是否冒泡
   cancelable:false,//是否取消默认事件
}
var myEvent=new CustomEvent(eventname,options);//eventname 可以自己自定义名字

var elem =document.querySelector('.text-red');
elem.addEventListener('wangj',function(e){console.log(e,"-----")},false)
undefined
elem.dispatchEvent(myEvent)

16.如何从元素中移除事件监听器?

const off=
(el,evt,fn,opts=false)=>el.removeEventListener(evt,fn,opts);
const fn=()=>console.log('!');
document.body.addEventListener('click',fn);
// 解除点击事件的click事件
off(document.body,'click',fn);

17.如何获得给定毫秒数的可读格式？

const formatDuration= ms =>{
  if(ms<0)ms=-ms;
 const time={
    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
 };
  return Object.entries(time)
  .filter(val=>val[1]!==0)
  .map(([key,val])=>`${val}${key}${val!==1?'s':''}`)
  .join(', ')
}
//例子
formatDuration(1001)
"1second, 1millisecond"

18.如何获得两个日期之间的差异（以天为单位）？

const getDayDiffBetweenDates = (dataInitial,dateFinal)=>
(dataInitial-dateFinal)/(1000*3600*24);
//例
getDayDiffBetweenDates(new Date('2021-08-13'),new Date('2021-08-01'))；
12

19.如何向传递的URL发出GET请求？

const httpGet=(url，callback,err=console.error)=>{
    const request=new XMLHttpRequest();
    request.open('GET',url,true);
    request.onload=()=>callback(request.responseText);
    request.onerror=()=>err(request);
    request.send();
}

httpGet(
  'http://www.baidu.com',
  console.log
)

20.如何对传递的URL发出POST请求？

const httpPost=(url，data,callback,err=console.error)=>{
    const request=new XMLHttpRequest();
    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);
}
const newPost={
	userId:1,
        id:1337,
        title:'Foo',
        body:'bar bar '
};
const data=JSON.stringify(newPost);
httpGet(
  'http://www.baidu.com',
   data,
  console.log
)

21.如何为指定选择器创建具有指定范围，步长和持续时间的计数器？

const counter=(selector,start,end,step=1,duration=2000)=>{
    let current=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))));
  return timer;
}
counter('#my-id',1,1000,5,20000);
//让id="my-id"的元素创建一个2s的计时器  从1到 1000

22.如何确定页面的浏览器选项卡是否聚焦？

const isBrowserTabFocused =()=>!document.hidden;
isBrowserTabFocused();

23.如何创建目录（如果不存在）？

const fs=require('fs');
const createDirIfNotExits=
  dir=>(!fs.existsSync(dir)?fs.mkdirSync(dir):undefined);
createDirIfNotExits('test')

24.如何将字符串复制到剪贴板？

const copyToClipBoard =str=>{
    const el =document.createElement('textarea');
    el.value=str;
    el.setAttribute('readonly','');
    el.style.position='absolute';
    el.style.left='-9999px';
    document.body.appendChild(el);
    const selected=
     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().addRanges(selected);
     }
}
//例
copyToClipBoard('copyToClipBoard')
ctrl+v 就能粘贴

25.||= 和 &&=

或等于(||=)   a ||= b 等同于 a || (a = b);

且等于(&&=)   a &&= b 等同于 a && (a = b);