蝙蝠岛资源网

24个解决实际问题的ES6代码片段(小结)
网络编程 2024/12/24 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

这是从30 seconds of code中挑出来的非常有用的一些代码片段，这是一个非常棒的项目，大家可以去github上去搜索一下，给个star。

在本文中，我试图根据它们的实际用途对它们进行分类，回答您在项目中可能遇到的常见问题：

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

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

// Example
hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

2.如何检查元素是否具有指定的类？

const hasClass = (el, className) => el.classList.contains(className);

// Example
hasClass(document.querySelector('p.special'), 'special'); // true

3.如何为元素切换类？

const toggleClass = (el, className) => el.classList.toggle(className);

// Example
toggleClass(document.querySelector('p.special'), 'special'); 
// The paragraph will not have the 'special' class anymore

这里使用了classList.toggle()方法

toggle( String [, force] )

当只有一个参数时：切换类值；也就是说，即如果类值存在，则删除它并返回 false，如果不存在，则添加它并返回 true。
当存在第二个参数时：若第二个参数的执行结果为 true，则添加指定的类值，若执行结果为 false，则删除它。

4.如何获取当前页面的滚动位置"htmlcode"> 

const getScrollPosition = (el = window) => ({
 x: el.pageXOffset !== undefined "htmlcode">



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

// Example
scrollToTop();







递归的方法不断调用使用scrollToTop()，requestAnimationFrame方法告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。它的回调函数执行次数通常与浏览器屏幕刷新次数相匹配，所以效果会比较平滑。


获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop


获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft


6.如何检查父元素是否包含子元素？







const elementContains = (parent, child) => parent !== child && parent.contains(child);

// Examples
elementContains(document.querySelector('head'), document.querySelector('title')); 
// true
elementContains(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
 "htmlcode">



const getImages = (el, includeDuplicates = false) => {
 const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'));
 return includeDuplicates "htmlcode">



const detectDeviceType = () =>
 /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 "Mobile" or "Desktop"







10.如何获取当前URL







const currentURL = () => window.location.href;

// Example
currentURL(); // 'https://google.com'







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







const getURLParameters = url =>
 (url.match(/([^"htmlcode">



const formToObject = form =>
 Array.from(new FormData(form)).reduce(
 (acc, [key, value]) => ({
  ...acc,
  [key]: value
 }),
 {}
 );

// Example
formToObject(document.querySelector('#form')); // { email: 'test@email.com', name: 'Test Name' }







Array.from方法用于将两类对象转为真正的数组。类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

reducer 函数接收4个参数:


    
  
  • Accumulator (acc) (累计器)
    • 
  
  • Current Value (cur) (当前值)
    • 
  
  • Current Index (idx) (当前索引)
    • 
  
  • Source Array (src) (源数组)
    • 



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' }] };

// Example
get(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'
); 

// Logs 'later' after one second.







15.如何在给定元素上触发特定事件，并可选地传递自定义数据？







const triggerEvent = (el, eventType, detail) =>
 el.dispatchEvent(new CustomEvent(eventType, { detail }));

// Examples
triggerEvent(document.getElementById('myId'), 'click');
triggerEvent(document.getElementById('myId'), 'click', { username: 'bob' });







构造方法 CustomerEvent() 创建一个新的 CustomEvent 对象。

CustomEvent 事件是由程序创建的，可以有任意自定义功能的事件。


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 "htmlcode">



const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
 (dateFinal - dateInitial) / (1000 * 3600 * 24);

// Example
getDaysDiffBetweenDates(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 "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 "htmlcode">



const isBrowserTabFocused = () => !document.hidden;

// Example
isBrowserTabFocused(); // true







24.如果不存在目录，则如何创建







const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);

// Example
createDirIfNotExists('test'); // creates the directory







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
es6,代码片段

                                     

                                
蝙蝠岛资源网 Design By www.hbtsch.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
蝙蝠岛资源网 Design By www.hbtsch.com

                        

                            

                                
                                
                                    评论“24个解决实际问题的ES6代码片段(小结)”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无24个解决实际问题的ES6代码片段(小结)的评论...

                                    

                                

                            

                        

                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.hbtsch.com
                                            
                                                蝙蝠岛资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            139,976影音资源
                                        

                                        

                                            144,792福利资源
                                        

                                        

                                            21,817软件资源
                                        

                                        

                                            631,128技术资源
                                        

                                    

                                

                            

                            
                            
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com