前端面试知识点整理——常见手撕代码

最新推荐文章于 2024-04-23 16:02:19 发布
最新推荐文章于 2024-04-23 16:02:19 发布
阅读量2k 收藏 43
点赞数
分类专栏： 前端面试 文章标签： javascript 前端 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43819274/article/details/115401244
版权

前端面试知识点整理——常见手撕代码

文章目录

一、排序

1.冒泡排序
function bubbleSort(nums) {
    //每轮循环都从最后一个元素开始 比较并交换 一次循环会把最小的数顶到最上面
    for (let i = 0; i < nums.length - 1; i++) { //只是控制次数为n-1
        for (let j = nums.length - 1; j > i; j--) {
            if (nums[j] < nums[j - 1]) {
                //交换
                let temp = nums[j];
                nums[j] = nums[j - 1];
                nums[j - 1] = temp;
            }
        }
    }
}

//test
nums = [5, 1, 4, 2, 8];
bubbleSort(nums);
console.log(nums);
2.选择排序
function selectionSort(nums) {
    //和冒泡排序类似，但是并不在每次比较后交换 而是记录最小值(初识最小值为nums[i]) 最后再交换一次 
    //每次循环也是从最后开始 把最小元素放到最顶部
    for (let i = 0; i < nums.length - 1; i++) { //n -1循环
        let index = i;
        for (let j = nums.length - 1; j > i; j--) {
            if (nums[j] < nums[index]) {
                index = j;
            }
        }
        //交换
        let temp = nums[i];
        nums[i] = nums[index];
        nums[index] = temp;
    }
}

//test
nums = [5, 1, 4, 2, 8];
selectionSort(nums);
console.log(nums);
3.插入排序
function insertionSort(nums) {
    //插入排序 从第二个元素开始 把元素插入到合适的位置 每次比较（除了最后一次）都要交换
    for (let i = 1; i < nums.length; i++) {
        for (let j = i; j > 0; j--) {
            if (nums[j] < nums[j - 1]) {
                //交换
                let temp = nums[j];
                nums[j] = nums[j - 1];
                nums[j - 1] = temp;
            } else {
                break;
            }
        }
    }
}

//test
nums = [5, 1, 4, 2, 8];
insertionSort(nums);
console.log(nums);
4.快速排序
//快速排序最差O（n^2）最优O（nlogn）
function qsort(nums, l, r) {
    if (r <= l) return; //注意定义递归中止条件
    let pivot = nums[l]; //选择最左为轴值
    swap(nums, l, r); //把轴值与最右交换

    let i = l;
    for (let j = l; j < r; j++) {
        if (nums[j] < pivot) {
            swap(nums, i, j);
            i++;
        }
    }
    swap(nums, i, r); //此时i为轴值下标
    qsort(nums, l, i - 1);
    qsort(nums, i + 1, r);
}
function swap(nums, i, j) {
    let temp = nums[i];
    nums[i] = nums[j];
    nums[j] = temp;
}

//test
nums = [5, 1, 4, 2, 8, 11, 2, 3];
qsort(nums, 0, nums.length - 1);
console.log(nums);
5.推排序
//堆排序 建堆O（n） 删除n个O（nlogn）
function heapSort(nums) {
    if (nums.length <= 1) return nums;
    let res = [];
    let heapSize = nums.length;
    buildHeap(nums, heapSize);
    for (let i = 0; i < nums.length; i++) {
        res.push(nums[0]);
        swap(nums, 0, --heapSize);
        siftDown(nums, 0, heapSize);
    }
    return res;
}
//建堆 (最小堆)
function buildHeap(nums, heapSize) {
    for (let i = Math.floor(heapSize / 2) - 1; i >= 0; i--) {
        siftDown(nums, i, heapSize);
    }
}
//siftDown 
function siftDown(nums, i, heapSize) {
    let smallest = i;
    let l = 2 * i + 1;
    let r = 2 * i + 2;
    if (l < heapSize && nums[l] < nums[smallest]) {
        smallest = l;
    }
    if (r < heapSize && nums[r] < nums[smallest]) {
        smallest = r;
    }
    if (smallest != i) {
        swap(nums, i, smallest);
        siftDown(nums, smallest, heapSize);
    }
}
function swap(nums, i, j) {
    let temp = nums[i];
    nums[i] = nums[j];
    nums[j] = temp;
}

