这些 JavaScript函数让你的工作更加 So Easy!
作者： YoussefZidan上个月花了 1600 搞了个配置较高 阿里服务器 来学习 node 及对应的框架，现在：,阿里云双11活动 1核2G1M，69元/1年，180元/3年
译者：前端小智
来源：dev
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
在本文中，分享一些我几乎在每个项目中都会用到的一些函数。
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"));
// 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 = https://www.it610.com/article/(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函数让你的工作更加 So Easy!】完~，我是小智，我要去刷碗去了。
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://dev.to/youssefzidan/j...
交流 文章每周持续更新，可以微信搜索【大迁世界 】第一时间阅读，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。
文章图片
推荐阅读
- 事件代理
- 螃蟹和这些食物同吃，轻则腹泻、重则中毒！要小心哦~
- 一起来学习C语言的字符串转换函数
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解
- C语言中的时间函数clock()和time()你都了解吗
- 数组常用方法一
- 概率论/统计学|随机变量 的 分布函数 与 概率密度函数 的区别
- 谁还顾念小城的旧（）
- 辞职前，我劝你先想好这些