2024年最全这些 JavaScript函数让你的工作更加 So Easy!，2024年最新hr分享面试经验

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

/**

• 获取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] = ${KaTeX parse error: Expected '}', got 'EOF' at end of input: …2}`.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;

}

}

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】