js工具库(更新中......)_var id=href.substr(href.indexof(“=”)+1,href.length-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42011096/article/details/85069806

本文介绍了前端开发中常用的技巧，包括获取URL参数、节点样式属性、数据类型构造函数验证、防抖与节流函数实现，以及深层对象属性值的获取。通过具体代码示例，深入解析了这些功能的实现原理及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.获取路径中的参数:

function getUrlParams(href) {
    var theRequest = new Object();
    if(!href)
        href = location.href;
    if(href.indexOf("?") !== -1) {
        var params = href.substr(href.indexOf('?')+1)? href.substr(href.indexOf('?')+1).split('&'): [];				
        for(var i = 0; i < strs.length - 1; i++) {						
            var _key = strs[i].substring(0, strs[i].indexOf("="));
            var _val = strs[i].substring(strs[i].indexOf("=") + 1);
            theRequest[key] = decodeURIComponent(val);
        }
    }
    return theRequest;
};

2.获取节点的style属性

function getStyle (node, name) {
    var style = node.currentStyle ? node.currentStyle : win.getComputedStyle(node, null);
    return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
}

3.五种数据类型的构造函数结果为:

// 五种数据类型的构造函数
console.log([].constructor===Array); // true
console.log(''.constructor===String); // true
console.log({}.constructor===Object); // true
console.log(true.constructor===Boolean); // true
console.log(Function.constructor===Function); // true

4.防抖/节流

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <title>Document</title>
    <style>        
        #box {
            width: 1000px;
            height: 500px;
            background: #ccc;
            font-size: 40px;
            text-align: center;
            line-height: 500px;
        }
    </style>
</head>

<body>    
    <div id="box"></div>

    <script>
        const box = document.getElementById('box')
        box.onmousemove = throttle(function (e) {
            box.innerHTML = `${e.clientX}, ${e.clientY}`
        }, 1000)

        // 防抖---当间隔wait时间没有触发的时候就开始执行；
        function debounce (cb, wait) {
            let timeOut;
            return function () {
                clearTimeout(timeOut);
                timeOut = setTimeout(() => {
                    cb.apply(this, arguments);
                }, wait);
            }

        }

        // 节流---一段时间内只执行一次
        function throttle(cb, wait) {
            let flag = true;
            return function () {
                if (!flag) return;
                flag = false;
                setTimeout(() => {
                    cb.apply(this, arguments);
                    flag = true;
                },wait);
            }
        }
        
    </script>
</body>

</html>

5.根据路径字符串获取某个深层次对象某个属性的值

function parsePath(path) {
    var bailRE = /^[\w|.]+$/
    if (!bailRE.test(path)) return;
    const segments = path.split('.');
    return function (obj) {
        if (!obj) return
        for (let i = 0; i < segments.length; i++) {
            obj = obj[segments[i]];
        }
        return obj;
    }
}
var testObj = {
    a: {
        b: {
            c: 45,
            b: {
                d: 7
            }
        },
        r: 9
    }
}
// 获取a.b.c的值
console.log(parsePath('a.b.c')(testObj)) // 45