前端手写题整理)

秋招已经逐渐开始,结合各位大佬的手写题对常见的做了整理,做复习回顾用

事件代理

ul.addEventListener('click',function(e){
    console.log(e,e.target)
    if(e.target&&e.target.tagName.toLowerCase()=='li'){
        console.log('打印')
    }
})
复制代码

防抖节流

// 节流,一个单位之间内只触发一次,多次触发只生效一次,重在加锁[flag=false]
function throttle(fn,delay){
    let flag = true;
    let timer = null;
    return function(...args){
        let context = this
        if(!flag) return
        flag = false
        clearTimeout(timer)
        timer = setTimeout(function(){
            fn.apply(context,args)
            flag = true
        },delay)
    }
}
// 防抖,事件被连续触发就重新计时,计时器清零[clearTimeout(timer)]
function debounce(fn, delay){
    let timer = null;
    return function(...args){
        let context = this
        if(timer) clearTimeout(timer)
        timer = setTimeout(function(){
            fn.apply(context,args)
        },delay)
    }
}
复制代码

数组去重

// 1.set方法
let arr1 = array=>[...new Set(array)]
// 2.filter
function arr2(array){
    var res = array.filter(function(item,index,array){
        return array.indexOf(item)===index;
    })
    return res
}
// 3.object键值对
function arr3(array){
    var obj = {}
    return array.filter(function(item,index,array){
        return obj.hasOwnProperty(typeof item + item)?false:(obj[typeof item+item]=true)
    })
}
复制代码

函数柯里化

function sum(...args1){
    return function(...args2){
        return [...args1,...args2].reduce((p,n)=>p+n)
    }
}
复制代码

数组flat

let flatDeep = (arr) =>{
    return arr.reduce((res,cur)=>{
        if(Array.isArray(cur)){
            return [...res,...flatDeep(cur)]
        }else{
            return [...res,cur]
        }
    },[])
}

function flatten(arr) {
	let result=[]
	for (let i=0,len=arr.length;i<len;i++) {
		if (Array.isArray(arr[i])) {
			result=result.concat(flatten(arr[i]))
		} else {
			result.push(arr[i])
		}
	}
	return result
}
复制代码

拷贝

// 浅拷贝
obj1 = {...obj}
Object.assign({},obj)
function copy(obj){
    let copyobj = {}
    for(let key in obj){
        copyobj[key] = obj[key]
    }
    return copyobj
}
// 深拷贝
function deepcopy(obj,map = new WeakMap()){
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Date) return new Date(obj);
    if(typeof obj ==='object'){
        let copyobj = Array.isArray(obj)?[]:{};
        if(map.get(obj)){
            return map.get(obj)
        }
        map.set(obj,copyobj)
        for(let key in obj){
            copyobj[key] = deepcopy(obj[key],map);
        }
        return copyobj
    }else{
        return obj
    }
}

复制代码

手写call、apply和bind

// call
Function.prototype.maCall = function(){
    let [context,...args] = [...arguments]
    context = Object(context)||window
    let fn = Symbol();
    context[fn] = this
    let res = context[fn](...args)
    delete context[fn]
    return res
}
// 手写apply
Function.prototype.myApply = function(){
    let [context,args] = [...arguments]
    context = Object(context)||window
    let fn = Symbol()
    context[fn] = this
    let res = context[fn](...args)
    delete context[fn]
    return res
}
// 手写bind
Function.prototype.bind = function(context,...args){
    return (...newArgs) =>{
        return this.call(context,...args,...newArgs)
    }
}
复制代码

实现new操作

function _new(){
    let obj = {};
    let [constructor,...args] = [...arguments]
    obj._proto_ = constructor.prototype
    let res = constructor.apply(obj,args)
    return res instanceof Object?res:obj;
}
复制代码

实现instanceof

function myInstaceof(son,father){
    while(true){
        son = son._proto_;
        if(!son) return false;
        if(son = father.prototype) return true
    }
}
复制代码

去除空格

function myTrim(str){
    return str.replace(/(^\s+)|(^\s+$)/g,'')
}
复制代码

手写reduce

Array.prototype.myReduce = function(fn, initVal){
    let result = initVal;
    let i = 0;
    if(typeof initVal == 'undefined'){
        result = this[i]
        i++;
    }
    while(i<this.length){
        result = fn(result,this[i])
    }
    return result
}
复制代码

继承

原型链继承

function Father(){
    this.color = []
}
Father.prototype.getColor = function(){
    console.log(this.color)
}
function Son(){
    this.name =this.name
}
Son.prototype = new Father()
复制代码

构造函数

function Father(){

}
function Son(){
    Father.call(this)
}
var res = new Son()
复制代码

组合继承

function Father(name){
    this.name = name;
    this.color = [];
}
Father.prototype.getName = function(){
    console.log()
}
function Son(){
    Father.call(this)
}
Son.prototype = new Father();
Son.prototyp.constructor = Son
复制代码

原型式继承

function object(obj){
    function F(){}
    F.prototype = obj;
    return new F()
}
Object.create()
复制代码

寄生继承

function createAnother(original){
    var clone = Object.create(original);
    clone.sayHi = function(){
        alert('hi')
    }
    return clone
}
复制代码

寄生组合继承

function Father(name){
    this.name = name;
    this.color = [];
}
Father.prototype.getName = function(){
    console.log()
}
function Son(){
    Father.call(this)
}
Son.prototyp = object.create(Father.prototype)
Son.prototyp.constructor = Son
复制代码

Class继承

Class Father{
    constructor(name){
        this.name = name
    }
    getName(){
        return this.name
    }
}
Class Son extends Father{
    constructor(name.age){
        super(name)
        this.age = age
    }
}
复制代码

AJAX

const getJSON = function(url){
    return new Promise((resolve,reject)=>{
        const xhr = new XMLHttpRequest;
        xhr.open('get',url,true)
        xhr.setRequestHeader('Accept','application/json')
        xhr.onreadystatechange = function(){
            if(xhr.readyState!==4) return
            if(xhr.status === 200||xhr.status ===304){
                resolve(xhr.responseText)
            }else{
                reject(new Error(xhr.responseText))
            }
        }
        xhr.send()
    })
}
复制代码
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享