【前端】JavaScript 方法速查大全-函数、正则、格式化、转换、进制、 XSS 转义（四）

🔥 前言

在现代前端开发中，JavaScript 是不可或缺的语言。无论是处理数据、操作 DOM，还是进行复杂的逻辑运算，掌握 JavaScript 的各种方法都是每位开发者的必修课。本文将为您提供一个全面、系统的 JavaScript 方法参考，涵盖数组操作、对象处理、正则表达式、数据格式转换等众多方面，助您在开发中游刃有余！💪

JavaScript 方法速查

📚 JavaScript 方法速查

1. 数学函数的实用示例

JavaScript 提供了丰富的数学函数，以下是一些常用的示例：

console.log(parseInt(5.12)); // 5
console.log(Math.floor(5.12)); // 5
console.log(Math.ceil(5.12)); // 6
console.log(Math.round(5.499)); // 5
console.log(Math.round(5.501)); // 6
console.log(Math.abs(-5)); // 5
console.log(Math.max(5, 6)); // 6
console.log(Math.min(5, 6)); // 5
console.log(Math.random()); // 随机数 (0-1)

2. 常用正则表达式速查

正则表达式是处理字符串的强大工具，以下是一些常见的正则表达式示例：

消除字符串首尾空格

let reg = /^\s+|\s+$/g;
let str = ' #id div.class '; 
console.log(str.replace(reg, '')); // "#id div.class"

替换手机号码

var reg = /1[24578]\d{9}/;
var str = '姓名：朱昆鹏 手机：15932638907';
console.log(str.replace(reg, '***')); // "姓名：朱昆鹏 手机：***"

替换敏感字

let str = '中国中国人民解放军中华人民共和国';
let r = str.replace(/中国|军/g, input => '*'.repeat(input.length));
console.log(r); // "****人民解放*中华人民共和国"

千位分隔符

let reg = /(\d)(?=(?:\d{3})+$)/g;
let numStr = '100002003232322';
let formatted = numStr.replace(reg, '$1,');
console.log(formatted); // "100,002,003,232,322"

验证手机号码

let reg = /^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/;
console.log(reg.test('15932539095')); // true
console.log(reg.test('234554568997')); // false

3. 变量交换

在 JavaScript 中，变量交换可以通过解构赋值轻松实现：

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

4. 格式化对象为 JSON 代码

使用 JSON.stringify 可以将对象格式化为 JSON 字符串：

const formatted = JSON.stringify({name: 'Jhon', age: 18, address: 'sz'}, null, 4);
console.log(formatted);
/*
{"name": "Jhon","age": 18,"address": "sz"
}
*/

5. 随机生成六位数字验证码

const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0");
console.log(code); // 例如 '042377'

6. RGB 颜色转 16 进制颜色

const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
console.log(RGBToHex(255, 165, 1)); // 'ffa501'

7. 生成随机整数

function randomNum(min, max) {switch (arguments.length) {case 1:return Math.floor(Math.random() * min + 1);case 2:return Math.floor(Math.random() * (max - min + 1) + min);default:return 0;}
}console.log(randomNum(1, 10)); // 随机 [1,10] 的整数

8. 去除空格

function trim(str, type = 1) {if (![1, 2, 3, 4].includes(type)) return;switch (type) {case 1:return str.replace(/\s/g, "");case 2:return str.replace(/(^\s)|(\s*$)/g, "");case 3:return str.replace(/(^\s)/g, "");case 4:return str.replace(/(\s$)/g, "");default:return str;}
}console.log(trim('  Hello World  ', 2)); // "Hello World"

9. 大小写转换

function turnCase(str, type) {switch (type) {case 1:return str.toUpperCase();case 2:return str.toLowerCase();case 3:return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();default:return str;}
}console.log(turnCase('hello World', 1)); // "HELLO WORLD"

10. 随机生成 16 进制颜色

function hexColor() {let str = '#';let arr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];for (let i = 0; i < 6; i++) {let index = Math.floor(Math.random() * 16);str += arr[index];}return str;
}console.log(hexColor()); // 例如 '#FFA501'

11. 统计一段文字中指定文字出现次数

function keywordsCount(text, keywords) {return text.split(keywords).length - 1;
}console.log(keywordsCount('hello world, hello JavaScript', 'hello')); // 2

12. 轮询等待函数

function pollingWaiting(callBack, resCallBack, time = 100, lastTime = 1000) {let startTime = Date.now();let t = null;const fn = function () {t = setTimeout(() => {if (!callBack()) {if (Date.now() - startTime > lastTime) {clearTimeout(t);} else {fn();}} else {resCallBack();}}, time);};fn();
}// 示例
let a = 1;
setTimeout(() => {a = 2;
}, 500);pollingWaiting(() => a === 2,() => { console.log('触发了', a); },100,800
);
// 输出:
// "触发了 2"

13. 大数值转换为万，亿

function numConversion(num, point = 2) {let numStr = Math.floor(num).toString();let numLen = numStr.length;if (numLen < 6) {return numStr;} else if (numLen >= 6 && numLen <= 8) {let decimal = numStr.substring(numLen - 4, numLen - 4 + point);let res = parseInt(num / 10000) + '.' + decimal + '万';return res;} else if (numLen > 8) {let decimal = numStr.substring(numLen - 8, numLen - 8 + point);let res = parseInt(num / 100000000) + '.' + decimal + '亿';return res;}
}console.log(numConversion(123456789)); // "1.23亿"

14. 常见的 XSS 转义场景

转义 HTML 特殊字符

function HtmlEncode(str) {var hex = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];var preescape = str;var escaped = "";for(var i = 0; i < preescape.length; i++){var p = preescape.charAt(i);escaped += escapeCharx(p);}return escaped;function escapeCharx(original){var thechar = original.charCodeAt(0);switch(thechar) {case 10: return "<br/>"; // newlinecase 32: return "&nbsp;"; // spacecase 34: return "&quot;"; // "case 38: return "&amp;"; // &case 39: return "&#x27;"; // 'case 60: return "&lt;"; // <case 62: return "&gt;"; // >default:if(thechar > 127) {return "&#x" + thechar.toString(16) + ";";}else{return original;}}}
}let str = '朱昆鹏<div>2707509@.qq.com</div>朱昆鹏';
console.log(HtmlEncode(str)); 
// 输出：朱昆鹏&lt;div&gt;2707509@.qq.com&lt;/div&gt;朱昆鹏