记好这24个ES6方法，用于解决实际开发的JS问题 - 网站源码_资源分享

责任编辑主要就如是说24中es6方式，那些方式都挺新颖的，G225请A701，不时挑出来看一看。

1.怎样暗藏大部份选定的原素1 const hide = (el) => Array.from(el).forEach(e => (e.style.display = none)); 2 3 // 案例:暗藏网页上大部份“原素? 4 hide(document.querySelectorAll(img))2.怎样检查和原素与否具备选定的类？

网页DOM里的每一解释器上都有两个classList第一类，合作开发人员能采用里头的方式加进，删掉，修正解释器的CSS类。采用classList，合作开发人员还能用它来推论藏匿处与否被代替了其他人个CSS类。

1 const hasClass = (el, className) => el.classList.contains(className) 2 3 // 案例 4 hasClass(document.querySelector(p.special), special) // true3.怎样转换两个原素的类？1 const toggleClass = (el, className) => el.classList.toggle(className) 2 3 // 案例去除 p 具备类`special`的 special 类 4 toggleClass(document.querySpageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, 3 y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop 4 }); 5 6 // 案例 7 getScrollPosition(); // {x: 0, y: 200}5.怎样光滑慢速到网页顶端1 const scrollToTop = () => { 2 const c = document.documentElement.scrollTop || document.body.scrollTop; 3 if (c > 0) { 4 window.requestAnimationFrame(scrollToTop); 5 window.scrollTo(0, c – c / 8); 6 } 7 } 8 9 // 案例 10 scrollToTop()

window.requestAnimationFrame() 说应用程序-你期望继续执行两个动画电影，因此明确要求应用程序在下一不绘以后初始化选定的表达式预览动画电影。以后继续执行。

RequestAnimationFrame：竞争优势：由控制系统下定决心下定决心机能的继续执行最佳时机。60Hz的创下振幅，接着每天创下的间距中会继续执行一场代替表达式，不能引发丢帧，不能雅雷。

6.怎样检查和父原素与否包含子原素？1 const elementContains = (parent, child) => parent !== child && parent.contains(child); 2 3 // 案例 4 elementContains(document.querySelector(head), document.querySelector(title)); 5 // true 6 elementContains(document.querySelector(body), document.querySelector(body)); 7 // false7.怎样检查和选定的原素在视口中与否可见？1 const elementIsVisibleInViewport = (el, partiallyVisible = false) => { 2 const { top, left, bottom, right } = el.getBoundingClientRect(); 3 const { innerHeight, innerWidth } = window; 4 return partiallyVisible 5 ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && 6 ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) 7 : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; 8 }; 9 10 // 案例 11 elementIsVisibleInViewport(el); // 需要左右includeDuplicates = false) => { 2 const images = […el.getElementsByTagName(img)].map(img => img.getAttribute(src)); 3 return includeDuplicates ? images : […new Set(images)]; 4 }; 5 6 // 案例：includeDuplicates 为 true 表示需要排除重复原素 7 getImages(document, true); // [image1.jpg, image2.png, image1.png, …] 8 getImages(document, false); // [image1.jpg, image2.png, …]9.怎样确定设备是移动设备还是台式机/笔记本电脑？1 const detectDeviceType = () => 2 /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 3 ? Mobile 4 : Desktop; 5 6 // 案例 7 detectDeviceType(); // “Mobile” or “Desktop”10.如com11.怎样创建两个包含当前URL参数的第一类？1 const getURLParameters = url => 2 (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce( 3 (a, v) => ((a[v.slice(0, v.indexOf(=))] = v.slice(v.indexOf(=) + 1)), a), 4 {} 5 ); 6 7 // 案例 8 getURLParameters(http://url.com/page?n=Adam&s=Smith); // {n: Adam, s: Smith} 9 getURLParameters(google.com); // {}12.怎样将一组表单原素转化为第一类？1 const formToObject = form => 2 Array.from(new FormData(form)).reduce( 3 (acc, [key, value]) => ({ 4 …acc, 5 [key]: value 6 }), 7 {} 8 ); 9 10 // 案例 11 formToObject(document.querySelector(#form)); 12 // { email: [email protected], name: Test Name }13.怎样从第一类检索给定选择器指示的一组属性？1 const get = (from, …selectors) => 2 […selectors].map(s => 3 s 4 .replace(/\[([^\[\]]*)\]/g, .$1.) 5 .split(.) 6 .filter(t => t !== ) 7 .reduce((prev, cur) => prev && prev[cur], from) 8 ); 9 const obj = { selector: { to: { val: val to select } }, target: [1, 2, { a: test }] }; 10 11 // Example 12 get(obj, selector.to.val, target[0], target[2].a); 13 // [val to select, 1, test]14.如何在等待选定时间后初始化提供的表达式？1 const delay = (fn, wait, …args) => setTimeout(fn, wait, …args); 2 delay( 3 function(text) { 4 console.log(text); 5 }, 6 1000, 7 later 8 ); 9 10 // 1秒后打印 later15.怎样在给定原素上触发特定事件且能选择地传递自定义数据？1 const triggerEvent = (el, eventType, detail) => 2 el.dispatchEvent(new CustomEvent(eventType, { detail })); 3 4 // 案例 5 triggerEvent(document.getElementById(myId), click); 6 triggerEvent(document.getElementById(myId), click, { username: bob });