//test
nums = [5, 1, 4, 2, 8, 11, 2, 3];
let res = heapSort(nums);
console.log(res);
6.归并排序
function mergeSort(nums) {
    if (nums.length <= 1) return nums;
    let middle = Math.floor(nums.length / 2);
    let arr1 = nums.slice(0, middle);
    let arr2 = nums.slice(middle);
    return merge(mergeSort(arr1), mergeSort(arr2));
}
function merge(arr1, arr2) {
    let res = [];
    while (arr1.length > 0 && arr2.length > 0) {
        if (arr1[0] <= arr2[0]) {
            res.push(arr1.shift());
        } else {
            res.push(arr2.shift());
        }
    }
    return res.concat(arr1).concat(arr2);
}
//test
nums = [5, 1, 4, 2, 8, 11, 2, 3];
let res = mergeSort(nums);
console.log(res);

二、防抖和节流

1.防抖
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input');
        function debounce(fn, delay) {
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn();
                }, delay)
            }
        }
        input.onkeyup = debounce(() => {
            console.log(input.value);
        }, 3000)
    </script>
</body>

</html>
2.节流
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input');
        function throttle(fn, delay) {
            let timer = null;
            return function () {
                if (timer) {
                    return;
                }
                timer = setTimeout(() => {
                    fn();
                    timer = null;
                }, delay)
            }
        }
        input.onkeyup = throttle(() => {
            console.log(input.value);
        }, 3000)
    </script>
</body>

</html>

三、函数柯里化

function sum(...args) {
    //对第一层参数求和
    let x = args.reduce((acc, next) => {
        return acc + next;
    })
    //返回一个新的函数 
    return function (...args2) { //第二层的参数
        //当没有第二层参数时，返回x即可
        if (args2.length == 0) return x;
        let y = args2.reduce((acc, next) => {
            return acc + next;
        })
        return sum(x + y); //返回x+y作为新的第一层
    }
}

console.log(sum(1, 2)(3)(4)()); // 10
console.log(sum(1)(2, 3, 4, 5)(10)()); // 25

//自己写一个减法的 天才！
function decrease(...args) {
    let x = args.reduce((acc, next) => {
        return acc - next;
    })
    console.log(x);
    return function (...args2) {
        if (args2.length == 0) return x;
        let y = args2.reduce((acc, next) => {
            return acc - next;
        }, 0)
        console.log(y);
        return decrease(x + y);
    }
}
console.log(decrease(1, 2)(3)(4, 5)()); // -13
console.log(decrease(1)(2, 3, 4, 5)(10)()); // -23

四、清除前后空格

String.prototype.trim = function () {
    return this.replace(/^\s+/g, "").replace(/\s+$/g, "");
}
let str = '   123   ';
console.log(str);
let str1 = str.trim();
console.log(str1);

五、数组拍平

function flatten(arr) {
    let res = [];
    for (let i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            res = res.concat(flatten(arr[i]));
        } else {
            res.push(arr[i]);
        }
    }
    return res;
}

let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]], 10];
console.log(flatten(arr));

六、图片懒加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            display: block;
            width: 100%;
            height: 300px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
    <img data-src="mao.jpg" alt="">
