简单实现前端的一些方法

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));

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容