秋招已经逐渐开始,结合各位大佬的手写题对常见的做了整理,做复习回顾用
事件代理
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