</body>
<script>
    var imgs = document.querySelectorAll('img');

    //获得元素距离页面顶部的距离
    function getTop(e) {
        var T = e.offsetTop;
        while (e = e.offsetParent) {
            T += e.offsetTop;
        }
        return T;
    }

    function lazyLoad(imgs) {
        //获取可视区高度
        var H = window.innerHeight || document.documentElement.clientHeight;
        //获取被卷页面高度
        var S = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        for (let i = 0; i < imgs.length; i++) {
            if (H + S > getTop(imgs[i])) {
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }

    window.onload = window.onscroll = function () {
        lazyLoad(imgs);
    }
</script>

</html>

七、深拷贝

function deepClone(obj) {
    var clone;
    if (obj && typeof obj !== 'object') clone = obj;
    else {
        clone = Array.isArray(obj) ? [] : {};
        for (let k in obj) {
            if (obj.hasOwnProperty(k)) {
                if (obj[k] && typeof obj[k] === 'object') {
                    clone[k] = deepClone(obj[k]);
                } else {
                    clone[k] = obj[k];
                }
            }
        }
    }
    return clone;
}

//test
let obj = {
    name: 'vivian',
    age: 18,
    mark: {
        one: 1,
        two: 2
    },
    arr: [1, 2, 3]
}

let clone = deepClone(obj);
console.log(clone);

八、bind、apply、call

1.bind
//bind改变this指向，不调用函数
Function.prototype.mybind = function (context, ...arg) {
    let fun = this;
    return function () {
        return fun.apply(context, arg)
    }
}

//test
let obj = {
    name: 'vivian'
}
function test(arg1, arg2, arg3) {
    console.log(this.name);
    console.log(arg1, arg2, arg3);
}
let f = test.bind(obj, 1, 2, 3); //返回一个函数
f();
2.apply
//apply改变this指向 调用函数 参数为数组
Function.prototype.myApply = function (context, arg) {
    context.fn = this;
    let res;
    if (!arg) {
        res = context.fn();
    } else {
        res = context.fn(...arg);
    }
    delete context.fn;
    return res;
}

//test
let obj = {
    name: 'vivian'
}
function test(arg1, arg2, arg3) {
    console.log(this.name);
    console.log(arg1, arg2, arg3);
}
test.myApply(obj, [1, 2, 3]);
3.call
//call改变this指向 调用函数
Function.prototype.mycall = function (context, ...arg) {
    context.fn = this; //this是test函数，把他作为context的方法而存在
    let res = context.fn(...arg);
    delete context.fn;
    return res;
}
//test
let obj = {
    name: 'vivian'
}
function test(arg1, arg2, arg3) {
    console.log(this.name);
    console.log(arg1, arg2, arg3);
}
test.mycall(obj, 1, 2, 3);

九、发布-订阅模式

class EventEmitter {
    constructor() {
        //缓存列表
        this.list = {};
    }
    //on：把callback函数注册到缓存列表中
    on(eventName, callback) {
        if (!this.list[eventName]) {
            //当还没有这个事件时，为这个事件添加一个缓存列表
            this.list[eventName] = [callback];
        } else {
            //当已经存在这个事件的缓存列表之后，直接添加
            this.list[eventName].push(callback);
        }
    }
    //emit：根据event去执行对应缓存列表里面的函数
    emit(eventName, ...args) {
        this.list[eventName].forEach(fn => fn.apply(this, args));
    }
    //once：只监听一次
    once(eventName, callback) {
        const fn = () => {
            callback();
            this.remove(eventName, fn);
        }
        this.on(eventName, fn);
    }
    //remove：取消订阅
    remove(eventName, callback) {
        this.list[eventName] = this.list[eventName].filter(fn => fn != callback);
    }
}

十、promise

const PEDDING = Symbol();
const FULFILLED = Symbol();
const REJECTED = Symbol();

const myPromise = function (fn) {
    this.status = PEDDING;
    this.value = '';

    const resolve = (value) => {
        this.status = FULFILLED;
        this.value = value;
    }
    const reject = (error) => {
        this.status = REJECTED;
        this.value = error;
    }

    this.then = (onFulfilled, onRejected) => {
        if (this.status == FULFILLED) {
            onFulfilled(this.value);
        }
        if (this.status == REJECTED) {
            onRejected(this.value);
        }
    }

    try {
        fn(resolve, reject);
    } catch (error) {
        reject(error);
    }
}



//test 
let p = new myPromise((resolve, reject) => {
    resolve(123);
})
p.then(value => {
    console.log(value);
})
let p2 = new Promise((resolve, reject) => {
    resolve(456);
})
p2.then(value => {
    console.log(value);
})

十一、promise.all

function isPromise(obj) {
    return !!obj && (typeof obj === 'function' || typeof obj === 'object') && typeof obj.then == 'function';
}

function myPromiseAll(arr) {
    let res = []
    return new Promise((resolve, reject) => {
        for (let i = 0; i < arr.length; i++) {
            if (isPromise(arr[i])) {
                arr[i].then(data => {
                    res[i] = data;
                    if (res.length === arr.length) {
                        resolve(res)
                    }
                }).catch(error => {
                    reject(error)
                })
            } else {
                res[i] = arr[i];
            }
        }
    })
}

//test
var p1 = Promise.resolve('a');
var p2 = Promise.resolve('b');
var p3 = Promise.resolve('c');
Promise.all([p1, p2, p3]).then(function (value) {
    console.log(value);
})
const ptest = myPromiseAll([p1, p2, p3]);
ptest.then(value => {
    console.log(value);
})

十二、promise.race

function myPromiseRace(arr) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < arr.length; i++) {
            return arr[i].then(resolve, reject);
        }
    })
}

