前端八股整理（手写 03）｜防抖节流、深拷贝、函数柯里化

文章目录

[前端八股整理（手写 03）｜防抖节流、深拷贝、函数柯里化](#前端八股整理（手写 03）｜防抖节流、深拷贝、函数柯里化)
1.防抖节流
2.深拷贝
3.函数柯里化

前端八股整理（手写 03）｜防抖节流、深拷贝、函数柯里化

1.防抖节流

防抖

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="input">
    </div>
</body>

<script>
    // 防抖核心函数 一个副作用函数,一个延迟时间
    function debounce(fn,delay)
    {
        let timer= null;
        return function(...args)
        {
            clearTimeout(timer);
            timer=setTimeout(fn,delay);
        }
    }
    function printfn()
    {
        console.log("已发送");
    }
    const debounceSend=debounce(printfn,2000);
    const input=document.getElementById('input');
    input.addEventListener('input',debounceSend);
</script>
</html>

节流

设置一个标志 canrun,用 setTimeout 定时清除

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="button">点击</button>
    </div>
</body>

<script>
    // 防抖核心代码
    function throttle(fn,delay)
    {
        let canrun=true;
        return function(...args)
        {
            if(!canrun) return;
            canrun=false;
            fn.apply(this,args);
            setTimeout(()=>{canrun=true},delay)
        }
    }
    function printfn()
    {
        console.log("已发送");
    }
    const throttleSend=throttle(printfn,5000);
    const button=document.getElementById('button');
    button.addEventListener('click',throttleSend);
</script>
</html>

2.深拷贝

javascript 复制代码

const text={
    name:'xiaowang',
    age:18,
    mark:{
        english:100,
        chinese:99
    }
};

// 深拷贝核心函数
function deepclone(obj)
{
    if(typeof obj!=='object'||obj===null) return obj;

    const clone=Array.isArray(obj)?[]:{};

    // 遍历 key
    for(let key in obj)
    {
        clone[key]=deepclone(obj[key]);
    }

    return clone;
}

var deepobj=deepclone(text);
console.log(deepobj);
console.log(deepobj.mark===text.mark);

3.函数柯里化

写法理解
javascript 复制代码
function foo() {
return function(x) {
 console.log(x);
}
}
foo()(3);
相当于:
const fn = foo();
fn(3);
用到了闭包
复制代码
return function (...nextargs) {
return curried(...c, ...nextargs);
};
真正体现闭包的是 curry(add) 执行后返回的内部函数还能记住外层的 fn，以及后续返回的函数还能记住之前的 args。这个内部函数用到了外层函数的变量args

普通函数：

javascript 复制代码

function add(a, b, c) {
  return a + b + c;
}

add(1, 2, 3); // 6

柯里化之后，希望它能这样调：

javascript 复制代码

curriedAdd(1)(2)(3); // 6
curriedAdd(1, 2)(3); // 6
curriedAdd(1)(2, 3); // 6
curriedAdd(1, 2, 3); // 6

本质就是把一次传多个参数,分为多次传参数,最后再执行.

javascript 复制代码

function add(a,b,c)
{
    return a+b+c;
}

function curry(fn)
{
    return function curried(...args)
    {
        if(args.length>=fn.length) return fn(...args);
        else 
        {
            return function(...nextargs)
            {
               return curried(...args,...nextargs);
            }
        }
    }
}

const  addcurry=curry(add);
console.log(addcurry(1,2,3));
console.log(addcurry(1,2)(3));
console.log(addcurry(1)(2)(3));