JavaScript常见手写代码题

172 阅读1分钟

防抖

var btn = document.getElementById('btn');
btn.addEventListener('click',fangdou(fn))
function fangdou(fn){
	var time = null;
	return function() {
	if (time) clearTimeout(time)
	time = setTimeout(()=>{fn.apply(this,arguments)},5000)
}
	}

function fn() {
    //写防抖的代码
]

节流

function jieliu (fn){
	var flag = false
	return function() {
	if(!flag){
	flag = true
setTimeout(()=>{
fn.apply(this,arguments)
flag = false
},5000)

}

}
}
function fn() {
    //写防抖的代码
]

手写ajax

var xhr = new XMLHttpRequest();
xhr.open("GET","url");
xhr.onreadystatechange = function () {
	if(xhr.readyState === 4 && xhr.status == 200)
	console.log(xhr.responseText);
}
xhr.send(null);

promise用法

 function fn(){
     return new Promise((resolve, reject) =>{
         成功时调用 resolve(数据)
         失败时调用 reject(错误)
     })
 }
 fn().then(onsuccess, onfail)
     .then(onsuccess2, onfail2)
     .catch(onerror)
     .always(onother)

数组去重

set去重

function unique(arr) {
	return Array.from(new Set(arr))
}

Map 去重

function unique(arr) {
	const res = new Map();
	return arr.filter((x) => !res.has(x) && res.set(x,1))
} 

手写版

functionunique(arr){
   for(var i=0; i<arr.length;++){
         for(var j=i+1; j<arr.length;j++){             
            if(arr[i]==arr[j]){
              //第一个等同于第二个,splice方法删除第二个
              arr.splice(j,1);
              j--;           
          }        
        }
  }
  return arr;
}

深拷贝

1、var ojb1 = [...obj2] 这样的不能有嵌套

2、var obj1 = JSON.parse(JSON.stringify(obj2))  这种比较暴力

3、手写版

function deepCopy(obj){
    //判断是否是简单数据类型,
    if(typeof obj == "object"){
        //复杂数据类型
        var result = obj.constructor == Array ? [] : {};
        for(let i in obj){
            result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
        }
    }else {
        //简单数据类型 直接 == 赋值
        var result = obj;
    }
    return result;
}

排序

冒泡排序

for(var i=0;i<arr.lenght;i++){
	for(var j=0; j<arr.lenght-i-1;j++){
	if(arr[j]>arr[j+1])
	[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
return arr

选择排序

for (let i = 0; i < arr.length; i++) {
            let min = i;
            for (let j = i + 1; j < arr.length; j++) {
                min = arr[j] < arr[min] ? j : min; 
            }
            [arr[i], arr[min]] = [arr[min], arr[i]];

        }
		return arr

插入排序

for (let i = 1; i < arr.length; i++) {
            for (let j = i; j > 0 && arr[j] < arr[j - 1]; j--) {
                [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]];
            }
        }
return arr

事件委托

ui.addEventListener('click',function(e){
	if(e.target.tagName.toLowerCase() === 'li') {
	fn()
}
})

最后:继承和设计模式的手写代码看我其他的文章