探索AIGC电商新纪元,火山引擎《云上新视界》公开课等你来报名! 了解详情
写点什么

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

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

    阅读完需:约 14 分钟

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

《企业级 Agents 开发实战营》重磅上线,10 周带你进行工具、对话及多模态等不同类型 Agents 工程化开发实战!

这篇文章基于实际使用场景总结了 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:001588

评论

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

数据结构和算法难?盘他!-快速入门

Aldeo

数据结构 算法 时间复杂度 复杂度 算法和数据结构

【LeetCode】丑数 IIJava题解

Albert

算法 LeetCode 4月日更

【音视频】手把手带你实现超实用实时音视频工具

轻口味

android 音视频 WebRTC 移动端 OpenGL ES

树莓派4B+OpenVINO快速实现人脸识别

IT蜗壳-Tango

音视频 IT蜗壳教学 4月日更

美团面试题:String s = new String("111") 会创建几个对象?

Java小咖秀

Java 面试 string java对象

我一怒之下写了个抄袭举报工具!只因一觉醒来我的文章被多个平台抄袭!

1_bit

Python selenium 签约计划 文本分析 文章查重

线程池的引入和实践案例分享

小诚信驿站

线程池 线程池工作原理

浅论变量的作用域与变量的生存周期

Integer

c

从一个创业者的角度看国外爆火音频实时聊天APP-ClubHouse,真香

Langer

产品推荐 产品策略 语音社交

想要做网页游戏怎么办 ?PixiJs篇(一)

空城机

大前端 游戏开发 4月日更 pixi HTML5游戏

这些相见恨晚的命令行工具,你用过几个?

王坤祥

bash Linux Tool

uni-app跨端开发H5、小程序、IOS、Android(八):理解uni-app生命周期

黑马腾云

小程序 uni-app ios android H5

重装变态的微信

箭上有毒

生活 4月日更

2021 年带你漫游语音识别技术

清秋

人工智能 语音识别 智能音箱 签约计划 4月日更

从运营、产品和技术,多角度思考电商的营销体系建设

邴越

电商营销 优惠券

【IDEA】配置MySQL环境并创建MySQL数据库

咿呀呀

Java MySQL 数据库 IDEA

数据中台前世今生

李孟聊AI

大数据 数据中台 签约计划

如何从零搭建技术团队

石云升

团队建设 28天写作 职场经验 管理经验 4月日更

推荐一本新书《Software Design for Flexibility: How to Avoid Programming Yourself Into a Corner》

顿晓

推荐书籍 4月日更 SICP flexibility

自古彭城列九州 龙争虎斗几千秋|靠谱点评

无量靠谱

区块链国富论——财富不是物,而是全球信用共识

CECBC

黄金交易

干货版“测试小品”欢乐场景

清菡软件测试

自动化测试

聪明人的训练(十一)

Changing Lin

4月日更

华仔架构训练营作业(模块一)

不听不听王八念晶

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表关系管理(六)

crudapi

Vue crud crudapi quasar 表关系

手把手教你基于Prometheus搭建监控告警系统

Java全栈封神

云原生 Prometheus 监控告警

100万级车辆数据监控的hadoop大数据架构探索与实践

黑马腾云

大数据 flink hadoop 分布式 车联网

从零开始带你打开批处理大门

xiezhr

doc 批处理 cmd

全网首发:Android Camera2 集成人脸识别算法

小驰笔记

android 音视频 人脸识别 引航计划

如何设计一款用户想要的产品——“Design Thinking”培训笔记

gavin

产品设计 design thinking

ElasticSearch 如何使用 ik 进行中文分词?

程序员历小冰

中文分词 elasticsearch ik 全文搜索

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