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

news2024/11/23 23:42:16

🔥 前言

在现代前端开发中，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/>"; // newline
            case 32: return "&nbsp;"; // space
            case 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;朱昆鹏