红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

解决实际问题的 24 个 ES6 代码段

  • 2020-10-28
  • 本文字数:4133 字

    阅读完需:约 14 分钟

解决实际问题的24个ES6代码段

这篇文章基于实际使用场景总结了 24 个 ES6 代码段,可用来解决项目中可能遇到的一系列问题。

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

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));// Examplehide(document.querySelectorAll('img')); // 隐藏页面上的所有 <img> 元素
复制代码

2. 如何确认元素是否具有指定的类?

const hasClass = (el, className) => el.classList.contains(className);// ExamplehasClass(document.querySelector('p.special'), 'special'); // true
复制代码

3. 如何切换元素的类?

const toggleClass = (el, className) => el.classList.toggle(className);// ExampletoggleClass(document.querySelector('p.special'), 'special'); // 该段不再有 'special' 类
复制代码

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

const getScrollPosition = (el = window) => ({  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop});// ExamplegetScrollPosition(); // {x: 0, y: 200}
复制代码

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

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

6. 如何确认父元素是否包含子元素?

const elementContains = (parent, child) => parent !== child && parent.contains(child);// ExampleselementContains(document.querySelector('head'), document.querySelector('title')); // trueelementContains(document.querySelector('body'), document.querySelector('body')); // false
复制代码

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;};// ExampleselementIsVisibleInViewport(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)];};// ExamplesgetImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...']getImages(document, false); // ['image1.jpg', 'image2.png', '...']
复制代码

9. 如何分辨设备是移动设备还是桌面设备?

const detectDeviceType = () =>  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)    ? 'Mobile'    : 'Desktop';// ExampledetectDeviceType(); // "Mobile" or "Desktop"
复制代码

10. 如何获取当前 URL?

const currentURL = () => window.location.href;// ExamplecurrentURL(); // 'https://google.com'
复制代码

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

const getURLParameters = url =>  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),    {}  );// ExamplesgetURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}getURLParameters('google.com'); // {}
复制代码

12. 如何将一组表单元素编码为一个对象?

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

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' }] };// Exampleget(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'); // 一秒后记录 'later' 。
复制代码

15. 如何在给定元素上触发特定事件,且可选传递自定义数据?

const triggerEvent = (el, eventType, detail) =>  el.dispatchEvent(new CustomEvent(eventType, { detail }));// ExamplestriggerEvent(document.getElementById('myId'), 'click');triggerEvent(document.getElementById('myId'), 'click', { username: 'bob' });
复制代码

16. 如何移除一个元素的事件侦听器?

const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);const fn = () => console.log('!');document.body.addEventListener('click', fn);off(document.body, 'click', fn); // no longer logs '!' upon clicking on the page
复制代码

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(', ');};// ExamplesformatDuration(1001); // '1 second, 1 millisecond'formatDuration(34325055574); // '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'
复制代码

18. 如何获取两个日期之间的天数间隔?

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>  (dateFinal - dateInitial) / (1000 * 3600 * 24);// ExamplegetDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
复制代码

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(  'https://jsonplaceholder.typicode.com/posts/1',  console.log); // Logs: {"userId": 1, "id": 1, "title": "sample title", "body": "my text"}
复制代码

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 bar'};const data = JSON.stringify(newPost);httpPost(  'https://jsonplaceholder.typicode.com/posts',  data,  console.log); // Logs: {"userId": 1, "id": 1337, "title": "Foo", "body": "bar bar bar"}
复制代码

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;};// Examplecounter('#my-id', 1, 1000, 5, 2000); // 为 id="my-id" 的元素创建一个两秒的计时器
复制代码

22. 如何将一个字符串复制到剪贴板?

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().addRange(selected);  }};// ExamplecopyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.
复制代码

23. 如何确定页面的浏览器选项卡是否处于前台活跃状态?

const isBrowserTabFocused = () => !document.hidden;// ExampleisBrowserTabFocused(); // true
复制代码

24. 如果一个目录不存在,如何创建它?

const fs = require('fs');const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);// ExamplecreateDirIfNotExists('test'); // creates the directory 'test', if it doesn't exist
复制代码


原文链接:


https://madza.hashnode.dev/24-modern-es6-code-snippets-to-solve-practical-js-problems


2020-10-28 10:001556

评论

发布
暂无评论
发现更多内容

自己常用的一些快捷键 windows10

halapano

Windows技巧

代码简洁之路 [持续更新]

hq

Java 大前端 编程习惯

那些会阻碍程序员成长的细节[1]

MavenTalker

程序员 职业规划

系统服务化构建-两方OAuth

图南日晟

微服务 软件工程 身份认证 架构设计

Dataway 整合 Swagger2,让 API 管理更顺畅

哈库纳

Spring Boot DataQL Dataway Hasor

Vol.3 人工智能这么热,你必须知道一点儿!

pyfn2030

人工智能

说到做到

Yukun

拖延症

AB 测试平台的设计与实现

伴鱼技术团队

架构 系统设计 后端 A/B

ARTS-WEEK01

子路无倦

ARTS 打卡计划

Dataway 4.1.5 以上版本升级指南

哈库纳

string StringBoot Dataway Hasor

无需代码!通过 Dataway 配置一个带有分页查询的接口

哈库纳

spring springboot Dataway Hasor

绝了!Dataway让Spring Boot不再需要Controller、Service、DAO、Mapper

哈库纳

StringBoot DataQL

Vol.4 了解一下渗透测试

pyfn2030

黑客 网络安全

Vol.6 几个数据库相关的词

pyfn2030

数据库 大数据 新手指南

Vol.2 谷歌不只有搜索

pyfn2030

谷歌Google

Gartner 【RPA市场竞争格局】:中国厂商首次进入国际视野

人称T客

原创 | 使用JUnit、AssertJ和Mockito编写单元测试和实践TDD (十)在项目中准备测试环境

编程道与术

Java 编程 软件测试 TDD 单元测试

计算机的时间

伴鱼技术团队

分布式 服务器 技术交流

《程序员的数学》笔记

Rex

读书笔记

Dataway 配置数据接口时和前端进行参数对接

哈库纳

Spring Boot DataQL Dataway Hasor

码农远程办公指北

大伟

Vol.5 Go初探,新手必看!

pyfn2030

编程语言 新手指南

【快点查查】微信小程序使用流程

tomatocc

完美兼容老项目!Dataway 4.1.6 返回结构的全面控制

哈库纳

spring Spring Boot Dataway Hasor

Anaconda与虚拟环境

halapano

Python virtualenv Anaconda

如何用一台电脑制作一部动画短片?

zhoo299

动画 CG

从 0 到 1 搭建技术中台之技术文化篇

伴鱼技术团队

企业文化 技术管理

使用SpreadJS 开发在线问卷系统,构筑CCP(云数据采集)平台

葡萄城技术团队

数据挖掘 大数据 SpreadJS CCP

艺术生,我劝你Mac

zhoo299

Mac CG 艺术

Wi-Fi p2p & ap 共存

贾献华

wifi p2p ap

免费领课的活动你错过了么?

池建强

极客时间

解决实际问题的24个ES6代码段_语言 & 开发_Madza_InfoQ精选文章