自定义事件的表达式有Event，CustomEvent和dispatchEvent

1 // 向 window派发两个resize内置事件 2 window.dispatchEvent(new Event(resize)) 3 4 5 // 直接自定义事件，采用 Event 构造表达式： 6 var event = new Event(build); 7 var elem = document.querySelector(#id) 8 // 监听事件 9 elem.addEventListener(build, function (e) { … }, false); 10 // 触发事件. 11 elem.dispatchEvent(event);

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

1 var myEvent = new CustomEvent(eventname, options); 2 其中 options 能是： 3 { 4 detail: { 5 … 6 }, 7 bubbles: true, //与否冒泡 8 cancelable: false //与否取消默认事件 9 }

其中detail能存放一些初始化的信息，能在触发的时候初始化。其他属性就是定义该事件与否具备冒泡等等机能。

。内置的事件会由应用程序根据某些操作进行触发，定义自事件的就需要人工触发 dispatchEvent表达式就是用来触发某个事件：

1 element.dispatchEvent(customEvent);

上面的代码表示，在element上面触发customEvent那个事件。

1 // add an appropriate event listener 2 obj.addEventListener(“cat”, function(e) { process(e.detail) }); 3 4 // create and dispatch the event 5 var event = new CustomEvent(“cat”, {“detail”:{“hazcheeseburger”:true}}); 6 obj.dispatchEvent(event); 7 采用自定义事件需要注意兼容性难题，而采用 jQuery 就简单多了： 8 9 // 绑定自定义事件 10 $(element).on(myCustomEvent, function(){}); 11 12 // 触发事件 13 $(element).trigger(myCustomEvent); 14 // 此外，你还能在触发自定义事件时传递更多参数信息： 15 16 $( “p” ).on( “myCustomEvent”, function( event, myName ) { 17 $( this ).text( myName + “, hi there!” ); 18 }); 19 $( “button” ).click(function () { 20 $( “p” ).trigger( “myCustomEvent”, [ “John” ] ); 21 });16.怎样从原素中去除事件监听器？1 const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts); 2 3 const fn = () => console.log(!); 4 document.body.addEventListener(click, fn); 5 off(document.body, click, fn);17.怎样获得给定毫秒数的扩展格式？1 const formatDuration = ms => { 2 if (ms < 0) ms = -ms; 3 const time = { 4 day: Math.floor(ms / 86400000), 5 hour: Math.floor(ms / 3600000) % 24, 6 minute: Math.floor(ms / 60000) % 60, 7 second: Math.floor(ms / 1000) % 60, 8 millisecond: Math.floor(ms) % 1000 9 }; 10 return Object.entries(time) 11 .filter(val => val[1] !== 0) 12 .map(([key, val]) => `${val} ${key}${val !== 1 ? s : }`) 13 .join(, ); 14 }; 15 16 // 案例 17 formatDuration(1001); // 1 second, 1 millisecond 18 formatDuration(34325055574); 19 // 397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds18.怎样获得两个日期之间的差异（以天为单位）？1 const getDaysDiffBetweenDates = (dateInitial, dateFinal) => 2 (dateFinal – dateInitial) / (1000 * 3600 * 24); 3 4 // 案例 5 getDaysDiffBetweenDates(new Date(2017-12-13), new Date(2017-12-22)); // 919.怎样向后传递的URL发出GET请求？1 const httpGet = (url, callback, err = console.error) => { 2 const request = new XMLHttpRequest(); 3 request.open(GET, url, true); 4 request.onload = () => callback(request.responseText); 5 request.onerror = () => err(request); 6 request.send(); 7 }; 8 9 httpGet( 10 https://jsonplaceholder.typicode.com/posts/1, 11 console.log 12 ); 13 14 // {“userId”: 1, “id”: 1, “title”: “sample title”, “body”: “my text”}20.怎样对传递的URL发出POST请求？1 const httpPost = (url, data, callback, err = console.error) => { 2 const request = new XMLHttpRequest(); 3 request.open(POST, url, true); 4 request.setRequestHeader(Content-type, application/json; charset=utf-8); 5 request.onload = () => callback(request.responseText); 6 request.onerror = () => err(request); 7 request.send(data); 8 }; 9 10 const newPost = { 11 userId: 1, 12 id: 1337, 13 title: Foo, 14 body: bar bar bar 15 }; 16 const data = JSON.stringify(newPost); 17 httpPost( 18 https://jsonplaceholder.typicode.com/posts, 19 data, 20 console.log 21 ); 22 23 // {“userId”: 1, “id”: 1337, “title”: “Foo”, “body”: “bar bar bar”}21.怎样为选定选择器创建具备选定范围，步长和持续时间的计数器？1 const counter = (selector, start, end, step = 1, duration = 2000) => { 2 let current = start, 3 _step = (end – start) * step < 0 ? -step : step, 4 timer = setInterval(() => { 5 current += _step; 6 document.querySelector(selector).innerHTML = current; 7 if (current >= end) document.querySelector(selector).innerHTML = end; 8 if (current >= end) clearInterval(timer); 9 }, Math.abs(Math.floor(duration / (end – start)))); 10 return timer; 11 }; 12 13 // 案例 14 counter(#my-id, 1, 1000, 5, 2000); 15 // 让 `id=“my-id”`的原素创建两个2秒计时器22.怎样将字符串复制到顶点？1 const el = document.createElement(textarea); 2 el.value = str; 3 el.setAttribute(readonly, ); 4 el.style.position = absolute; 5 el.style.left = -9999px; 6 document.body.appendChild(el); 7 const selected = 8 document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; 9 el.select(); 10 document.execCommand(copy); 11 document.body.removeChild(el); 12 if (selected) { 13 document.getSelection().removeAllRanges(); 14 document.getSelection().addRange(selected); 15 } 16 }; 17 18 // 案例 19 copyToClipboard(Lorem ipsum); 20 // Lorem ipsum copied to clipboard23.怎样确定网页的应用程序选项卡与否聚焦？1 const isBrowserTabFocused = () => !document.hidden; 2 3 // 案例 4 isBrowserTabFocused(); // true24.怎样创建目录（如果不存在）？1 const fs = require(fs); 2 const createDirIfNotexists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined); 3 4 // 案例 5 createDirIfNotExists(test);

这里头的方式大都挺新颖，能化解很多合作开发过程难题，大家就好好利用起来吧。

如果对你有帮助，记得点赞支持哦，目前我们的控制系统班正在讲解ES6课程，JavaScript完结，正式开始进入ES6阶段，这几个月我们在JavaScript课程中融入了大量的面试题、算法以及底层原理知识，目的就是为了帮助大家夯实基础，查漏补缺，有扎实的JavaScript基础，对于学到后面阶段更加有帮助！这也是2023年通向职业道路，面试求职必须要懂得的技术能力！感兴趣能联系我参与！

为了更好的让大家认识到JavaScript的精髓，我们在三十天计划群里推出了几节非常重要的JavaScript课程体系，而且每一系列知识点都保障是完整的。感兴趣能通过下方的练习方式参与课程哦。如果你正在学习JavaScript，我们已经在三十天计划中完成了4个综合项目实战，那不妨能听下那个课程体系，三十天计划群里还提供了算法、数组等知识体系！