網(wǎng)站首頁編程語言正文

函數(shù)的防抖和節(jié)流&&深淺克隆

作者：前端賈公子更新時間： 2022-01-14 編程語言

柯里化函數(shù):

編程思想,函數(shù)執(zhí)行,產(chǎn)生一個閉包,(不被釋放的上下文)把一些信息"預(yù)先存儲起來",目的是提供下級上下文中調(diào)使用,這樣的預(yù)先存儲思想,就叫做柯理化函數(shù)編程思想

作用域 vs上下文:

都是函數(shù)執(zhí)行,在棧內(nèi)存中所分配出來的空間
創(chuàng)建函數(shù)的時候,在那個上下文中創(chuàng)建的,那么其作用域就是誰(作用域不是函數(shù)自己執(zhí)行產(chǎn)生的這個空間,而是創(chuàng)建函數(shù)所在的這個空間)
而上下文是函數(shù)自己執(zhí)行產(chǎn)生的==>函數(shù)執(zhí)行產(chǎn)生的私有上下文,它的上級上下文是它的作用域

應(yīng)用場景

    const fn = function fn(...params) {
        // params[1,2]
        return function proxy(...args) {
            // args[3]
            return params.concat(args).reduce((x, item) => x + item)
        }
    }
    let res = fn(1, 2)(3)//fn(1,2)-->proxy(3)
    console.log(res);

?了解:新版瀏覽器無法實現(xiàn)

add一直持續(xù)執(zhí)行,執(zhí)行幾次是不確定的,我們最后需要把每一次執(zhí)行的值累加求和?

在瀏覽器沒有生級之前console.log(函數(shù))會把函數(shù)轉(zhuǎn)換為字符串輸出

函數(shù)(Symbol.toPrimitive)-->函數(shù).valueof()--->函數(shù).tostring,但凡其中有一項返回了對象的值則控制臺以返回輸出為主,但是升級之后,轉(zhuǎn)換為字符串的操作還會觸發(fā),但是控制臺最后呈現(xiàn)的還是函數(shù)

   const curring = function curring() {
        let params = [];
        const add = (...args) => {
            params = params.concat(args);
            return add;
        };
        add[Symbol.toPrimitive] = () => params.reduce((result, item) => result + item);
        return add;
    };
    let add = curring();
    let res = add(1)(2)(3);
    console.log(res); //->6

    add = curring();
    res = add(1, 2, 3)(4);
    console.log(res); //->10

    add = curring();
    res = add(1)(2)(3)(4)(5);
    console.log(res); //->15

函數(shù)式編程vs命令式編程

函數(shù)式編程:WHAT? 把具體執(zhí)行的步驟封裝到一個函數(shù)中,后期需要處理的時候,只要把函數(shù)執(zhí)行即可,我們不在關(guān)注執(zhí)行的步驟,只關(guān)注后期處理結(jié)果

優(yōu)點:低耦合好內(nèi)聚,快捷化開發(fā),方便維護
缺點:不能靈活掌握程序處理步驟,無法在某一個步驟做些特殊處理

命令式編程:HOW 更關(guān)注處理步驟,需要自己去實現(xiàn)每一步的操作

優(yōu)點:靈活想怎么處理就怎么處理
缺點:代碼冗余度高,開發(fā)效率慢

真實項目中推薦使用函數(shù)式編程

栗子

    // forEach就是函數(shù)式編程,函數(shù)內(nèi)部實現(xiàn)了對數(shù)組迭代的封裝,每一次迭代都把回調(diào)函數(shù)執(zhí)行,并且把當前迭代這一項及索引傳遞過來
    let arr = [10, 20, 30]
    arr.forEach((item, index) => {
        console.log(item, index);
    });
    // 命令式編程
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i], i);
    }
//封裝forEach
    Array.prototype.forEach = function (callback) {
        //this--->要操作的數(shù)組
        let self = this;
        for (let i = 0; i < self.length; i++) {
            callback(self[i], i)
        }
    }

