萧寂

Appearance

js方法合集 ​

path路径解析方法 ​

js
function parseURL(url) {
    const result = {
        path: [],
        params: [],
    };
    const parts = url.split('?');
    result.path.push(parts[0]);
    if (parts.length > 1) {
        const paramsStr = parts[1];
        const paramsArray = paramsStr.split('&');
        paramsArray.forEach(param => {
            const keyValue = param.split('=');
            result.params.push({
                [keyValue[0]]: keyValue[1],
            });
        });
    }
	result.params = Object.assign({}, ...result.params); // 去掉这句代码参数就是一个一个的数组对象了,这个参数就是把数组内的对象数据提取出来合并到一个新对象里面
    return result;
}
console.log(parseURL('https:xxx/cdn/blob/main/Object.js?username=xiaoji&age=20'));

计算百分比均匀分配为100% ​

js
function calculatePercentages(data) {
    // 计算总和
    const total = data.reduce((acc, val) => acc + val, 0);
    const percentages = [];
    // 计算每个数据项的百分比，并取整
    for (let i = 0; i < data.length; i++) {
        const percentage = Math.round((data[i] / total) * 100);
        percentages.push(percentage + '%'); // 在这里添加百分号
    }
    // 对最后一个数据项进行修正以确保总和为 100%
    const totalPercentage = percentages.reduce((acc, val) => acc + parseInt(val), 0);
    const lastPercentageAdjustment = 100 - totalPercentage;
    percentages[percentages.length - 1] = (parseInt(percentages[percentages.length - 1]) + lastPercentageAdjustment) + '%';
    return percentages;
}
const data = [10, 20, 7, 29, 15];
const percentages = calculatePercentages(data);
console.log(percentages); // 输出每个数据项的百分比，带上百分号 ["12%","25%","9%","36%","18%"],相加刚好100%

根据id找到数组内对应元素 ​