//test 
const p1 = Promise.reject('a');
const p2 = Promise.resolve('b');
const p3 = Promise.resolve('c');

Promise.race([p1, p2, p3]).then(value => {
    console.log(value);
}).catch(error => {
    console.log(error);
})

myPromiseRace([p1, p2, p3]).then(value => {
    console.log(value);
}).catch(error => {
    console.log(error);
})

十三、jsonp

let newscript = document.createElement('script');
newscript.src = 'https://www.abc.com?callback=fn';;
document.body.appendChild(newscript);
function fn(data) {
    console.log(data);
}

十四、new原理实现

function _new() {
    //1. 创建一个新对象
    let obj = new Object();
    //2. 让this指向这个对象
    let [func, ...arg] = [...arguments];
    obj.__proto__ = func.prototype;
    //3. 执行构造函数里面的代码
    let res = func.apply(obj, arg);
    //4. 返回这个对象
    if (res && (typeof res === 'object') || (typeof res === 'Function')) {
        return res;
    } else {
        return obj;
    }
}

function Person(uname, age) {
    this.uname = uname;
    this.age = age;
}

let obj1 = new Person('vivian', 18);
let obj2 = _new(Person, 'vivian', 18);
console.log(obj1, obj2);

十五、instanceof原理实现

function instance_of(left, right) {
    let prototype = right.prototype;
    left = left.__proto__;
    while (true) {
        if (!left) return false;
        if (left == prototype) return true;
        left = left.__proto__;
    }
}
console.log([] instanceof Array);
console.log(instance_of([], Array));

十六、setTimeout实现setInterval

function myInterval(fn, delay) {
    let content = this;
    setTimeout(() => {
        fn.call(content);
        myInterval(fn, delay); //递归
    }, delay);
}

