js手撕大全

一、数组扁平化⭐⭐⭐⭐⭐

比如一数组：let arr1=[[[[[[1],2],3],4],5],6]

方法一：flat

arr1.flat(Infinity)

方法二：递归

function flat1(arr){
    let newArr =[];
    arr.forEach(i=>{
        if(Array.isArray(i))
        {newArr=newArr.concat(flat2(i))}
        else{
            newArr.push(i)
        }
    })
    return newArr
}

方法三：遍历

function flat1(arr){
    while(arr.some(i => Array.isArray(i))){
        arr=[].concat(...arr)
    }
    return arr
}

二、对象扁平化⭐⭐⭐

prefix：定位递归深度
res：把扁平化的对象放入
hasOwnProperty:只处理 obj 自有属性,防止遍历到原型链上其他的键
value和newkey：获取值和当前完整的键
数组判断:引入[]
对象判断:递归


function flatObj(obj,prefix='',res={}){
    for(let key in obj){
        if(Object.prototype.hasOwnProperty.call(obj, key)){
            const value = obj[key];
            const newkey = prefix?`${prefix}.${key}`:key;
            if(Array.isArray(value)){
                value.forEach((item,index)=>{
                    if(typeof item === 'object' && item !==null){
                        flatObj(item,`${newkey}[${index}]`,res)
                    }else{
                        res[`${newkey}[${index}]`]=item
                    }
                })
            }else if(typeof value === 'object'&&value!==null){
                flatObj(value,newkey,res);
            }else{
                res[newkey]=value;
            }


        }
    }
    return res;
}

三、数组去重⭐⭐⭐⭐⭐

let arr = [1, 2, 3, 2, 4, 1, 5];

方法一：set

result = [...new Set(arr)]

方法二：使用 filter() + indexOf()

filter用来过滤
indexOf会得到第一个的索引，
通过判断当前索引是不是当前值的第一个索引来进行过滤

let result = arr.filter((item,index)=>arr.indexOf(item) ===index)

方法三：使用reduce()+inclueds()

reduce():设置acc=[].然后cur来遍历整个数组
includes():如果没有重复就push到acc

let result2 = arr.reduce((acc,cur)=>{
if(!acc.includes(cur))
{acc.push(cur)}
return acc
},[])

四、对象数组的去重⭐⭐

let users = [ { id: 1, name: "Tom" }, { id: 2, name: "Jerry" }, { id: 1, name: "Tom" }, { id: 3, name: "Spike" } ];

方法一：Map()+reduce()

reduce()：设置acc为{map:new Map(),results:[]},
然后每次利用map的has和set方法来判断是否重复
如果不重复就push到数组acc.resultws

let results = users.reduce(
    (acc,cur) =>{
        if(!acc.map.has(cur.id)){
            acc.map.set(cur.id,true);
            acc.results.push(cur)
        }
        return acc
    }
    , {map: new Map(),results:[]}
).results

方法二：Set()+reduce()

reduce():设置acc为[]。然后对比cur.id存在不存在，不存在就push到acc里面
Set()：Set() 在这里主要用作快速判断重复，与 Map() 的键记录重复的思路类似，但更简洁。

let set1 = new Set()
let results2 = users.reduce((acc,cur)=>{
    if(!set1.has(cur.id)){
        set1.add(cur.id);
        acc.push(cur)

    }
    return acc
},[])

五、手撕数组的filter()方法⭐⭐

传入arguments：callback和thisArg
判断callback是不是null，是就throw new TypeError('it is null')
判断callback是不是function，不是就throw new TypeError('is is not a function')
获取obj：const obj =Object(this)
获取正确长度：const len = obj.length >>>0;
建立返回的数组：const arr =[]\
定义thisArg，通过判定arguments.length是否大于1，来判断是否给thisArg赋值undefiend；
遍历obj的索引k，然后通过if（k in obj）去除空洞
callback(thisArg，obj[k],k,obj)是否为ture
判断是否把obj[k]进一步push到arr里面
返回arr

