写点什么

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

2020 年 10 月 28 日

解决实际问题的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:001100

评论

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

2021最新整理Java面试合集(1000道附答案解析)

比伯

Java 编程 架构 面试 程序人生

Redis - 替换策略:LRU和LFU

insight

redis 3月日更

Python OpenCV 图像缩放 cv2.resize 方法

梦想橡皮擦

3月日更

这个 29.7 K 的剪贴板 JS 库有点东西!

阿宝哥

JavaScript 开源项目 源码解析

单表操作

在即

28天写作 28天挑战 3月日更

消费细分时代来临,户外广告该如何升级

󠀛Ferry

七日更 3月日更

比特币:21世纪的终极离岸银行

CECBC区块链专委会

比特币

管理者如何应对员工离职

石云升

离职 28天写作 职场经验 管理经验 3月日更

作为后端开发人员应该懂的TCP、HTTP、Socket、Socket连接池,一文详解丨Linux后端开发

Linux服务器开发

TCP socket HTTP 后端开发 Linux服务器开发

常见Http响应码

风翱

3月日更 http响应码

为智能世界“高”歌:HEIGHT,五种风景,一个答案

脑极体

聊一聊 Vue 3 双向绑定是如何工作的

阿宝哥

Vue Vue 3

rmtc交易所系统开发平台丨rmtc交易所源码设计

系统开发咨询1357O98O718

坚持输出文字

lenka

3月日更

设计与思考,关于资源和生命周期(二)

程序员架构进阶

设计实践 生命周期 28天写作 3月日更 池化技术

智能化软件开发微访谈·第十六期:低代码/无代码开发

吴盛

低代码 快速开发 sql 无代码开发

21天吃透这套字节面试题后,我成功跳槽进了字节,税后25K

互联网架构师小马

Java 数据结构 面试 算法

百度AI人才培养课程0元报名倒计时

百度大脑

百度 AI 飞桨

Java后端开发面试题之MySQL上篇(含答案)

北游学Java

Java MySQL 面试

发展数字经济要因地制宜

CECBC区块链专委会

数字经济

JSP中Vue.js的使用受限

空城机

vue.js 前端 前端开发 jsp

Service Mesh框架选型对比分析:Linkerd、Envoy、Istio、Conduit

xcbeyond

Service Mesh 服务网格 3月日更

Wireshark数据包分析学习笔记Day22

穿过生命散发芬芳

Wireshark 数据包分析 3月日更

你不知道的 Proxy

阿宝哥

JavaScript Proxy web api

15|图形设计技巧

青城

寻找被遗忘的勇气(二十五)

Changing Lin

3月日更

架构师训练营第一课学习笔记

杰语

9种常用便捷的Java异常处理方法,帮你脱身繁琐

北游学Java

Java 异常 异常检测 异常处理

为什么很多工程师不了解Serverless

云原生

Serverless 云原生 Knative

17张图带你搞懂ZooKeeper一致性原理!

Java小咖秀

程序员 TCP udp 传输协议

JVM疑难情况分析

秋天

jvm调优

4月17日 HarmonyOS 开发者日·上海站

4月17日 HarmonyOS 开发者日·上海站

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