js
function findElementById(array, id) {
    // 使用数组的 find 方法来查找元素
    return array.find(element => element.id === id);

// 使用示例
const elements = [
    { id: 1, name: 'Element 1' },
    { id: 2, name: 'Element 2' },
    { id: 3, name: 'Element 3' }
]
const element = findElementById(elements, 2);
console.log(element); // 输出: { id: 2, name: 'Element 2' 
const nonExistingElement = findElementById(elements, 4);
console.log(nonExistingElement); // 输出: undefined

找到数组内符合条件的元素并修改其属性 ​

js
// 例如找到数组内checked为true的元素,修改对应元素的color改成红色
function updateCheckedElementsColor(array) {
    // 使用 forEach 方法遍历数组
    array.forEach(element => {
        if (element.checked === true) {
            // 如果元素的 checked 属性为 true，则将 color 属性设置为 '红色'
            element.color = '红色';
        }
    });
}
// 使用示例
const elements = [
    { id: 1, name: 'Element 1', checked: false, color: 'blue' },
    { id: 2, name: 'Element 2', checked: true, color: 'green' },
    { id: 3, name: 'Element 3', checked: true, color: 'yellow' }
];
// 更新数组中 checked 为 true 的元素的颜色
updateCheckedElementsColor(elements);
// 打印更新后的数组
console.log(elements);

数组的正序倒序排序 ​

js
// 根据数组的count值进行排序,参数一是数组,参数二控制正序还是倒序
function sortByCount(array, ascending) {
    // 使用数组的 sort 方法进行排序
    array.sort((a, b) => {
        // 如果是正序排序（ascending为true），返回a.count - b.count
        // 如果是倒序排序（ascending为false），返回b.count - a.count
        return ascending ? a.count - b.count : b.count - a.count;
    });
}

// 使用示例
const elements = [
    { id: 1, name: 'Element 1', count: 10 },
    { id: 2, name: 'Element 2', count: 5 },
    { id: 3, name: 'Element 3', count: 20 }
];
// 正序排序
sortByCount(elements, true);
console.log('正序排序:', elements);
// 倒序排序
sortByCount(elements, false);
console.log('倒序排序:', elements);

随机数函数 ​

js
function getRandomInt(min, max) {
	return Math.round(Math.random() * (max - min) + min);
}

console.log(getRandomInt(10,20));  // 参数为随机数的范围

查询字符串字节数 ​

js
var str = '你哈哈哈哈哈哈啊哈哈哈哈哈哈哈颇大开发跑我就发很日入好闺女诶欧哈你噶IEUR个';
function wordLength(e) {
    var length = 0
    var arr = e.split('')
    arr.map(function (char) {
        if (char.charCodeAt(0) > 255) {
            //字符编码大于255，说明是双字节字符(中文占两个字符,英文大小写,特殊字符等都是一个字符)
            length += 2
        } else {
            length++
        }
    })
    return length
}
console.log('字符串总字节长度',wordLength(str));

小数保留两位,有0自动去掉 ​

js
  function formatNumber(num) {
    if (num === '') {
      return 0
    } else {
      let handleNum = parseFloat(num)
      let isToFixed = handleNum.toString().includes('.') && handleNum.toString().split('.')[1].length > 2
      if (isToFixed) {
        return handleNum.toFixed(2)
      } else {
        return handleNum
      }
    }
  }

console.log(formatNumber(0.230000001)); // 输出: 0.23
console.log(formatNumber(0.239999991)); // 输出: 0.24
console.log(formatNumber(0.20));        // 输出: 0.2
console.log(formatNumber(2.10));         // 输出: 2
console.log(formatNumber(0.24));        // 输出: 0.24
console.log(formatNumber(0.56));        // 输出: 0.56

处理蓝牙信号rssi的方法，这里分成六份从无信号到五格信号 ​

js
    // 处理信号,传入信号的rssi值
    function transformFromRSSI(rssi) {
        let signal = Math.abs(rssi);
        signal = Math.floor(signal / 10);
        if (signal > 0 && signal <= 3) {
            return 0;
        } else if (signal > 3 && signal <= 5) {
            return 1;
        } else if (signal > 5 && signal <= 7) {
            return 2;
        } else if (signal > 7 && signal <= 9) {
            return 3;
        } else if (signal > 9 && signal <= 12) {
            return 4;
        } else {
            return 5;
        }
    }

节流防抖函数封装 ​

js
// 下面这三个变量放到封装的js的全局中,也就是最上面
let timer = null; // 用于存储节流定时器
let flag = true; // 节流阀
let timer2 = null; // 用于存储防抖定时器

// 节流函数
const sleep1 = (ms) => {
    // 返回promise
    return new Promise((resolve, reject) => {
        // 节流
        if (flag) {
            flag = false;
            timer = setTimeout(() => {
                flag = true;
                clearTimeout(timer);
                timer = null;
                resolve();
            }, ms);
        }
    });
}

// 防抖函数
const sleep2 = (ms) => {
    clearTimeout(timer2);
    timer2 = null

    return new Promise((resolve, reject) => {
        timer2 = setTimeout(() => {
            resolve();
        }, ms);
    });
}


---------------------使用方式------------------------

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装节流防抖函数</title>
    <script src="./util.js"></script>
</head>

<body>
    <button>防抖</button>
    <button>节流</button>
    <script>
        // 使用方式
        // 节流：在单位时间内，只执行一次
        let btn1 = document.querySelectorAll('button');
        btn1[0].addEventListener('click', async () => {
            console.log(11111111);
            await sleep1(2000)
            console.log(2222222);

        })
        // 防抖：在单位时间内，只执行最后一次
        btn1[1].addEventListener('click', async () => {
            console.log(3333333);
            await sleep2(2000)
            console.log(44444444);

        })
    </script>
</body>

</html>

随机数但不重复的方法 ​

js
let arr = [1, 2, 3, 4, 5, 6];

function getRandomThree(arr) {
    let result = new Set();
    while (result.size < 3) {
        let index = Math.floor(Math.random() * arr.length);
        result.add(arr[index]);
    }
    return Array.from(result); // 将 Set 转换为数组
}

console.log(getRandomThree(arr)); // 输出随机的三个不重复元素

设置浏览器cookie ​

js
function setCookie(cookieName,value,expiresTime,path){ 
	expiresTime = expiresTime || "Thu, 01-Jan-2090 00:00:01 GMT"; 
	path = path || "/"; 
	document.cookie=cookieName+ "=" +encodeURIComponent(value)+ "; expires="+ expiresTime+ "; path="+path; 
}

// 设置cookie
setCookie("name","xiaoji");
setCookie("age","20");
setCookie("sex","男");

传入两个点的经纬度返回两点之间的距离 ​

js
function calculateDistance(lat1, lon1, lat2, lon2) {
    // 地球半径（单位：千米）
    const R = 6371.0;

    // 将经纬度从度转换为弧度
    const rad = (deg) => deg * (Math.PI / 180);

    // 转换经纬度为弧度
    const lat1Rad = rad(lat1);
    const lon1Rad = rad(lon1);
    const lat2Rad = rad(lat2);
    const lon2Rad = rad(lon2);

    // 计算经纬度的差值
    const dLat = lat2Rad - lat1Rad;
    const dLon = lon2Rad - lon1Rad;

    // Haversine 公式
    const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1Rad) * Math.cos(lat2Rad) * Math.sin(dLon / 2) ** 2;
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

    // 计算距离
    const distance = R * c;

    return distance; // 返回单位为千米
}

