IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 19 个解决常见 JavaScript 问题的实用 ES6 代码段 -> 正文阅读

[JavaScript知识库]19 个解决常见 JavaScript 问题的实用 ES6 代码段

在我们的开发人员工作流程中,我们经常遇到可能只需要几行代码即可解决的具有挑战性的问题。在本文中,我尝试编写一些有用的代码片段,这些代码片段可以在处理 URL、DOM、事件、日期、用户偏好等时为你提供帮助。

所有的片段都是我从 30 秒的代码中精心挑选出来的,这是一个很棒的资源网站,我强烈建议你去看看学习更多的东西。

整理学习这些的主要标准就是它的实用性,希望你能从中找到一些有价值的东西,可以应用到你未来的代码库中。

1. 如何获取基础 URL?

const getBaseURL = url => url.replace(/[?#].*$/, '');
getBaseURL('http://url.com/page?name=Adam&surname=Smith');// 'http://url.com/page'

2. 如何判断网址是否为绝对网址?

const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);
isAbsoluteURL('https://google.com'); // trueisAbsoluteURL('ftp://www.myserver.net'); // trueisAbsoluteURL('/foo/bar'); // false

3. 如何获取URL参数作为对象?

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

4.如何检查元素是否包含另一个元素?

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

5.如何获取元素的所有祖先?

const getAncestors = el => {  let ancestors = [];  while (el) {    ancestors.unshift(el);    el = el.parentNode;  }  return ancestors;};
getAncestors(document.querySelector('nav'));// [document, html, body, header, nav]

6. 如何平滑滚动元素进入视图?

const smoothScroll = element =>  document.querySelector(element).scrollIntoView({    behavior: 'smooth'  });
smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBarsmoothScroll('.fooBar');// scrolls smoothly to the first element with a class of fooBar

7.如何处理元素外的点击?

const onClickOutside = (element, callback) => {  document.addEventListener('click', e => {    if (!element.contains(e.target)) callback();  });};
onClickOutside('#my-element', () => console.log('Hello'));// Will log 'Hello' whenever the user clicks outside of #my-element

8.如何生成UUID?

const UUIDGeneratorBrowser = () =>  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>    (      c ^      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))    ).toString(16)  );
UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'

9. 如何获取选中的文本?

const getSelectedText = () => window.getSelection().toString();
getSelectedText(); // 'Lorem ipsum'

10. 如何将文本复制到剪贴板?

const copyToClipboard = str => {  if (navigator && navigator.clipboard && navigator.clipboard.writeText)    return navigator.clipboard.writeText(str);  return Promise.reject('The Clipboard API is not available.');};

11. 如何给 HTML 元素添加样式?

const addStyles = (el, styles) => Object.assign(el.style, styles);
addStyles(document.getElementById('my-element'), {  background: 'red',  color: '#ffff00',  fontSize: '3rem'});

12.如何切换全屏模式?

const fullscreen = (mode = true, el = 'body') =>  mode    ? document.querySelector(el).requestFullscreen()    : document.exitFullscreen();
fullscreen(); // Opens `body` in fullscreen modefullscreen(false); // Exits fullscreen mode

13.如何检测Caps Lock是否开启?

<form>  <label for="username">Username:</label>  <input id="username" name="username">
  <label for="password">Password:</label>  <input id="password" name="password" type="password">  <span id="password-message" style="display: none">Caps Lock is on</span></form>const el = document.getElementById('password');const msg = document.getElementById('password-message');
el.addEventListener('keyup', e => {  msg.style = e.getModifierState('CapsLock')    ? 'display: block'    : 'display: none';});

14. 如何查看日期是否有效?

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid('December 17, 1995 03:24:00'); // trueisDateValid('1995-12-17T03:24:00'); // trueisDateValid('1995-12-17 T03:24:00'); // falseisDateValid('Duck'); // falseisDateValid(1995, 11, 17); // trueisDateValid(1995, 11, 17, 'Duck'); // falseisDateValid({}); // false

15. 如何从Date中获取冒号时间?

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
getColonTimeFromDate(new Date()); // '08:38:00'

16. 如何从 Date 生成 UNIX 时间戳?

const getTimestamp = (date = new Date()) => Math.floor(date.getTime() / 1000);
getTimestamp(); // 1602162242

17、如何查看当前用户的首选语言?

const detectLanguage = (defaultLang = 'en-US') =>  navigator.language ||  (Array.isArray(navigator.languages) && navigator.languages[0]) ||  defaultLang;
detectLanguage(); // 'nl-NL'

18、如何查看用户偏好的配色方案?

const prefersDarkColorScheme = () =>  window &&  window.matchMedia &&  window.matchMedia('(prefers-color-scheme: dark)').matches;
prefersDarkColorScheme(); // true

19.如何查看设备是否支持触摸事件?

const supportsTouchEvents = () =>  window && 'ontouchstart' in window;
supportsTouchEvents(); // true

总结

以上就是我今天整理的19个实用的ES6代码片段的内容,希望这些内容对你也有用,你能够从中学习到一些新的东西,感谢你的阅读。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-12-25 10:59:18  更:2022-12-25 11:04:21 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年7日历 -2024/7/21 6:38:32-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码