Shulou(Shulou.com)06/03 Report--

这篇文章将为大家详细讲解有关哪些JavaScript函数让你的工作更方便，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

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()); // 97

capitalize()

将字符串的第一个字母变为大写。

/** * 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")); // Cat

truncate();

这对于长字符串很有用，特别是在表内部。

/** * 截断字符串.... * @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)) // 5

getInnerHTML()

每当服务器返回一串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 MB getTimes() 你是否有一个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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.