美文网首页
简单实现前端的一些方法

简单实现前端的一些方法

作者: 月光一族 | 来源:发表于2021-02-03 20:26 被阅读0次

1、sort

const insertSort = (arr:any, start =0, end:number) => {

    end = end === arr.length ? end : arr.length;

    for (let i = start;i < end;i++) {

        const e:any = arr[i];

        let j;

        for (j =i;j > start && arr[j -1] >e;j--)

                arr[j] = arr[j -1];

                arr[j] =e;

    }

    return arr;

}

2、promise

const PENDING ="pending"

const RESOLVE ="resolve"

const REJECT ="reject"

function MyPromise(fn) {

    const that =this

      that.status =PENDING // MyPromise 内部状态

      that.value =null // 传入 resolve 和 reject 的值

      that.resolveCallbacks = []// 保存 then 中resolve的回调函数

      that.rejectCallbacks = []// 保存 then 中reject的回调函数

  // resolve 函数 Promise内部调用 resolve 函数 例:new MyPromise((resolve,reject)=>{resolve(1)})

      function resolve(val) {

            if (that.status ===PENDING) {

                that.status =RESOLVE

                 that.value = val

                that.resolveCallbacks.forEach(cb => cb(that.value))

            }

        }

// reject 函数 Promise内部调用的 reject 函数 例:new MyPromise((resolve,reject)=>{reject(1)})

          function reject(val) {

                if (that.status ===PENDING) {

                    that.status =REJECT

                     that.value = val

                        that.rejectCallbacks.forEach(cb => cb(that.value))

                }

            }

// 调用传入 MyPromise 内的方法 例:new MyPromise((resolve,reject)=>{})  fn=(resolve,reject)=>{}

          try {

                fn(resolve,reject)

            }catch (error) {

                reject(error)

               }

        }

// 在原型上添加then方法

            MyPromise.prototype.then =function (onFulfilled, onRejected) {

                const that =this

     // 判断传入的是否为函数

              onFulfilled =typeof onFulfilled ==='function' ? onFulfilled : v => v

              onRejected =typeof onRejected ==='function' ? onRejected : r => {

                    throw r

                }

//如果 Promise 内部存在异步代码,调用then方法时,此时 promise 内部还是 PENDING 状态,

  将 then里面的函数添加进回调数组,当异步处理完成后调用 MyPromise 内部的 resolve或者

  reject函数

          if (that.status ===PENDING) {

                that.resolveCallbacks.push(onFulfilled)

                that.rejectCallbacks.push(onRejected)

                }

// 当 Promise 内部的状态已经为 resolve,则调用 then 里面的函数并传递值

                  if (that.status ===RESOLVE) {

                        onFulfilled(that.value)

                    }

// 当 Promise 内部状态为 reject,则调用then里的回调函数并传递值

                  if (that.status ===REJECT) {

                            onRejected(that.value)

                    }

            }

3、实现一个new方法

new原理那部分,链接到原型,obj = Object.create(Con.prototype),这种方式会比较好

function _new(fn,...arg){

let obj = {}

let con = [].slice.call(arguments)

obj.__proto__ =con.prototype //链接原型

const ret = fn.call(obj, ...arg);//改变this的指向

return ret instanceof Object ?ret :obj;

}

4、用一个函数可实现add(1)(3)、add(1)(3)(5),不限制个数

function add (a) {

    function sum(b) { // 使用闭包

        a = a + b; // 累加

        return sum;

    }

    sum.toString = function() { // 重写toSting() 方法

        return a;

    }

    return sum; // 返回一个函数

}

console.log(add(1)(3)) 

console.log(add(1)(3)(5))

5、实现一个深拷贝

function isObject(obj) {

    return Object.prototype.toString.call(obj) === '[object Object]'

}

function deepCopy(source,hash= new WeakMap()){

  // 判断如果参数不是一个对象,返回改参数

if(!isObject(source)) return source;

if(hash.has(source)) return hash.get(source); // 如何拷贝过该对象,则直接返回该对象

  // 判断参数是对象还是数组来初始化返回值

let res = Array.isArray(source)?[]:{};

hash.set(source,res); // 哈希表添加新对象

  // 循环参数对象的key

for(let key in source){

    // 如果该key属于参数对象本身

if(Object.prototype.hasOwnProperty.call(source,key)){

      // 如果该key的value值是对象,递归调用深拷贝方法进行拷贝

    if(isObject(source[key])){

        res[key] = deepCopy(source[key],hash);

    }else{

        // 如果该key的value值不是对象,则把参数对象key的value值赋给返回值的key

        res[key] =source[key];

      }

    }

  }

  // 返回返回值

return res;

};

6、简单的深拷贝

var deepCopy = function(obj){

    if (typeof obj !== 'object') return;

    var newObj = obj instanceof Array ? [] : {};

    for (var key in obj) {

    if (obj.hasOwnProperty(key)) {

    newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];

    }

    }

    return newObj;

}

7、找出字符串中重复次数最多的字符

let str = 'dasdjkasljfkalfhjkaljdkslajdkslaadjskadjksaldjksal';

str = [...str];

let list = str.reduce((pre,cur) =>{

    cur in pre?pre[cur] += 1:pre[cur] = 1

     return pre

},{})

let king = Object.keys(list).reduce((pre,cur) =>{

    return list[cur] > list[pre]? cur:pre;

})

console.log(king)

8、找出字符串中第2多的字符,第6改一下就行

let str = 'dasjjkasljfkalfhjkaljdkslajdkslaadjskadjksaldjksal';

str = [...str];

let flag = false;

let list = str.reduce((pre,cur) =>{

    cur in pre?pre[cur] += 1:pre[cur] = 1

    return pre

},{})

function b(){

    let king = Object.keys(list).reduce((pre,cur) =>{

    return list[cur] > list[pre]? cur:pre;

    })

    if(flag){

      return king

    }

    else{

      flag = true;     

      list[king] = 0;

      return b()

    }

}

console.log(list,b())

9、实现一个节流函数

防抖是延迟执行,而节流是间隔执行,函数节流即每隔一段时间就执行一次

functionthrottle(func, wait){

    let timeout = null; 

      return function(){

        let context = this;   

        let args = arguments;

        if (!timeout) {

            timeout = setTimeout(() => {

                timeout = null;

                    func.apply(context, args)

            }, wait)

        }

    }

}

10、实现一个防抖函数

防抖,即短时间内大量触发同一事件,只会执行一次函数

function debounce(func, wait){

    let timeout = null;

    return function(){

        let context = this;

        let args = arguments    

        if (timeout) clearTimeout(timeout);

            timeout = setTimeout(() => {

                func.apply(context, args)

            }, wait)

    }

}

11、实现一个二分查找

let arr = [1, 3, 5, 7, 9, 10, 13]; //数据必须是排序的,没有排序的自己排序

      function search(arr, target) {

        let left = 0;

        let right = arr.length - 1;

        while(left <= right) {

          let mid = parseInt(right + left) / 2;

          if (arr[mid] == target) {

            return mid;

          } else if (arr[mid] < target) {

            left = mid + 1;

          } else {

            right = mid -1;

          }

        }

        return -1;

      }

      console.log(search(arr, 9));

相关文章

网友评论

      本文标题:简单实现前端的一些方法

      本文链接:https://www.haomeiwen.com/subject/bjbmtltx.html