15個(gè)web前端自定義函數(shù)工具庫

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

1、call函數(shù)封裝實(shí)現(xiàn)

// 手寫call函數(shù)function call(Fn,obj,...arg){    // 如果obj為null或者undefined，則指向window    if(obj === undefined || obj === null){        // globalThis是ES11的新特性，指向全局        obj = globalThis    }    //為obj添加臨時(shí)方法    obj.temp = Fn    // 調(diào)用 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函數(shù)Function.prototype.call = function(obj,...arg){    // 如果obj為null或者undefined，則指向window    if(obj === undefined || obj === null){        // globalThis是ES11的新特性，指向全局        obj = globalThis    }    //為obj添加臨時(shí)方法    obj.temp = this    // 調(diào)用 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函數(shù)封裝實(shí)現(xiàn)

// 手寫apply函數(shù)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函數(shù)封裝實(shí)現(xiàn)（bind不會(huì)立刻執(zhí)行）

function bind(Fn,obj,...args){    if(obj === null || obj === undefined){        obj = globalThis    }    //bind返回一個(gè)函數(shù)，調(diào)用的時(shí)候執(zhí)行方法    return function(...args2){        // 調(diào)用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、函數(shù)節(jié)流

?5、函數(shù)防抖

6、數(shù)組函數(shù)map封裝實(shí)現(xiàn)

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

7、數(shù)組函數(shù)reduce封裝實(shí)現(xiàn)

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        result = callback(result,this[i])    }    return result}//  演示let arr2 = arr.reduce((res,value)=>{    return res + value},5)console.log(arr2);

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

8、數(shù)組函數(shù)find封裝實(shí)現(xiàn)

find():找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的值，如果找不到，則返回undefined

const arr = [1,2,3,2005,4,1001]// find()Array.prototype.find = function(callback){    for(let i = 0;i        if(callback(this[i],i)){            return this[i]        }    }    return undefined}let res = arr.find((item=>{    return item > 3000}))console.log(res);

9、數(shù)組函數(shù)findIndex封裝實(shí)現(xiàn)

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

10、數(shù)組函數(shù)every封裝實(shí)現(xiàn)

const arr = [1,2,3,4,5]Array.prototype.every2 = function(callback){    for(let i = 0;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、數(shù)組函數(shù)some封裝實(shí)現(xiàn)

Array.prototype.some2 = function(callback){    for(let i = 0;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、數(shù)組去重

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() + 對(duì)象容器function unique2(arr){    let result = []    //聲明空對(duì)象    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、數(shù)組合并和切片

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

數(shù)組切片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         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、數(shù)組扁平化

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、數(shù)組分塊