本篇文章给大家整理分享JavaScript 必须学会的11 个工具方法(避免重复造轮子),希望对大家有所帮助!
前俩天也是更新了俩篇 JavaScript 的文章,当时由于时间问题,所以就是想到哪里写到哪里,因为对于技术文章只有三五句,几分钟就阅读完,属实无趣,这次趁着周六日有时间好好整理下,尽可量多写一些,下面有具体实现,还有详细注释
计算距离下次生日还有多少天
注意这里借助 moment 实现
getBirthdayFun(){ // 首先要获取到今年的生日 let birthdayTime = moment().format('YYYY-') + '12-19' // 通过时间戳 去判断当前的时间戳是否大于今年生日的时间戳 if (moment().unix() >= moment(birthdayTime).unix()) { // 如果大于的话,那么就在今年的生日上再添加一年,已达到获取下次生日的时间 birthdayTime = moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD') } // 这个直接通过计算 (下次生日的时间戳 - 当前日期的时间戳) / (60 * 60 * 24) 最后求出来的就是 XX 天 return parseInt( (moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24) ) }
回到顶部
// 这里我把 vue3 的案例拿过来 const bindTop = () => { // 方法一 这样可以实现,但是效果不太行 window.scrollTo(0, 0) document.documentElement.scrollTop = 0; // 方法二 通过计时器去滚动 视觉上会丝滑一些,没有太大的卡顿效果 const timeTop = setInterval(() => { // 去控制他的滑行距离 document.documentElement.scrollTop = scrollTopH.value -= 50 // 当滑到顶部的时候记得清除计时器(*) 重点 if (scrollTopH.value <p><strong><span style="font-size: 16px;">复制文本</span></strong></p><pre class="brush:php;toolbar:false"> const copyText = (text) => { // clipboardData 在页面上将需要的东西复制到剪贴板上 const clipboardData = window.clipboardData if (clipboardData) { clipboardData.clearData() clipboardData.setData('Text', text) return true } else if (document.execCommand) { // 注意 document.execCommand 已弃用 但是有些浏览器依旧支持 用的时候记得看兼容情况 // 通过创建 dom 元素,去把要复制的内容拿到 const el = document.createElement('textarea') el.value = text el.setAttribute('readonly', '') el.style.position = 'absolute' el.style.left = '-9999px' document.body.appendChild(el) el.select() // 拷贝当前内容到剪贴板 document.execCommand('copy') // 删除 el 节点 document.body.removeChild(el) return true } return false } copyText('hello!') // ctrl + v = copyText | true
防抖/节流
简单介绍
- 防抖:指定时间内 频繁触发一个事件,以最后一次触发为准
- 节流:指定时间内 频繁触发一个事件,只会触发一次
应用场景有很多比如:
防抖是: input搜索,用户在不断输入内容的时候,用防抖来减少请求的次数并且节约请求资源
节流:场景普遍就是按钮点击,一秒点击 10 下会发起 10 次请求,节流以后 1 秒点再多次,都只会触发一次
下面我们来实现
// 防抖 // fn 需要防抖的函数,delay 为定时器时间 function debounce(fn,delay){ let timer = null // 用于保存定时器 return function () { // 如果timer存在 就清除定时器,重新计时 if(timer){ clearTimeout(timeout); } //设置定时器,规定时间后执行真实要执行的函数 timeout = setTimeout(() => { fn.apply(this); }, delay); } } // 节流 function throttle(fn) { let timer = null; // 首先设定一个变量,没有执行定时器时,默认为 null return function () { if (timer) return; // 当定时器没有执行的时候timer永远是false,后面无需执行 timer = setTimeout(() => { fn.apply(this, arguments); // 最后在setTimeout执行完毕后再把标记设置为true(关键) // 表示可以执行下一次循环了。 timer = null; }, 1000); }; }
过滤特殊字符
function filterCharacter(str){ // 首先设置一个模式 let pattern = new RegExp("[`~!@#$^&*()=:”“'。,、?|{}':;'%,\\[\\]./?~!@#¥……&*()&;—|{ }【】‘;]") let resultStr = ""; for (let i = 0; i <p><strong><span style="font-size: 16px;">常用正则判断</span></strong></p><pre class="brush:php;toolbar:false"> // 校验2-9位文字 不符合为 false 符合为 true const validateName = (name) => { const reg = /^[\u4e00-\u9fa5]{2,9}$/; return reg.test(name); }; // 校验手机号 const validatePhoneNum = (mobile) => { const reg = /^1[3,4,5,6,7,8,9]\d{9}$/; return reg.test(mobile); }; // 校验6到18位大小写字母数字下划线组成的密码 const validatePassword = (password) => { const reg = /^[a-zA-Z0-9_]{6,18}$/; return reg.test(password); };
初始化数组
// fill()方法 是 es6新增的一个方法 使用指定的元素填充数组,其实就是用默认内容初始化数组 const arrList = Array(6).fill() console.log(arrList) // 此处打印的是 ['','','','','','']
将 RGB 转换为十六进制
function getColorFun(r,g,b) { return '#' + ((1 <p><strong><span style="font-size: 16px;">检测是否是一个函数</span></strong></p><pre class="brush:php;toolbar:false"> // 检测是否是一个函数 其实写法以后直接 isFunction 就好了,避免重复写判断 const isFunction = (obj) => { return typeof obj === "function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function"; };
检测是否为一个安全数组
// 检测是否为一个安全数组,若不是返回空数组 这里借助isArray 方法 const safeArray = (array) => { return Array.isArray(array) ? array : [] }
检测对象是否为一个安全对象
// 首先要去判断 当前对象是否为有效对象 const isVaildObject = (obj) => { return typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length } // 这里直接用上面的函数 如果有效就返回本身,无效就返回空对象 const safeObject = obj => isVaildObject(obj) ? obj : {}
最后
上面案例有些代码都是在我单独的 v3 项目里面,如果有需要可以关注我,然后找我要资料,或者需要面试题什么的也都可以找我,都有哈,上面文章如果有不清楚的地方,麻烦指出,希望对大家都能有一定程度的帮助,谢谢支持~
以上是【整理分享】11個JS必須學會的實用工具方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

記事本++7.3.1
好用且免費的程式碼編輯器

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境