一些常用的js方法

目录

1、获取url上的参数

2、替换字符串上指定参数

---

1、获取url上的参数

// 不可以获取中文
const getUrlParams = () => {
   const pattern = /(\w+)=(\w+)/ig;
   const params = {}
   const url = location.href;
   url.replace(pattern, ($, $1, $2) => {
       params[$1] = $2
   });
   return params;
 }


// 获取url上的参数 可以获取中文
const getUrlParams = () => {
    const url = decodeURI(location.href);
    let queryParams = {};
    const queryString = url.split('?')[1];
    if (queryString) {
        queryParams = Object.fromEntries(queryString.split('&').map(param =>    param.split('=')));
    }
    return queryParams;
}

2、替换字符串上指定参数

const str = "report/{a}/{b}/{c}/{d}";
const values = {"a": "1", "b": 2, "c": 3, "d": 4};

const replacedStr = str.replace(/{([^}]+)}/g, (match, key) => {
  return values[key] || match;
});

console.log(replacedStr); // 输出 "report/1/2/3/4"

// 取值
const str = "report/{a}/{b}/{c}/{d}";
const regex = /{([^}]+)}/g;
const matches = str.match(regex);

const values = matches.map(match => match.substring(1, match.length - 1));
console.log(values); // 输出 ['a', 'b', 'c', 'd']

3、引入js并避免浏览器缓存

<script>document.write("<script src='./config.js?" + (new Date()).getTime() +"'></"+"script>");</script>

    <script type="module">
        const script = document.createElement('script');
        script.src = '../js/consultation-records.js?v=' + Date.now();
        document.head.appendChild(script);
    </script>

4、排序

// 冒泡排序
function bubbleSort(arr) {
 let len = arr.length;
 for (let i = 0; i < len; i++) {
   for (let j = 0; j < len - i - 1; j++) {
     if (arr[j] > arr[j + 1]) {
       let temp = arr[j];
       arr[j] = arr[j + 1];
       arr[j + 1] = temp;
     }
   }
 }
 return arr;
}

let arr = [3, 5, 2, 6, 1, 4];
console.log(bubbleSort(arr));

// 快速排序
function quickSort(arr, left = 0, right = arr.length - 1) {
 if (left < right) {
   let pivot = partition(arr, left, right);
   quickSort(arr, left, pivot - 1);
   quickSort(arr, pivot + 1, right);
 }
 return arr;
}

function partition(arr, left, right) {
 let pivot = arr[right];
 let i = left;
 for (let j = left; j < right; j++) {
   if (arr[j] < pivot) {
     let temp = arr[i];
     arr[i] = arr[j];
     arr[j] = temp;
     i++;
   }
 }
 let temp = arr[i];
 arr[i] = arr[right];
 arr[right] = temp;
 return i;
}

let arr = [3, 5, 2, 6, 1, 4];
console.log(quickSort(arr));

// 字符串数组B包含复杂数组A中的部分id，需要将复杂数组A中的数据根据字符串数组B中记录的id顺序进行重新排序，如果B中不包含A数据中的id，则将该数据排到A数组最末尾

// 复杂数组A
const complexArrayA = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
    { id: 4, name: 'David' }
];

// 字符串数组B
const stringArrayB = ['3', '1'];

// 将A中的数据根据B中记录的id顺序重新排序
const reorderedArrayA = complexArrayA.sort((a, b) => {
    const indexA = stringArrayB.indexOf(a.id.toString());
    const indexB = stringArrayB.indexOf(b.id.toString());
    
    if (indexA === -1) return 1;
    if (indexB === -1) return -1;
    
    return indexA - indexB;
});

console.log(reorderedArrayA);

// 将长度单位从 mm 转换为 px
function convertMMtoPX(mm) {
    const MM_TO_INCH = 0.0393701;
    const INCH_TO_PX = 96;
    return Math.round(mm * MM_TO_INCH * INCH_TO_PX);
}

5、列表自动滚动

        const scrollContainer = ref(null);
        let intervalId;
        const scrollStep = 1; // 每次滚动的像素值
        const scrollInterval = 100; // 滚动间隔的毫秒数

        const startScroll = () => {
            intervalId = setInterval(() => {
                if (scrollContainer.value) {
                    const container = scrollContainer.value;
                    container.scrollTop += scrollStep;
                    if (container.scrollHeight - container.clientHeight === container.scrollTop) {
                        container.scrollTop = 0; // 如果到达底部，重置scrollTop
                    }
                }
            }, scrollInterval);
        };

6、动态显示年月日时分秒

    const updateTime = () => {
            const date = new Date();
            const y = formatTime(date.getFullYear());
            const m = formatTime(date.getMonth() + 1);
            const d = formatTime(date.getDay());
            const hours = formatTime(date.getHours());
            const minutes = formatTime(date.getMinutes());
            const seconds = formatTime(date.getSeconds());
            state.currentTime = `${y}-${m}-${d} ${hours}:${minutes}:${seconds}`;
            requestAnimationFrame(updateTime);
        };

       onMounted(async () => {
            updateTime();
        })

        onBeforeUnmount(() => {
            cancelAnimationFrame(updateTime);
        });

7、forof循环设置等待时间

for (const item of res) {
              await new Promise(r => setTimeout(r, 300))
              console.log('123123123);
            }

8、防抖或者延迟执行

export function debounce<T extends (...args: any[]) => any>(
  func: T,
  delay: number = 300
): (...args: Parameters<T>) => void {
  let timer: number
  return function (...args: Parameters<T>): void {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, delay)
  }
}