const lat1 = 34.052235;
const lon1 = -118.243683;
const lat2 = 40.712776;
const lon2 = -74.005974;

const distance = calculateDistance(lat1, lon1, lat2, lon2);
console.log(`两点之间的距离是：${distance.toFixed(2)} 千米`);
// 可通过 https://www.bchrt.com/tools/distance-between-coordinates/ 这个网站进行测试
// 也可通过 https://calculatorlib.com/zh/latlong-distance-calculator/ 这个网站进行测试

处理隐私手机号中间四位为* ​

js
function maskMiddleDigits(str) {
            // 检查是否是11位数字,不是11位数字不是手机号不处理
            if (str.length === 11 && /^\d+$/.test(str)) {
                // 将中间四位替换为“****”
                return str.slice(0, 3) + '****' + str.slice(7);
            }
            return str;
        }

const phone = maskMiddleDigits('19544562924')

console.log(phone)

获取浏览器get参数 ​

js
//获取Get参数
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return (r[2]); return null;
}

示例: localhost:8080?id=1234567890&name=张三
console.log(GetQueryString('id')); // 1234567890
console.log(GetQueryString('name')); // 张三

生成随机字符串 ​

js
function getGuid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }

console.log(getGuid())

判断某个键是否在对象中 ​

js
let obj = {
    code:1,
    name:2
}
if ('code' in obj) {
  console.log('code 存在于 obj 中');
} else {
  console.log('code 不存在于 obj 中');
}

生成不重复的随机数(激活码规则) ​

js
// 仅输出单个(激活码)-----------------------------------------------
// activateCode.js
const BASE58 = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz'; // 去掉 0OIl
const BASE58_LEN = BASE58.length;

/** 生成指定长度激活码，默认 21 位 */
function generateCode(len = 21) {
  let code = '';
  for (let i = 0; i < len; i++) {
    code += BASE58[Math.floor(Math.random() * BASE58_LEN)];
  }
  return code;
}

// 打印单个激活码
console.log(generateCode())

// 批量生成激活码-----------------------------------------------
/**
 * 生成 n 个不重复的激活码
 * @param {number} n     需要个数
 * @param {number} len   单条长度
 * @returns {string[]}   不重复激活码数组
 */
function generateUniqueCodes(n = 50, len = 21) {
  const set = new Set();
  // 当碰撞极少时，while 足够快；50 条 50 位基本一次过
  while (set.size < n) {
    set.add(generateCode(len));
  }
  return Array.from(set);
}

// 测试
console.log(generateUniqueCodes(50, 21));

rpx转rem单位 ​

js
function rpxToRem(rpx, screenWidth, rootFontSize) {
  const rem = (rpx * screenWidth) / (750 * rootFontSize);
  return rem.toFixed(2) + 'rem';
}

// 参数一为rpx值,参数二为屏幕宽度,参数三为根元素的字体大小
console.log(rpxToRem(34, 430, 57.3333)); // 输出 "0.40rem"

获取当前是否本地开发环境 ​

js
function isLocalhost(hostname = location.hostname) {
  return ['localhost', '127.0.0.1', '', '::1'].includes(hostname) ||
         hostname.startsWith('127.') ||          // 127.0.0.0/8
         hostname.startsWith('192.168.') ||
         hostname.startsWith('10.') ||
         /^172\.(1[6-9]|2\d|3[01])\./.test(hostname); // 172.16.0.0/12
}

// 用法
if (isLocalhost()) {
  console.log('是本地开发环境');
}

判断当前字符串或者数字是否为小数或者纯数字 ​

js
function isFloat(value) {
  return !isNaN(value) && parseFloat(value) === Number(value);
}

