前端常见的方法及概念手写原理

最新推荐文章于 2022-08-09 15:52:33 发布

前端入坑小何

最新推荐文章于 2022-08-09 15:52:33 发布

阅读量470

点赞数 3

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_47926886/article/details/125125801

版权

本文主要介绍了前端面试中常见的技术点，包括防抖、节流、深拷贝、类型判断、随机数生成、indexOf实现、冒泡排序、查找数组最大值和最小值、数组去重、instanceOf手写以及大小写转换等核心方法的原理与手写实践。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：如有错误，还望指出，谢谢：

提示：以下是本篇文章正文内容，下面案例仅供参考

一、常见的前端面试题尝试手写代码

1. 防抖

JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    防抖： <input id="input" type="text">
</body>
<script>
    // 监听拿到input输入的值
    input.addEventListener('input', function (e) {
   
        val(e.target.value)
    })
    // 防抖的核心代码
    function fn(time, fun) {
   
        let flag // 定义状态
        return function (value) {
   
            clearTimeout(flag)// 在执行之前 清除 定时器的 flag 不让他执行
            flag = setTimeout(() => {
   
                fun(value)
            }, time)
        }
    }
    let val = fn(1000, function (val) {
   
        console.log(val)
    })
</script>
</html>

2. 节流

<body>
    <button id="button">手在快1秒执行一次</button>
</body>
<script>
    /*
        定时器版本的
          fns 回调函数
          time 间隔时间
        function throttle(fns, time) {
        let flag // 定义一个空状态
        return function () { // 内部函数访问外部函数形成闭包
            if (!flag) { // 状态为空执行
                flag = setTimeout(() => {
                    fns.apply(this, arguments) // 改变this指向 吧 event 事件对象传出去
                    flag = null
                }, time)
            }
        }
       }
    */

    function throttle(fun, time) {
   
        let flag = 0
        return function () {
   
            let now = +new Date().valueOf()
            // 当前的值 减去上一次的值 >= 传过来的事件 执行
            if (now - flag >= time) {
   
                fun.apply(this, arguments)
                flag = now
            }
        }
    }



    button.onclick = throttle((e) => {
   
        console.