技术圈首页 程序员 解决方案 聚合短信
APP下载 注册
首页 文章详情

15个web前端自定义函数工具库

web前端开发 | 243 2021-02-19 13:29 0 0 0
UniSMS (合一短信)

来源 | http://www.fly63.com/article/detial/10164



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);

8、数组函数find封装实现

find():找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回undefined

const arr = [1,2,3,2005,4,1001]// find()Array.prototype.find = function(callback){    for(let i = 0;i<this.length;i++){        if(callback(this[i],i)){            return this[i]        }    }    return undefined}let res = arr.find((item=>{    return item > 3000}))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);

11、数组函数some封装实现

some():如果数组中至少有一个元素满足测试函数，则返回true，否则返回false
Array.prototype.some2 = function(callback){    for(let i = 0;i<this.length;i++){        let result = callback(this[i],i)        if(result){            return true        }    }    return false;}const result = arr.some2(item=>{    return item > 6})console.log(result);

12、数组去重

方法1：利用foreach()和indexOf()
方法2：利用froecah() + 对象容器
方法3：利用ES6语法：from + Set 或者 ... + Set
const arr = [1,2,3,4,5,2,4]// 方法1 ：forEach + indexOf function unique(arr){    if(!Array.isArray(arr)){        return    }    let result = []    arr.forEach(item=>{        if(result.indexOf(item) === -1){            result.push(item)        }    })    return result}let result = unique(arr)console.log(result);// 方法2 forEach() + 对象容器function unique2(arr){    let result = []    //声明空对象    const obj = {}    arr.forEach(item => {        if(obj[item] === undefined){            obj[item] = true            result.push(item)        }    })    console.log(obj);    return result
}let result2 = unique2(arr)console.log(result2);//方法3：利用ES6语法：from + Set 或者 ... + Setfunction unique3(arr){    return [...new Set(arr)]    // let result = Array.from(new Set(arr))    // return result}let result3 = unique3(arr)console.log(result2);

13、数组合并和切片

数组合并concat（）
let arr = [1,2,3]Array.prototype.concat2 = function(...args){    let result = [...this,...args]    return result}const result = arr.concat2([4,5,6],7,8)console.log(result);

数组切片slice（）

Array.prototype.slice2 = function(begin,end){    if(this.length === 0){        return [];    }    //判断begin    begin = begin || 0    if(begin >= this.length){        return [];    }    //判断end    end = end || this.length    if(end <begin){        end = this.length    }    let result = []    this.forEach((item,index)=>{        if(index >= begin && index < end){            result.push(item)        }    })    return result}let sliceResult = arr.slice2(1,6)console.log(sliceResult);

14、数组扁平化

语法：flatten(array)
取出嵌套数组（多维）中的所有元素放到一个新数组（一维）中
例如：[ 1,[ 3,[ 2,4 ]]]  -> [1,2,3,4]
方法1：递归 + reduce() + concat()
方法2：,,, + some()  + concat() 
let arr = [1,2,[3,4,[5,6]],7]// 方法1function falttenl(arr){    let result = []    arr.forEach(item => {        if(Array.isArray(item)){            result = result.concat(falttenl(item))        }else{            result = result.concat(item)        }    });    return result}console.log(falttenl(arr));// 方法2function flatten2(arr){    let result = [...arr]    while(result.some(item => Array.isArray(item))){        result = [].concat(...result)    }    return result}console.log(flatten2(arr));
15、数组分块
语法：chunk(array,size)
功能：将数组拆分成多个size长度的区块，每个区块组成小数组，整体组成一个二维数组
如：[1,2,3,4,5,6]调用chunk(arr,4) ===> [[1,2,3,4],[5,6]]

本文完〜


                




           
            


            

                            


            

  

    
    

      good-icon
      0
    

    
    赞
  

  

    
    

      favorite-icon
      0
    

    
    收藏
  







  


   
    
    
  

  






        



        

        
        

            

                
回复数量: 0

            


            


                                    
    
                    
    暂无评论~~
    
                                            
                    
    
                        
                    
    
            
    
        
    

        
        
    

            
            
    
                
                

                

                
    
                                            
                                    
    

                
    
                    
                    Ctrl+Enter
                
    

                

            
    
        
    

    
    
    
    


    
    
            
    
            
    
                
    
                    web前端开发
                    
    
                
    
                
    
                    web前端开发
                
    
                
    
                                                        
    
                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                
                
    
                    
    
                        
    1440
    
                        
    文章
    
                    
    
                    
    
                        
    2
    
                        
    获赞
    
                    
    
                
    
                
                
                
            
    
        
    
    
    
    
        
            UniSMS (合一短信)
        
        NEW
    
    

                                
    
                
    
                                        
    相关文章推荐
    
                
    
                
    
                    
                
    
            
    
                            
    
            
    
                
    
                    
    
                                                    
    
                                
                                    plat-ensure-img