js相关总结

75 阅读2分钟

数组相关

精度丢失

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

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 = []
//自定义请求函数
var 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; i < urls.length; 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)