js相关总结

数组相关

数组去重

const arrayWithObjects = [
    { id: 1, name: 'John', children: [{ id: 5, name: 'aBob' }] },
    { id: 2, name: 'Jane' },
    { id: 4, name: 'John' }, // Duplicate
    { id: 3, name: 'Bob' },
  ];
  
  function deepUnique(arr) {
    const uniqueMap = new Map();
  
    function processArray(array) {
      array.forEach(obj => {
        if (obj.children && obj.children.length > 0) {
          // If the object has children, recursively process them
          obj.children = processArray(obj.children);
        }
        uniqueMap.set(obj.name, obj);
      });
  
      return Array.from(uniqueMap.values());
    }
  
    return processArray(arr);
  }
  
  const uniqueArray = deepUnique(arrayWithObjects);
  console.log(uniqueArray);
  

字符串数值

function format(params) {
    const parts = params.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}
const a = format(12345.666666);
console.log(a);  // 输出: "12,345.666666"

精度丢失

function add(num1, num2) {
    // 计算了 num1 和 num2 的小数部分的位数
    const num1Digits = (num1.toString().split('.')[1] || '').length;
    const num2Digits = (num2.toString().split('.')[1] || '').length;
    // 设置为 10 的最大小数位数的次方，确保在进行加法运算时不会丢失精度。
    const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
    // 执行实际的加法运算。将两个数字都乘以 baseNum，将小数部分移到整数部分进行相加。除以 baseNum，将结果还原为原始的浮点数形式
    return (num1 * baseNum + num2 * baseNum) / baseNum;
}
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(add(0.1, 0.2)); // 0.3

数值转汉字

function convertToChinaNum(num) {
    var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿'];//可继续追加更高位转换值
    if (!num || isNaN(num)) {
        return "零";
    }
    var english = num.toString().split("")
    var result = "";
    for (var i = 0; i < english.length; i++) {
        var des_i = english.length - 1 - i;//倒序排列设值
        result = arr2[i] + result;
        var arr1_index = english[des_i];
        result = arr1[arr1_index] + result;
    }
    console.log(result);
    //将【零千、零百】换成【零】 【十零】换成【十】
    result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十');
    //合并中间多个零为一个零
    result = result.replace(/零+/g, '零');
    //将【零亿】换成【亿】【零万】换成【万】
    result = result.replace(/零亿/g, '亿').replace(/零万/g, '万');
    //将【亿万】换成【亿】
    result = result.replace(/亿万/g, '亿');
    //移除末尾的零
    result = result.replace(/零+$/, '')
    //将【零一十】换成【零十】
    //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
    //将【一十】换成【十】
    result = result.replace(/^一十/g, '十');
    return result;
}
// 换这个，之前那个不对
// 测试函数


console.log(convertToChinaNum(123456));  // 返回 "十二万三千四百五十六"
console.log(convertToChinaNum(100010001));  // 返回 "一亿零一万零一"

Promise相关

手写Promise.all和primise.race

function PromiseAll(params) {
    if (!params || typeof params[Symbol.iterator] !== 'function') {
        return
    }
    let res, rej;
    const p = new Promise((resolve, reject) => {
        res = resolve;
        rej = reject
    })
    // promise.all
    let retPromise = []
    let count = 0
    for (let i = 0, len = params.length; i < len; i++) {
        Promise.resolve(params[i]).then(data => {
            count++
            retPromise[i] = data
            if (len === count) {
                res(retPromise)
            }
        }, rej)
    }
    // // promise.race
    // for (let i = 0, len = params.length; i < len; i++) {
    //     Promise.resolve(params[i]).then(res, rej)
    // }
    return p;
}

PromiseAll([Promise.resolve('1'), 2]).then((req) => {
    console.log(req);
})

Promise.all()或者race版并发请求

let urls = [
    { id: 1, url: 'http://190.92.236.63:3000/', data: {} },
    { id: 2, url: 'www.zyc-a.top', data: {} },
    { id: 3, url: 'http://190.92.236.63:3000/', data: {} },
    { id: 4, url: 'http://190.92.236.63:3000/', data: {} },
    { id: 5, url: 'www.zyc-a.top', data: {} },
    { id: 6, url: 'http://190.92.236.63:3000/', data: {} },
    { id: 7, url: 'http://190.92.236.63:3000/', data: {} },
  ]
  let errData = []
  //自定义请求函数
  const request = (item) => {
    return new Promise(resolve => {
      // 根据自己的网络请求工具返回promise状态，axios，ajax，fetch都可以。
      fetch(item.url)
        .then(response => {
          if (!response.ok) {
            throw new Error("Network response was not ok");
          }
          return response.json();
        })
        .then(data => {
          resolve(data)
        }).catch((err) => {
          errData.push({ ...item, data: err })
          resolve()
        })
    })
  }
  // 执行任务
  async function fn() {
    let pool = []//并发池
    let max = 3 //最大并发量
    for (let i = 0, len = urls.length; i < len; i++) {
      let item = urls[i]
      let task = request(item);
      task.then((data) => {
        //每当并发池跑完一个任务,从并发池删除个任务
        pool.splice(pool.indexOf(task), 1)
      })
      pool.push(task);
      if (pool.length >= max) {
        await Promise.all(pool);
        // await Promise.race(pool);
      }
    }
    return errData;
  }
  fn().then((res) => {
    console.log(JSON.stringify(urls.length - res.length), '个任务成功，错误的任务有：', res);
  })

节省性能

防抖

function fangdou(fn, delay) {
    let timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            fn.apply(this, arguments)
        }, delay)
    }
}
function namea() {
    console.log('触发了');
}
let fang = fangdou(() => namea(), 1000)
fang()

节流

function jieliu(fn, delay) {
    let timer;
    return function () {
        if (!timer) {
            fn.apply(this, arguments)
            timer = setTimeout(() => {
                clearTimeout(timer)
                timer = null
            }, delay)
        }
    }
}
function namea() {
    console.log('触发了');
}
let jie = jieliu(() => namea(), 1000)