这篇文章将为大家详细讲解有关哪些JavaScript函数让你的工作更方便，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联是一家专业提供昌吉企业网站建设,专注与成都网站设计、成都网站建设、H5页面制作、小程序制作等业务。10年已为昌吉众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
randomNumber()
获取指定区间的随机数。
** * 在最小值和最大值之间生成随机整数。 * @param {number} min Min number * @param {number} max Max Number */ export const randomNumber = (min = 0, max = 1000) => Math.ceil(min + Math.random() * (max - min)); // Example console.log(randomNumber()); // 97capitalize()
将字符串的第一个字母变为大写。
/** * Capitalize Strings. * @param {string} s String that will be Capitalized */ export const capitalize = (s) => { if (typeof s !== "string") return ""; return s.charAt(0).toUpperCase() + s.slice(1); } // Example console.log(capitalize("cat")); // Cattruncate();
这对于长字符串很有用，特别是在表内部。
/** * 截断字符串.... * @param {string} 要截断的文本字符串 * @param {number} 截断的长度 */ export const truncate = (text, num = 10) => { if (text.length > num) { return `${text.substring(0, num - 3)}...` } return text; } // Example console.log(truncate("this is some long string to be truncated")); // this is...toTop();
滚到到底部，可以通过 behavior 属性指定滚动速度状态。
/** * Scroll to top */ export const toTop = () => { window.scroll({ top: 0, left: 0, behavior: "smooth" }); };softDeepClone()
这个方法是经常被用到的，因为有了它，我们可以深度克隆嵌套数组或对象。
不过，这个函数不能与new Date()、NaN、undefined、function、Number、Infinity等数据类型一起工作。
你想深度克隆上述数据类型，可以使用 lodash 中的 cloneDeep() 函数。
/** * Deep cloning inputs * @param {any} input Input */ export const softDeepClone= (input) => JSON.parse(JSON.stringify(input));appendURLParams() & getURLParams()
快速添加和获取查询字符串的方法，我通常使用它们将分页元数据存储到url。
/** * Appen query string and return the value in a query string format. * @param {string} key * @param {string} value */ export const appendURLParams = (key, value) => { const searchParams = new URLSearchParams(window.location.search).set(key, value); return searchParams.toString(); }; // example console.log(appendURLParams("name", "youssef")) // name=youssef /** * Get param name from URL. * @param {string} name */ export const getURLParams = (name) => new URLSearchParams(window.location.search).get(name); // Example console.log(getURLParams(id)) // 5getInnerHTML()
每当服务器返回一串HTML元素时，我都会使用它。
/** * 获取HTML字符串的内部Text * @param {string} str A string of HTML */ export const getInnerHTML = (str) => str.replace(/(<([^>]+)>)/gi, "");scrollToHide()
上滚动以显示HTML元素，向下滚动以将其隐藏。
/** * 下滚动时隐藏HTML元素。 * @param {string} 元素的 id * @param {string} distance in px ex: "100px" */ export const scrollToHide = (id, distance) => { let prevScrollpos = window.pageYOffset; window.onscroll = () => { const currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById(id).style.transform = `translateY(${distance})`; } else { document.getElementById(id).style.transform = `translateY(-${distance})`; } prevScrollpos = currentScrollPos; }; };humanFileSize ()
传入字节为单位的文件，返回我们日常所熟悉的单位。
/** * Converting Bytes to Readable Human File Sizes. * @param {number} bytes Bytes in Number */ export const humanFileSize = (bytes) => { let BYTES = bytes; const thresh = 1024; if (Math.abs(BYTES) < thresh) { return `${BYTES} B`; } const units = ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; let u = -1; const r = 10 ** 1; do { BYTES /= thresh; u += 1; } while (Math.round(Math.abs(BYTES) * r) / r >= thresh && u < units.length - 1); return `${BYTES.toFixed(1)} ${units[u]}`; }; // Example console.log(humanFileSize(456465465)); // 456.5 MBgetTimes()
你是否有一个DDL，它每n分钟显示一天的时间?用这个函数。
/** * Getting an Array of Times + "AM" or "PM". * @param {number} minutesInterval * @param {number} startTime */ export const getTimes = (minutesInterval = 15, startTime = 60) => { const times = []; // time array const x = minutesInterval; // minutes interval let tt = startTime; // start time const ap = ["AM", "PM"]; // AM-PM // loop to increment the time and push results in array for (let i = 0; tt < 24 * 60; i += 1) { const hh = Math.floor(tt / 60); // getting hours of day in 0-24 format const mm = tt % 60; // getting minutes of the hour in 0-55 format times[i] = `${`${hh === 12 ? 12 : hh % 12}`.slice(-2)}:${`0${mm}`.slice(-2)} ${ ap[Math.floor(hh / 12)] }`; // pushing data in array in [00:00 - 12:00 AM/PM format] tt += x; } return times; }; // Example console.log(getTimes()); /* [ "1:00 AM", "1:15 AM", "1:30 AM", "1:45 AM", "2:00 AM", "2:15 AM", "2:30 AM", // .... ] */setLocalItem() & getLocalItem()
让 LocalStorage 具有过期时间。
/** * Caching values with expiry date to the LocalHost. * @param {string} key Local Storage Key * @param {any} value Local Storage Value * @param {number} ttl Time to live (Expiry Date in MS) */ export const setLocalItem = (key, value, ttl = duration.month) => { const now = new Date(); // `item` is an object which contains the original value // as well as the time when it's supposed to expire const item = { value, expiry: now.getTime() + ttl, }; localStorage.setItem(key, JSON.stringify(item)); }; /** * Getting values with expiry date from LocalHost that stored with `setLocalItem`. * @param {string} key Local Storage Key */ export const getLocalItem = (key) => { const itemStr = localStorage.getItem(key); // if the item doesn't exist, return null if (!itemStr) { return null; } const item = JSON.parse(itemStr); const now = new Date(); // compare the expiry time of the item with the current time if (now.getTime() > item.expiry) { // If the item is expired, delete the item from storage // and return null localStorage.removeItem(key); return null; } return item.value; };formatNumber()
/** * Format numbers with separators. * @param {number} num */ export const formatNumber = (num) => num.toLocaleString(); // Example console.log(formatNumber(78899985)); // 78,899,985我们还可以添加其他选项来获取其他数字格式，如货币、距离、权重等。
export const toEGPCurrency = (num) => num.toLocaleString("ar-EG", { style: "currency", currency: "EGP" }); export const toUSDCurrency = (num) => num.toLocaleString("en-US", { style: "currency", currency: "USD" }); console.log(toUSDCurrency(78899985)); // $78,899,985.00 console.log(toEGPCurrency(78899985)); // ٧٨٬٨٩٩٬٩٨٥٫٠٠ ج.م.toFormData()
每当我需要向服务器发送文件时，我就使用这个函数。
/** * Convert Objects to Form Data Format. * @param {object} obj */ export const toFormData = (obj) => { const formBody = new FormData(); Object.keys(obj).forEach((key) => { formBody.append(key, obj[key]) }) return formBody; }getScreenWidth()
获取一个表示屏幕宽度的字符串。
/** * Detect screen width and returns a string representing the width of the screen. */ export const getScreenWidth = () => { const screenWidth = window.screen.width; if (screenWidth <= 425) return "mobile"; if (screenWidth <= 768) return "tablet"; if (screenWidth <= 1024) return "laptopSm"; if (screenWidth <= 1440) return "laptopLg"; if (screenWidth <= 2560) return "HD"; return screenWidth; };检查数组中的每个元素是否存在于另一个数组中。
export const containsAll = (baseArr, arr) => { let all = false; for (let i = 0; i < arr.length; i += 1) { if (baseArr.includes(arr[i])) { all = true; } else { all = false; return all; } } return all; };关于哪些JavaScript函数让你的工作更方便就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。