Array.prototype.myFilter = function(callback,thisArg){
    if(this == null){
        throw new TypeError('it is null or undefined')
    }
    if(typeof callback !== 'function'){
        throw new TypeError(callback + 'is not a function');
    }
    const obj = Object(this)//把this指向arr.myFilter中的arr
    const len = obj.length >>>0;//>>>0是为了1.转换为数字2.去掉小数3.去掉负数符号
    const arr =[]; //返回的新数组
    thisArg = arguments.length>1?arguments[1]:undefined;//这里arguments指定function里面的参数个数
    for(let k = 0;k<len;k++){
        if(k in obj){//k in obj 是为了跳过空洞
            const value = obj[k];
            if(callback.call(thisArg,value,k,obj)){
                arr.push(value)
            }
        }
    }
    return arr;

}
const numbers = [1, 2, 3, 4];
const even = numbers.myFilter(x => x % 2 === 0);
console.log(even); // [2,4]

六、手撕数组的map()方法⭐⭐

传入arguments：callback和thisArg
判断callback是不是null，是就throw new TypeError('it is null')
判断callback是不是function，不是就throw new TypeError('is is not a function')
获取obj：const obj =Object(this)
获取正确长度：const len = obj.length >>>0;
建立返回的数组：const arr =[]\
定义thisArg，通过判定arguments.length是否大于1，来判断是否给thisArg赋值undefiend；
遍历obj的索引k，然后通过if（k in obj）去除空洞
callback(thisArg，obj[k],k,obj)的值直接赋值给arr[k]
返回arr

Array.prototype.myMap =function (callback,thisArgs){
    if(callback == null){ throw new TypeError('it is null or undefined')}
    if(typeof callback !=='function') {throw new TypeError('it is not a function')}
    const obj = Object(this);
    const len = obj.length >>>0;
    const arr =[];
    thisArgs = arguments.length>1?arguments[1]:null;
    for(let i = 0;i<len;i++){
        if(i in obj){
            arr[i] = callback.call(thisArgs,obj[i],i,obj)
        }
    }
    return arr;
}
let numbers=[1, 2, 3, 4];
console.log(numbers.myMap((numbers)=>{return numbers*2}))

七、深拷贝手撕⭐⭐⭐⭐⭐

arguments传入为obj和map = new WeakMap
判断是不是基本类型或者null
判断是不是日期
判断是不是正则
判断是不是数组
判断是不是重复
存入哈希map
遍历obj
判断是不是私有属性
执行回调
返回

function deep(obj,map = new WeakMap){
    if(typeof obj !=='object' || obj ===null) return obj;
    if(obj instanceof Date) return new Date(obj);
    if(obj instanceof RegExp) return new RegExp(obj);
    if (map.has(obj)) return map.get(obj);
    let newObj = Array.isArray(obj)?[]:{};
    map.set(obj,newObj);
    for (let key in obj){
        if(Object.prototype.hasOwnProperty.call(obj,key)){
            newObj[key]=deep(obj[key],map);
        }
    }
    return newObj;

}

八、手撕节流和防抖⭐⭐⭐⭐⭐

防抖：

搜索框输入建议（等用户停止输入后才发送请求）
表单验证（用户输入完毕后再验证）
窗口调整大小时的重新计算
避免按钮重复点击提交
即时保存文章草稿

function debounce(func,wait){
    let timeout;
    return function(...args){
        clearTimeout(timeout);
        timeout = setTimeout(()=> func.apply(this,args),wait);

    }
}

节流：

滚动事件处理（如滚动加载、固定导航栏）
监听resize事件调整布局
拖拽操作更新界面
频繁的数据请求或API调用
实时游戏中的按键响应
Canvas 绘图操作

function throttle(func,wait){
    let last = 0;
    return function(...args){
        const now = new Date.now();
        if(now-last>wait){
            func.apply(this,args);
            last = now;
        }
    }
}

九、寄生组合式继承⭐⭐⭐⭐

用this.形式定义实例属性
用prototype来定义实例方法
用call或者apply来继承父类的实例属性
用son.prototype = Object,create(father.prototype)继承方法
在用son.prototype.constructor = son修正构造函数指向

//a.父类构造函数
function Father(name){
    this.name = name;//实例属性，接受参数name
    this.friends = ['jone','tom'];//实例属性，默认属性
};
//原型方法：所有的爸爸father共享的方法
Father.prototype.hello = function(){
    console.log(`hello,i am ${this.name}`)//当前实例的name
};
//b.子类构造函数
function Son(name,age){
    Father.call(this,name);//调用父构造函数，继承实例属性
    this.age = age;//子类构造函数自己的实例
};
//c.原型链继承
Son.prototype = Object.create(Father.prototype);//继承父类源方法
Son.prototype.constructor = Son;//修正构造函数指向
//d.验证
let son = new Son('jojo',22);
son.hello();
console.log(son);
console.log(son.age);
console.log(son.friends);