建议收藏这10个WEB前端自定义函数工具库

1、call函数封装实现 // 手写call函数function call(Fn,obj,...arg){ // 如果obj为null或者undefined，则指向window if(obj === undefined || obj === null){ // globalThi...

1、call函数封装实现

// 手写call函数function call(Fn,obj,...arg){    // 如果obj为null或者undefined，则指向window    if(obj === undefined || obj === null){        // globalThis是ES11的新特性，指向全局        obj = globalThis    }    //为obj添加临时方法    obj.temp = Fn    // 调用 temp 方法    let result = obj.temp(...arg)    // 删除obj 的 temp     delete obj.temp    return result}
function add(a,b){    console.log(this);    return a + b + this.c}let obj = {    c:521}globalThis.c = 1314console.log(call(add,obj,10,20)); //551console.log(call(add,null,10,20)); //1344

// 手写call函数Function.prototype.call = function(obj,...arg){    // 如果obj为null或者undefined，则指向window    if(obj === undefined || obj === null){        // globalThis是ES11的新特性，指向全局        obj = globalThis    }    //为obj添加临时方法    obj.temp = this    // 调用 temp 方法    let result = obj.temp(...arg)    // 删除obj 的 temp     delete obj.temp    return result}function add(a,b){    console.log(this);    return a + b + this.c}let obj = {    c:521}globalThis.c = 1314console.log(add.call(obj,10,20)); //551console.log(add.call(null,10,20)); //1344

2、apply函数封装实现

// 手写apply函数Function.prototype.apply = function(obj,arg){    if(obj === null || obj === undefined){        obj = globalThis    }    obj.temp = this    let result = obj.temp(...arg)    delete obj.temp    return result}function add(a,b){    console.log(a+b+this.c);}let obj = {    c:1314}globalThis.c = 520add.apply(obj,[10,20]) //1344add.apply(null,[10,20]) //550

3、bind函数封装实现（bind不会立刻执行）

function bind(Fn,obj,...args){    if(obj === null || obj === undefined){        obj = globalThis    }    //bind返回一个函数，调用的时候执行方法    return function(...args2){        // 调用call方法        obj.temp = Fn        let result = obj.temp(...args,...args2)        delete obj.temp        return result    }}function add(a,b){    console.log(arguments);    console.log(a+b+this.c);}let obj = {    c:1314}globalThis.c = 520bind(add,obj,10,20)() //1344bind(add,null,10,20)(30,40) //550

4、函数节流

throttle节流语法：throttle(callback,wait)功能：创建一个节流函数，在wait毫秒内最多执行callback一次理解：在函数需要频繁触发时：函数执行一次后，只有大于设定的执行周期后才会执行第二次，适合多次事件按时间做平均分配触发场景：窗口调整（resize）、页面滚动（scroll）、DOM元素的拖拽功能实现（mousemove）、抢购疯狂点击（click）

<script>        window.addEventListener(‘scroll‘,throttle(function(){            console.log(Date.now());        },500))        function throttle(callback,wait){            // 定义开始时间            let start = 0            // 返回结果是一个函数            return function(e){                let now = Date.now()                if(now - start > wait){                    callback.call(this,e)                    start = now                }            }        }</script>

5、函数防抖

语法：debounce(callback,wait)功能：创建一个防抖动函数，该函数会从上一次被调用后，延迟wait毫秒后调用callback理解：触发了一次函数会在延迟wait毫秒后调用callback，但再次点击，会清空掉再次计算场景：input框输入时

<body>    <input type="text">    <script>        let input = document.querySelector(‘input‘)        // input.onkeydown = function(e){        //     console.log(e.keyCode);        // }        input.onkeydown = debounce(function(e){            console.log(e.keyCode);        },1000)        function debounce(callback,time){            //定时器变量            let timeId = null            // 返回值一定是个函数，否则无法触发回调            return function(e){                //timeId !== null 证明已经有一个timeif在跑，先清除掉再继续跑                if(timeId !== null){                    clearTimeout(timeId)                }                //启动定时器                timeId = setTimeout(()=>{                    callback.call(this,e)                    // 重置定时器变量                    timeId = null                },time)
            }        }</script></body>

6、数组函数map封装实现

map（）方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const arr = [1,2,3,4,5]Array.prototype.map = function (callback) {    let result = []    for(let i = 0;i<this.length;i++){        result.push(callback(this[i],i))    }    return result}let arr2 = arr.map((item,index) => {    return item *10})console.log(arr2);

7、数组函数reduce封装实现

reduce():从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

const arr = [1,2,3,4,5]// 示例let result = arr.reduce((res,value)=>{    return res + value},0) //0为res初始值,value为arr的值console.log(result); //15
Array.prototype.reduce = function(callback,value){    let result = value    for(let i = 0;i<this.length;i++){        result = callback(result,this[i])    }    return result}//  演示let arr2 = arr.reduce((res,value)=>{    return res + value},5)console.log(arr2);

8、数组函数filter封装实现filter()：将所有在过滤函数中返回true的数组元素放进一个新数组中并且返回

const arr = [1,2,3,4,5]Array.prototype.filter2 = function(callback){    let arr = []    for(let i = 0;i<this.length;i++){        if(callback(this[i],i)){            arr.push(this[i])        }    }    return arr}let res = arr.filter2((item=>{    return item > 2}))console.log(res);

9、数组函数findIndex封装实现

findIndex():找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回-1。

// findIndex()Array.prototype.findIndex2 = function(callback){    for(let i = 0;i<this.length;i++){        if(callback(this[i],i)){            return i        }    }    return -1}let res = arr.findIndex2((item=>{    return item > 1000}))console.log(res);

10、数组函数every封装实现

every():如果数组中的每个元素都满足测试函数，则返回true，否则返回false。

const arr = [1,2,3,4,5]Array.prototype.every2 = function(callback){    for(let i = 0;i<this.length;i++){        let result = callback(this[i],i)        if(!result){            return false;        }    }    return true}const result = arr.every2(item=>{    return item > 0})console.log(result);