前端面试手写题

最新推荐文章于 2022-09-01 14:08:57 发布

Stephy_Yy

最新推荐文章于 2022-09-01 14:08:57 发布

阅读量117

点赞数

分类专栏： # 面试题集 # 面试文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43503511/article/details/120116899

版权

本文详细探讨了前端面试中常见的技术点，包括深拷贝、继承、Promise、防抖节流等概念，深入讲解了如何手动实现JSONP、使用setTimeout模拟setInterval、clearInterval，并通过实例解析了如何利用transform进行动画与过渡效果的实现。同时，文章还涵盖了正方形、三角形绘制以及链表排序等算法问题，展示了如何运用reduce实现map功能。

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

深拷贝

// 深拷贝
function deepClone(ori) {
   
    let tar;
    if (typeof ori === 'object' && ori !== null) {
   
        tar = Array.isArray(ori) ? [] : {
   }
        for (let k in ori) {
   
            if (ori.hasOwnProperty(k)) {
   
                tar[k] = deepClone(ori[k])
            }
        }
    } else {
   
        tar = ori
    }
    return tar

}

继承

// 圣杯模式实现继承
function Parent() {
    }
function Child() {
    }
function Buffer() {
    }
Buffer.prototype = Parent.prototype
Child.prototype = new Buffer()
Child.prototype.constructor = Child
Child.prototype.super_class = Parent
// ES6 类的继承
class Parent {
    }
class Child extends Parent {
   
    constructor() {
   
        super()
    }
}
// 组合继承
function Child() {
   
    Parent.call(this)
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

Promise

// Promise
const pending = Symbol('pending')
const fulfilled = Symbol('fulfilled')
const rejected = Symbol('rejected')

class Promise {
   
    constructor(executor) {
   
        this.status = 'pending'
        this.value = undefined
        this.reason = undefined
        this.onFulfilledCbs = []
        this.onRejectedCbs = []
        function resolve(value) {
   
            if (this.status === 'pending') {
   
                this.status = 'fulfilled'
                this.value = value
                this.onFulfilledCbs.forEach(fn => fn())
            }
        }
        function reject(reason) {
   
            if (this.status === 'pending') {
   
                this.status = 'rejected'
                this.reason = reason
                this.onRejectedCbs.forEach(fn => fn())
            }
        }
        try {
   
            executor(resolve, reject)
        } catch (err) {
   
            reject(err)
        }
    }
    then(onFulfilled, onRejected) {
   
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
        onRejected = typeof onRejected === 'function' ? onRejected : reason => reason
        // 异步返回promise
        let promise = new Promise((resolve, reject) => {
   
            if (this.status === 'fulfilled') {
   
                setTimeout(() => {
   
                    try {
   
                        let x = onFulfilled(this.value)
                        resolvePromise(promise, x, resolve, reject)
                    } catch (e) {
   
                        reject(e)
                    }
                });
            }
            if (this.status === 'rejected') {
   
                setTimeout(() => {
   
                    try {
   
                        let x = onRejected(this.reason)
                        resolvePromise(promise, x, resolve, reject)
                    } catch (e) {
   
                        reject(e)
                    }
                });
            }
            if (this.status === 'pending') {
   
                this.onFulfilledCbs.push(() => {
   
                    setTimeout(() => {
   
                        try {
   
                            let x = onFulfilled(this.value)
                            resolvePromise(promise, x, resolve, reject)
                        } catch (e) {
   
                            reject(e)
                        }
                    });
                })
                this.onRejectedCbs.push(() => {
   
                    setTimeout(() =>