面試題:foreach和for循環(huán)的區(qū)別

forEach是數(shù)組內(nèi)置的方法,內(nèi)部對數(shù)組迭代進行了封裝,直接使用就可以函數(shù)式編程,不支持以任何形式中斷它的迭代;forEach內(nèi)部依次迭代每一項,每一次迭代把傳遞的回調(diào)函數(shù)執(zhí)行,把迭代的內(nèi)容及其索引傳遞給回調(diào)函數(shù)..直到這個數(shù)字迭代完畢

for循環(huán)是命令式編程,需要我們自己手動實現(xiàn)數(shù)組迭代,可以中斷,可以設(shè)置間隔幾個迭代

在項目開發(fā)的時候一般應(yīng)用的是forEach,這樣可以提高我的開發(fā)效率,減少代碼冗余,但是遇到一些靈活的代碼需求,則自己基于for循環(huán)操作

?組合函數(shù)

  /* 
        在函數(shù)式編程當中有一個很重要的概念就是函數(shù)組合， 實際上就是把處理數(shù)據(jù)的函數(shù)像管道一樣連接起來， 然后讓數(shù)據(jù)穿過管道得到最終的結(jié)果。 例如：
        const add1 = (x) => x + 1;
        const mul3 = (x) => x * 3;
        const div2 = (x) => x / 2;
        div2(mul3(add1(add1(0)))); //=>3
    ?
        而這樣的寫法可讀性明顯太差了，我們可以構(gòu)建一個compose函數(shù)，它接受任意多個函數(shù)作為參數(shù)（這些函數(shù)都只接受一個參數(shù)），然后compose返回的也是一個函數(shù)，達到以下的效果：
        const operate = compose(div2, mul3, add1, add1)
        operate(0) //=>相當于div2(mul3(add1(add1(0)))) 
        operate(2) //=>相當于div2(mul3(add1(add1(2))))
    ?
        簡而言之：compose可以把類似于f(g(h(x)))這種寫法簡化成compose(f, g, h)(x)，請你完成 compose函數(shù)的編寫 
    */
    const add1 = x => x + 1;
    const mul3 = x => x * 3;
    const div2 = x => x / 2;
    const compose = function compose(...funcs) {
        //funcs:數(shù)組,一次存儲要執(zhí)行的函數(shù),而且從右到左的順序執(zhí)行
        return function operate(x) {
            let len = funcs.length
            // x 函數(shù)執(zhí)行的初始值
            if (len === 0) return x;//如果不傳初始值是啥返回啥
            if (len === 1) return funs(0)(x)
            return funcs.reduceRight((x, item) => {
                return item(x)
            }, x)
        }
    };
    const operate = compose(div2, mul3, add1, add1)
    console.log(operate(0));//=>  3  相當于div2(mul3(add1(add1(0)))) 
    console.log(operate(2));//=>6

?惰性函數(shù):懶執(zhí)行一次可以搞定,決對不會執(zhí)行第二次

獲取元素樣式:

getComputedStyle() 方法用于獲取指定元素的 CSS 樣式。
currentStyle ie678
獲取的樣式是元素在瀏覽器中最終渲染效果的樣式。

封裝兼容獲取樣式方法

瑕疵:瀏覽器沒換,頁面沒關(guān),第一次處理需要判斷兼容性是必須的,但是第二次即以后執(zhí)行,如果還是要判斷兼容性是沒必要的

    var getCss = function (elem, attr) {
        if (window.getComputedStyle) {
            getCss = function (elem, attr) {
                return window.getComputedStyle(elem)[attr];
            }
        } else {
            getCss = function (elem, attr) {
                return elem.currentStyle[attr]
            };
        }
        return getCss(elem, attr)

    }

    console.log(getCss(document.body, "margin"));
    console.log(getCss(document.body, "padding"));