bind实现,foreach手写, [‘1‘, ‘2‘, ‘3‘].map(parseInt), promise.any手写,promise串行执行, ajax 封装,柯里化函数,单例模式

目录

1 bind 的实现

2 foreach手写 

3 mymap手写

4. ['1', '2', '3'].map(parseInt)返回值

5 mynew手写 

6 promise.any手写

7  两个静态方法resolve和reject

8 promise串行执行

9 ajax 封装

10 数组去重两种方式:shift+includes,set+array.from

11 柯里化函数

12 单例模式

13 获取当前页面的所有节点


1 bind 的实现

Function.prototype.mybind=function(context,...args) {  
return (...args2)=>{
    return this.apply(context,args.concat(args2))
}
}

    // 测试
       
    let obj={
        name:'ly'
    }
    function aa(param){
        console.log(this.name,param)
    }
    aa.mybind(obj)('apple')

2 foreach手写 

Array.prototype.myforeach=function(fn,context){
    let arr=this
    for(let i=0;i<arr.length;i++) {
        fn.call(context,arr[i],i,arr)
    }
}

let arr=[1,2,4]
arr.myforeach((item,i)=>{
    arr[i]=item*2
})
console.log(arr)

3 mymap手写

Array.prototype.mymap=function(fn) {
        let ree=[]
        this.forEach((item,i,arr)=>{
            arr.push(fn(item,i,arr))
        })
        return ree

    }

4. ['1', '2', '3'].map(parseInt)返回值

传入两个参数 分别对应0,1,2

parseint里0:十进制
parseint里1:NaN

parseint里2: 二进制

[1,NaN,NaN]

function myinstanceof(left,right) {
let leftt = left.__proto__
let rightt=right.prototype
while(leftt) {
    if(leftt===rightt)return true
    leftt = left.__proto__
    rightt= right.prototype
}
return false
    }

    class apple {
        constructor(name,color) {
            this.name=name
            this.color=color
        }

    }
    let applepie = new apple('applea','red')
    console.log( myinstanceof(applepie,apple))

5 mynew手写 

function mynew(func,...args){
        let obj={}
        obj.__proto__ = func.prototype
        let re = func.apply(obj,args)
        return re instanceof Object? re:obj
    }
    function A(name) {
        this.name = name;
    }
    var a1 = mynew(A, 'Li');
    var a2 = new A('Li');
    console.log(a1, a2);

6 promise.any手写

promise.any: 如果有成功的立刻返回成功的结果,空数组或者全失败则返回aggregate error

 function any(promises) {
        if(promises.length===0)Promise.reject('error all')
      
        return new Promise((resolve,reject)=>{
              let cnt = 0
            let errr = []
   promises.forEach(el => {
    Promise.resolve(el).then(val=>resolve(val),err=>{
        errr.push(err)
        cnt++
        if(cnt===promises.length)reject('all promises are err')
    })
   });
    
        })

    }

    const p1 = Promise.reject("Error 1");
        const p2 = Promise.reject('err')
        const p3 = Promise.reject("Error 2");

        any([p1, p2, p3])
            .then((value) => {
                console.log("成功的Promise:", value);
            })
            .catch((error) => {
                console.log("错误:",error); // 输出: 错误: All promises were rejected
            });

7  两个静态方法resolve和reject

function settle(promises) {
  return new Promise((resolve,reject)=>{
    let cnt=promises.length
    let arr=[]
    promises.forEach((el,i) => {
       Promise.resolve(el).then((val)=>{
        arr[i]={
            status:'resolved',
            val
        }
        cnt--
        if(cnt===0)resolve(arr)
       },
     err=>{
        arr[i]={
            status:'rejected',
            err
        }
        cnt--
         if (cnt === 0) resolve(arr)
     }
    
    )
       
    });
  })
   }

   // test
    const p1 = Promise.resolve(3);
    const p2 = Promise.reject(12);
    const p3 = new Promise((resolve, reject) => {
        setTimeout(resolve, 1000, 'done');
    });
    const p4 = new Promise((resolve, reject) => {
        setTimeout(reject, 200, 'yes');
    });

    settle([p1, p2, p3, p4]).then(res => {
        console.log(res);})

8 promise串行执行

function delay(time) {
        return new Promise((resolve, reject) => {
            console.log(`wait ${time}s`)
            setTimeout(() => {
                console.log('execute');
                resolve()
            }, time * 1000)
        })
    }

    const arr = [3, 4, 5];

   (async function a() {
        for(let i of arr) {
            await delay(i)
        }
    })()

arr.reduce((pre,cur)=>{
return pre.then(()=>{
    return delay(cur)
})
  },Promise.resolve())

9 ajax 封装

//创建对象,设置请求头,设置响应请求状态,发送请求,响应数据,局部更新
   function ajaxx(url) {
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest()
        xhr.open('GET',url)
        xhr.setRequestHeader('Accept','application/json')
        xhr.responseType='json'
        
        xhr.onreadystatechange=function(){
   if(this.readyState!==4)return
   if(this.status===200)resolve(this.response)
   else reject(new Error(this.status))
        }
        xhr.send(null)
    })

   }
//实现一个红绿灯(3s 打印 red,2s 打印 green,1s 打印 yellow)
    function deng() {
        let timer1,timer2,timer3
        let loop=()=>{
            timer1 = setTimeout(()=>{
                console.log('green')
                timer2=setTimeout(()=>{
                    console.log('red')
                    timer3=setTimeout(()=>{
                        console.log('yellow')
                        loop()
                    },200)
                },300)

            },100)
        }
        loop()
        return ()=>{
            clearTimeout(timer1)
            clearTimeout(timer2)
            clearTimeout(timer3)
        
        }
    }
    let x = deng()

    setTimeout(()=>{
x()
    },1000)

10 数组去重两种方式:shift+includes,set+array.from

function func() {
        let z = [...arguments]
        let inner=function() {
            z.push(...arguments)
            return inner
            //链式调用
        }

        inner.toString=function(){
            return z.reduce((a,b)=>a+b)
        }//这个alert输出也能调用
        return inner
  
        
    }
    console.log(+func(2)(3)(8))

11 柯里化函数

思想:当函数需要的参数小于传入的参数时候,直接执行,否则 bind 等待下一次传参


function curry(fn,...args){
        return fn.length<=args.length? fn(...args): curry.bind(null,fn,...args)
    }

    // test
        let add = curry((a, b, c) => a + b + c);
        console.log(add(1)(2)(3));
        console.log(add(1, 2)(3));
        console.log(add(1)(2, 3));

12 单例模式

//保证一个类只有一个实例 并且提供一个全局访问点
     //判断全局是否有该对象 没有就创建一个新的
    class singleton {
        constructor(name) {
            this.name=name
            this.instance=null
        }
        static getinstance(name){
            if(!this.instance)
            this.instance =  new singleton(name)
        return this.instance
        }
    }

    let x = singleton.getinstance('li')
    let y=singleton.getinstance('lee')
    console.log(x===y)

13 获取当前页面的所有节点

 let a = [...document.querySelectorAll('*')]
   a.forEach(el => {console.log(`${el.nodeName},${el.tagName}`) 
   });
//获取一个页面所有标签的个数

  function find(){
    let map={}
    function findd(node) {
        if(node.nodeType===1) {
            map[node.nodeName]=map[node.nodeName]? map[node.nodeName]+1:1
        }
        let child =node.childNodes
        for(let i=0;i<child.length;i++) {
            findd(child[i])
        }

        
    }
    findd(document)
    return map
  }
  let mapp = find()
  console.log(mapp)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值