console.log(isFloat('123'));       // true
console.log(isFloat('123.45'));    // true
console.log(isFloat('123.45'));  // true
console.log(isFloat('123.45a')); // false
console.log(isFloat('abc'));     // false

针对异常数字0001,0002这种前面去掉0,,,如.5则补0到0.5的函数 ​

js
function stripLeadingZeros(str) {
  // 1. 只保留数字、负号、第一个小数点
  let s = str
    .replace(/[^0-9.-]/g, '')     // 去非法字符
    .replace(/(\..*)\./g, '$1');  // 只留第一个小数点
  // 2. 去前导 0（负号保留）
  s = s.replace(/^(-?)0+(?=\d)/, '$1');
  // 3. 小数点前若无数字，补 0
  s = s.replace(/^(-?)\./, '$10.');
  // 4. 小数点后若无数字，补 0
  s = s.replace(/\.(?!\d)/, '.0');
  return s;
}

console.log(stripLeadingZeros('0024.5678')); // '24.5678' (去掉前面的0)
console.log(stripLeadingZeros('000.5'));     // '0.5' (去掉前面的0,小数点前无数字则补0)
console.log(stripLeadingZeros('0000.123'));  // '0.123' (去掉前面的0,小数点前无数字则补0)
console.log(stripLeadingZeros('0123'));      // '123' (去掉前面的0)
console.log(stripLeadingZeros('-000.7'));    // '-0.7' (去掉前面的0,保留符号,小数点前无数字则补一个0)
console.log(stripLeadingZeros('0'));         // '0' (0就保留原样)
console.log(stripLeadingZeros('.5'));        // '0.5'（小数点前无数字补0）
console.log(stripLeadingZeros('..1'))        // '0.1' (保留第一位小数点,舍弃后面的的小数点)
console.log(stripLeadingZeros('..'))         // '0.0' (保留第一位小数点,前后无数字则都补0)
console.log(stripLeadingZeros('哈哈哈哈'))    // '' (过滤非数字的非法字符)

判断当前时间是否在某个时间范围内 ​

js
/**
 * 判断当前时间是否在给定的时间范围内
 * @param {string} start - 开始时间，支持 "2025-01-09 13:20:40" 或 "2025-01-09"
 * @param {string} end - 结束时间，支持 "2025-03-19 15:58:09" 或 "2025-03-19"
 * @returns {boolean} - 当前时间是否在范围内
 */
function isNowInRange(start, end) {
  const now = new Date();

  // 解析开始时间
  let startDate;
  if (start.includes(' ')) {
    // 包含时分秒
    startDate = new Date(start);
  } else {
    // 仅日期，默认为 00:00:00
    startDate = new Date(start + ' 00:00:00');
  }

  // 解析结束时间
  let endDate;
  if (end.includes(' ')) {
    // 包含时分秒
    endDate = new Date(end);
  } else {
    // 仅日期，默认为 23:59:59
    endDate = new Date(end + ' 23:59:59');
  }

  // 验证日期有效性
  if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
    throw new Error('Invalid date format');
  }

  // 判断当前时间是否在范围内
  return now >= startDate && now <= endDate;
}

// 使用示例
console.log(isNowInRange('2025-01-09 13:20:40', '2025-12-05 09:33:09')); // true 或 false，可补零也可不补零
console.log(isNowInRange('2025-01-09', '2025-12-04')); // 默认开始时间的00:00:00到结束时间的23:59:59

判断当前时间到目标时间是否过期 ​

js
const expiryTimeText = (expiryTime) => {
    const nowTS = new Date().getTime()
    return expiryTime && new Date(expiryTime).getTime() <= nowTS
}

let time = '2025-12-30 10:57:00' // 如果是2025-12-30代表是2025-12-30 00:00:00

let flag = expiryTimeText(time)

if (flag) {
    console.log('当前时间已过期')
} else {
    console.log('当前时间未过期')
}

给对象固定添加处理的函数值 ​

js
let a = 2, b = 3, c = 4;

let obj = {
    d: 5,
    e: 6,
    f: (() => a + b + c)()   // 立即执行，返回 11
};

console.log(obj.f); // 11

给对象添加动态处理的函数值 ​

js
let a = 2, b = 3, c = 4;

let obj = {
    d: 5,
    e: 6,
    get f() {          // 每次访问才重新计算，而不是缓存
        return a + b + c;
    }
};

console.log(obj.f); // 11
a = 10;
console.log(obj.f); // 17

萧寂173专属博客，v1.0.0.4