myInterval(() => {
    console.log(1);
}, 2000)
Vivian小姐
关注
  • 0
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常见面试手撕代码题
YP_ADMIN的博客
08-11 1978
面试常见手撕代码题
前端面试那些你必须手撕的代码
qq_42638586的博客
04-21 1333
前端不得不手撕的代码
前端面试刷题必备（手撕代码篇）
最新发布
陈梵的博客
04-23 667
首先进行分析，call 的调用方式是 fn.call(thisArg, arg1, arg2, …
Python 华为面试手撕代码 + 八股文，机器学习参数调节，损失函数，激活函数，线程、进程和协程
L_goodboy的博客
05-30 4708
Python 华为面试手撕代码 + 八股文，机器学习参数调节，损失函数，激活函数，线程、进程和协程
常见手撕代码题汇总！
磊哥聊Java
06-25 1441
面试就看 www.javacn.site 内容贼全随着 Java 技术的发展，以及从业人员专业知识的不断提升，面试的难度也水涨船高越来越难了，所以八股也要与时俱进不断更新，这就是本篇文章诞生的目的之一。我凭借自身的面试和被面试的经验，以及人工查阅并整理了牛某今年最新的 200 篇面经，总结了这篇文章，所以希望大家不要吝啬手中免费的赞，给作者点一波赞，谢谢了。整理的部分面经展示：一、最常见手撕代码题...
前端常见的手撕代码
qq_42584734的博客
03-23 1320
1、打印99乘法表，且实现垂直居中（即等腰三角形） <body> <div> 九九乘法表 </div> <script> function out(n){ for(let i=1; i<=n; i++){ document.write("<div>"); for(let j=1; j<=i; j++){ docu
前端面试知识点总结——可自行免费下载
08-01
冲，再向前冲，为了心中所有的梦
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
前端面试知识点目录一览
10-17
本文是小编给大家搜集整理的有关前端面试知识点，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Web前端面试的常见知识点.pdf
05-11
包括http缓存 vue react 项目优化 uni-app 验证码 项目流程等等
前端面试知识点锦集（JavaScript篇）
10-20
主要为大家分享了前端面试知识点锦集JavaScript篇，细致的给出了每个js面试知识点的答案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
面试手撕代码整理
09-29
自己整理的在面试时可能出现的手撕代码题目，例如求一个数的平方根，反转链表，辗转相除法求最大公约数等，希望能提供一些帮助
前端手撕代码
weixin_47227886的博客
06-14 210
目录1.数组去重1.1 indexOf1.2 ES6 Set2.快速排序2.1 冒泡排序2.2 sort3. 防抖和节流4.浅拷贝和深拷贝 1.2 ES6 Set 2. 快速排序 2.1 冒泡排序 2.2 sort 升序x-y 降序y-x 3. 防抖和节流 4. 浅拷贝和深拷贝 5. 事件委托 6. instanceof instanceof：左边是对象，右边是类； 7. call、apply、bind 他们每个都有自己的特
12道面试官爱考的手撕代码题，你会了吗？
weixin_42247274的博客
10-12 1069
1.防抖与节流 防抖（debounce）：当持续触发事件时，一定时间内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。 //举个栗子 function debounce（fn,wait）{ var timeout = null; return function(){ if(timeout ! == null) clearTimeout(timeout); timeout = setTimeout(fn,wait); } } //处理函
【华为面试手撕代码】
m0_67227632的博客
04-08 1万+
文章目录常用的排序算法1.冒泡排序2.选择排序3.插入排序4.快排排序5.归并排序6.堆排序Java 的sort基于什么实现排序算法原理，何为稳定不稳定，快排是否稳定查找二分查找复盘笔试题3.寻找重复的子树树的遍历方式树的遍历方式（先序、中序、后序）先序中序后序如何用数组模拟二叉树的遍历过程？求二叉树的深度两种方法栈、队列232. 用栈实现队列225. 用队列实现栈字符串序列化与反序列化寻找字符串最长回文串最大公共前缀找出出现次数最多的字符字符串中的最长不重复子串动态规划跳台阶最长公共子序列链表反转链表三种
前端常见手撕题（详细注释版）：持续更新中……
weixin_42044763的博客
11-24 1437
基本思路和浅拷贝一样，不同的是在拷贝时，如果遇到复杂数据类型，就要递归调用（再生成一个新的地址，把简单数据类型捞过来，返回新的地址，给到当前key），这样可以保证只要遇到复杂数据类型，都可以生成新的地址。写法2：获取时间戳，第一次肯定会触发，因为new Date获取的是从1970年到现在的时间，delay总不能大于五十年吧……返回一个函数，调用这个函数的时候就调用myBind的调用者，并改变this。第一个参数是构造函数，第二个参数是实例化时的参数。//4.事件绑定，处理服务端返回的结果。
前端知识点——常见手撕题
m0_49997078的博客
04-05 1697
前端常见手撕题
面试中遇到的手撕代码题（一）
热门推荐
早就戒了的博客
04-01 1万+
1.重建二叉树 输入某二叉树的前序遍历和中序遍历的结果，请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6}，则重建二叉树并返回。 根据二叉树的性质： public class Rebuild_Tree { public TreeNode reConst...
前端面试题整理- 手撕代码篇
qq_39581763的博客
04-29 584
手撕代码篇 考察 new 和闭包(某节) // 不使用全局变量前提下实现如下逻辑 let a = new Foo() //a.id -> 1 let b = new Foo() //b.id -> 2 // 使用闭包 const Foo = (function() { let index = 1; return function() { this.id = in...
前端大厂最新面试题-前端开发面试.docx
06-06
前端大厂最新面试题-前端开发面试.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值