源码小栗子

最新推荐文章于 2025-04-03 13:38:14 发布
最新推荐文章于 2025-04-03 13:38:14 发布
阅读量223 收藏 2
点赞数 2
分类专栏： 算法 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39502879/article/details/145522350
版权

1、实现一个reducer

  Array.prototype.reducer1 = function (callBack, initVal) {
    if (!Array.isArray(this) || this.length <= 0 || typeof callBack !== 'function') {
      return []
    }
    let res = !!initVal ? initVal : this[0]
    const hasInitVal = !!initVal
    for(var i = hasInitVal? 0 : 1; i < this.length; i++) {
      res = callBack(res, this[i], i, this)
    }
    return res
  }

2、手动实现Array.prototype.filter方法

//手动实现Array.prototype.filter方法
function filter(arr, filterCallback) {
    // 首先，检查传递的参数是否正确。
    if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function') 
    {
      return [];
    } else {
      let result = [];
       // 每次调用此函数时，我们都会创建一个 result 数组
       // 因为我们不想改变原始数组。
      for (let i = 0, len = arr.length; i < len; i++) {
        // 检查 filterCallback 的返回值是否是真值
        if (filterCallback(arr[i], i, arr)) { 
        // 如果条件为真，则将数组元素 push 到 result 中
          result.push(arr[i]);
        }
      }
      return result; // return the result array
    }
  }

3、手动实现 Array.prototype.map 方法

function map(arr, mapCallback) {
    // 首先，检查传递的参数是否正确。
    if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') { 
      return [];
    } else {
      let result = [];
      // 每次调用此函数时，我们都会创建一个 result 数组
      // 因为我们不想改变原始数组。
      for (let i = 0, len = arr.length; i < len; i++) {
        result.push(mapCallback(arr[i], i, arr)); 
        // 将 mapCallback 返回的结果 push 到 result 数组中
      }
      return result;
    }
  }

4、实现一个repeat

String.prototype.repeat = function (times) {
  let str = ''
  while(times) {
    str += this;
    times--
  }
  return str
}

var str = 'cheese'
console.log(str.repeat(3))

5、实现一个trim

String.prototype.trim = function() {
  return this.replace(/^\s+/, '').replace(/\s+$/, '');
}

6、实现最大请求并发限制

利用任务队列

var urls = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
const limit = 5;

function sendRequest(urls, limit, callback) {
    function _send(urls) {
        const url = urls.shift();
        if (url) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(`当前发送：${url}`);
                    resolve(url);
                }, 1000)
            })
                .finally(() => {
                    if (urls.length > 0) {
                        return _send(urls)
                    }
                })
        }
    }
  
    let asyncList = [];
    while (limit--) {
        asyncList.push(_send(urls));
    }
    return Promise.all(asyncList).then(callback);
}

sendRequest(urls, limit, function () {
    console.log('all urls sended!')
});

7、控制最大并发数（字节原题）

利用任务队列

参考：https://juejin.cn/post/6970642160676765732

class Scheduler {
    constructor() {
        this.tasks = [], // 待运行的任务
        this.usingTask = [] // 正在运行的任务
    }
    // promiseCreator 是一个异步函数，return Promise 
  	// 相当于不阻塞主线程的操作
    add(promiseCreator) {
        return new Promise((resolve, reject) => {
            promiseCreator.resolve = resolve
            if (this.usingTask.length < 2) {
                this.usingRun(promiseCreator)
            } else {
                this.tasks.push(promiseCreator)
            }
        })
    }
    usingRun(promiseCreator) {
        this.usingTask.push(promiseCreator)
        promiseCreator().then(() => {
            promiseCreator.resolve()
            let index = this.usingTask.findIndex(promiseCreator)
            this.usingTask.splice(index, 1)
            if (this.tasks.length > 0) {
                this.usingRun(this.tasks.shift())
            }
        })
    }
}
const timeout = (time) => new Promise(resolve => {
    setTimeout(resolve, time)
})
const scheduler = new Scheduler()
const addTask = (time, order) => {
    scheduler.add(() => timeout(time)).then(() => console.log(order))
}
addTask(400, 4)
addTask(200, 2)
addTask(300, 3)
addTask(100, 1)
// 2, 4, 3, 1
function createPoolRequest(prams) {
  const { maxReq } = prams

  let tasks = []
  let runingtasks = []

  function runingTask (info) {
    runingtasks.push(info)
    ajax(info).then(() => {
      info.resolve(res)
      runingTask.splice(runingTask.findIndex(item => info.url === item.url), 1)
      if (tasks.length > 0) {
        runingTask(tasks.shift())
      }
    })
  }

  return (url) => {
    return new Promise((resolve, reject) => {
      if (runingTask.length < maxReq) {
        runingTask({url, resolve})
      } else {
        tasks.push({url, resolve})
      }
    })
  }
}

const request = createPoolRequest({
  pool: 3
})
request('/user').then((res)=> {
  console.log(res)
})

8、实现一个promise.all

const a = new Promise(function(resolve, reject) {
    resolve('a resolve');
})
const b = new Promise(function(resolve, reject) {
    resolve('b resolve')
})

Promise.all1 = function (arr) {
  return new Promise((resolve, reject) => {
    const res = []  
    let index =0  
    let fullCount = 0 //已完成promise的个数
    for(const p of arr){。//创建一个块级作用域
      const resultIndex = index++。//保存入参的顺序
      Promise.resolve(p).then((val)=>{ /
        res[resultIndex] = val  // 保证执行结果按顺序返回 
        fullCount++
        if(index === fullCount){. //如果已完成的个数等于输入个数，resolve
          resolve(res)
        }
      }).catch((err)=>{
        reject(err) //一旦解析失败，reject
      })
    }
  })
}

Promise.all1([a,b]).then(res => {
    console.log(res, 'cheese成功啦')
})

9、实现一个bind

Function.prototype.bind2 = function (context, ...args) {

    if (typeof this !== "function") {
        throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var fn = this;

    var fNOP = function () { };

    var fBound = function (...bindArgs) {
        // 当作为构造函数时，this 指向实例，此时结果为 true，将绑定函数的 this 指向该实例，可以让实例获得来自绑定函数的值
        // 以上面的是 demo 为例，如果改成 `this instanceof fBound ? null : context`，实例只是一个空对象，将 null 改成 this ，
      	// 实例会具有 habit 属性
        // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
        fn.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}
测试用例
var value = 2;
var foo = {
  value: 1
};

function bar(name, age) {
  this.habit = 'shopping';
  console.log(this.value);
  console.log(name);
  console.log(age);
}

bar.prototype.friend = 'kevin';
var bindFoo = bar.bind(foo, 'daisy');

var obj = new bindFoo('18');
// undefined
// daisy
// 18a
console.log(obj.habit);
console.log(obj.friend);

10、实现一个call/apply

  Function.prototype.call1 = function (context, ...args) {
    if(typeof this !== 'function') {
        throw new TypeError('Error')
    }
    var newContext = context || window;
    newContext.fn = this;
    var result 
    if(args) {
        result = newContext.fn(...args);
    } else {
        result = newContext.fn();
    }
    delete newContext.fn;
    return result;
  }

11、React实现省市级联

参考：封装react组件——三级联动 - 南韵 - 博客园

12、订阅发布模式

参考：发布-订阅模式

const JasonMa_PubSub = {
  //存储事件及方法
  listenStore: {},
  //订阅/监听
  on: function(method, cb) {
    //如果已监听过这个方法，就push这个回调函数；如果没监听就创建键值对，值为一个数组用于存储当前回调函数
    if (this.listenStore[method]) {
      this.listenStore[method].push(cb);
    } else {
      this.listenStore[method] = [cb];
    }
  },
  //发布/触发
  emit: function(method, ...args) {
    //获取到监听方法对应的回调函数数组，逐个触发
    const fnList = this.listenStore[method];
    if (!fnList || fnList.length === 0) {
      return false;
    } else {
      fnList.forEach(cb => {
        cb.apply(this, args);
      });
    }
  },
  //关闭订阅
  off: function(method) {
    const fnList = this.listenStore[method];
    if (fnList && fnList.length !== 0) {
      delete this.listenStore[method];
    }
  },
  //只订阅一次
  once: function(method, cb) {
    let onceFn = (...args) => {
      cb.apply(this, args); //执行发布
      this.off(method); //停止订阅
    };
    this.on(method, onceFn); //注册重构后的一次监听事件
  }
};

export default JasonMa_PubSub;

13、红绿灯

// 方法一：
let arr = ['红灯', '绿灯', '黄灯']
let result = [];
async function led(i) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(arr[i])
            resolve(arr[i])
        }, i * 1000)
    }).then((res) => {
        result.push(res)
        if (result.length%3 === 0) {
            setTimeout(function () {
                lights();
            }, 1000)
        }
    })
}

function lights() {
    for (let i = 0; i < 3; i++) {
        led(i)
    }
}
lights()

//方法二：
var arr = ['red', 'yellow', 'green'];
var tasks = [];
var test = function() {
    for(var i = 0; i < arr.length; i++ ) {
        ((j) => {
            tasks.push(
                new Promise(resolve => {
                    setTimeout(() => {
                        console.log(arr[j]);
                        resolve();
                    }, j * 1000)
                })
            )
        }
    
        )(i)
    }
    Promise.all(tasks).then(() => {
        setTimeout(() => {
            test();
        }, 1000);
    })
}
test();

//方法三：
let arr = ['红灯', '绿灯', '黄灯']
function sleep(time) {
    return new Promise(resolve => {
        setTimeout(resolve, time)
    })
}
async function lights() {
    for (let i = 0; i < 3; i++) {
        await sleep(1000)
        console.log(arr[i])
        if(i == 2) i = -1;
    }
}
lights()

//方法四：
let arr = ['红灯', '绿灯', '黄灯']
function sleep(time) {
    return new Promise(resolve => {
        setTimeout(resolve, time)
    })
}
async function lights() {
    let i = 0;
    while(true) {
        await sleep(1000)
        console.log(arr[i]) 
        i++;
        i = i%3
    }
}
lights()

14、promise实现链式调用

class Promise {
    constructor(executer) { //构造函数constructor里面是个执行器
        this.status = 'pending'; //默认的状态 pending
        this.value = undefined //成功的值默认undefined
        this.reason = undefined //失败的值默认undefined
        //状态只有在pending时候才能改变
        let resolve = value => {
            //判断只有等待时才能resolve成功
            if (this.status == 'pending') {
                this.status = 'resolve';
                this.value = value;
            }
        }
        //判断只有等待时才能reject失败
        let reject = reason => {
            if (this.status == 'pending') {
                this.status = 'reject';
                this.reason = reason;
            }
        }
        try {
            //把resolve和reject两个函数传给执行器executer
            executer(resolve, reject);
        } catch (e) {
            reject(e); //失败的话进catch
        }
    }
    then(onFufilled, onReject) {
        //如果状态成功调用onFufilled
        if (this.status == 'resolve') {
            onFufilled(this.value);
        }
        //如果状态失败调用onReject
        if (this.status == 'reject') {
            onReject(this.reason);
        }
    }
}

15、实际场景问题（正则

1、container只有纯文本内容，不包含其他dom元素
2、识别所有以http://、https://或者www.开始的链接
3、所有www.开头的链接，默认使用 http 协议
4、所有链接在新窗口打开

function link() {
    var t=document.getElementById('jsContainer')
    var reg=/(https?:\/\/)?(www\.\w+(\.(com|cn))*([?]\w+=\w*(&\w+=\w*)*)?(#\w+)?)/g
    var textArr=[]
    textArr=t.innerHTML.match(reg)?Array.from(t.innerHTML.match(reg)):[]
    textArr.forEach(item=>{
        if(item.indexOf('www.')===0){
            t.innerHTML=t.innerHTML.replace(item,`<a href="http://${item}" target="_blank">${item}</a>`)
        }
        else{
            t.innerHTML=t.innerHTML.replace(item,`<a href="${item}"  target="_blank">${item}</a>`)
        }
    })
}

16、自定义hook

import React, { useState, useEffect } from 'react';
 
function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);  
  useEffect(() => {    
    function handleStatusChange(status) {      
      setIsOnline(status.isOnline);    
    }    
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);  
    return () => {      
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    
    };  
  });
  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
小栗子机器人易语言群管开源源码教程
04-17
《小栗子机器人易语言群管开源源码教程》是一份专为编程爱好者和QQ机器人开发者准备的教学资源，主要涉及易语言编程环境和QQ群管理自动化。易语言是一种以中文为编程语法的编程语言，旨在降低编程入门难度，提高开发...
小栗子源码_2.9.3.0.zip
09-24
"小栗子源码_2.9.3.0.zip"这个压缩包文件名暗示了它包含的是"小栗子"项目的源代码，版本号为2.9.3.0。由于没有提供具体的标签信息，我们可以从源码的角度出发，探讨软件开发中的一些常见知识点。 1. **版本控制**：...
QQ小栗子源码_2.9.3框架源码
Anshebg_的博客
12-24 403
下载链接：
QQ机器人框架小栗子520源码
Anshebg_的博客
12-24 349
下载：小栗子520源码.zip - 蓝奏云
API接口小栗子
qq_38366782的博客
08-10 2053
因为最近一段时间驻场开发，上手前后端分离的项目，在驻场之前进行学习接口的书写，找了一个简单地小例子，供新人参考便于学习。 1.1.打开vs 新建项目，创建asp.net web application，然后进行选择相应的框架，因为这次是进行API接口的制作，所以选择API。 2.部署IIS，上手过项目的小伙伴，应该都知道如何部署IIS，其部署方法网上都有，很简单，主要是所用路径必须为项目所在文件夹。 3.部署完毕IIS后，可以进行检查输入你的端口号+help，进行查看。 因为我在部署IIS项
30个python小程序源码
weixin_43148590的博客
09-24 2431
30个Python小游戏，上班摸鱼我能玩一天【内附源码】_AI19970205的博客-优快云博客
小米间隔群发插件[小栗子框架]
lisihui12345的博客
04-16 1038
介绍： 小米间隔群发插件,免费下载使用 [无线循环发送,间隔3分钟,封号几率降为0] 网盘下载地址： http://kekewl.cc/77jXJvbxwnd 图片：
2023 QQ机器人云端系统源码 去后门版
04-10 1820
用户在你的网站注册账号，然后登陆他的QQ，他的QQ就变成机器人，并且还有一系列云任务功能。盈利模式 : 分站无限分销，用户开通VIP等级，用户QQ挂机时间收费。安装系统，然后安装小栗子框架，在系统后台配置小栗子框架相关信息。系统支持的对接框架 : 小栗子、MyQQ、MyQQa。该系统支持QQ空间自动秒赞秒评，以及自定义插件。
go小栗子
笔记
01-26 116
package main import "fmt" func main() { fmt.Println(test1(1)) fmt.Println(test2(1)) } func test1(i int) int { defer func() { i++ }() return 0 } func test2(a int)(i int) { defer func() { i++ }() return 0 } 结果： 0 1 解释，后面再补充 ...
小白菜QQ云端机器人登录系统源码 – 去除解密授权
weixin_45892228的博客
11-02 2350
这款源码已经全面解密，去掉了授权版的限制，但是很多人可能不知道这个源码的用处。实际上，该源码主要是为群机器人爱好者设计的。它是一个基于挂机宝机器人框架的网页站点，用户可以通过网页登录QQ账号至挂机宝里面的框架中，无需通过机器人即可实现登录。同时，该源码解决了一个框架只能对应一个机器人的难题，支持多个挂机宝，并且能够随意选择框架登录或者强制使用固定框架登录。当前版本支持小栗子框架、MYQQ、MYQQA等框架，未来还会支持更多优质的框架。
[源码解析]位图：BitSet
进步*于辰的博客
05-01 1万+
本篇文章是我解析Java-API的笔记，更多的是从方法着手，少对类的整体情况进行说明，故并不详尽，可供大家参考。 如果文中阐述不全或不对的，多多交流。
BERT源码分析PART I
热门推荐
Kaiyuan_sjtu的博客
05-16 2万+
写在前面 BERT模型也出来很久了， 之前有看过论文和一些博客对其做了解读：NLP大杀器BERT模型解读，但是一直没有细致地去看源码具体实现。最近有用到就抽时间来仔细看看记录下来，和大家一起讨论。 注意，本系列阅读需要提前对NLP相关知识有所了解，比如attention机制、transformer框架以及python和tensorflow基础等，关于BERT的原理不是本文的重点。 附上关于BERT...
小栗子2.9.3框架.zip
09-11
小栗子2.9.3框架是一个用于构建QQ机器人的免费框架，它的核心目标是为开发者提供一个便捷、高效且易用的平台，以便于创建和管理各种QQ聊天机器人。这个框架的出现使得非专业程序员也能轻松涉足机器人开发领域，通过...
SSH框架整合源码（包含CRUD小栗子）.rar
06-15
总结来说，这个SSH框架整合的源码示例是理解Java Web开发中SSH集成的关键。通过学习这个例子，开发者可以了解如何将Spring、Struts2和Hibernate协同工作，实现一个完整的业务流程，同时掌握CRUD操作的具体实现。对于...
小栗子多Q3.6.0.zip
09-01
1：群聊消息数据、私聊消息数据内存缓存时长缩减至两分钟，进一步降低框架高压下的功耗和内存占用 2：内置浏览器已支持下载蓝奏云的txt格式文件 3：自动清理七天前的log文件 4：修复框架二次登录数据失效后，自动重...
React PDF Annotation plugin library online API examples
最新发布
WCX_joker的博客
04-03 566
The API includes ① Export edited PDF data; ② Export annotations json data; ③ Reload old annotations; ④ Change files; ⑤ Set member info; ⑥ Clear annotations and other data processing functions
elementui的默认样式修改
cxsj999的博客
03-31 248
可是我想让提示的位置到下面来，该怎么办？最后还是看了官方的api。原来有个自定义样式属性。
20250331-vue-组件事件1触发与监听事件
xiezhuangshunv的博客
03-31 382
和原生DOM事件不一样，组件触发的时间没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。像组件与 prop 一样，事件的名字也提供了自动的格式转换。像3中的代码也可以这样写。父组件代码不变，子组件代码如下。这样点击效果就只会出现一次。
《无人茶室系统核心技术解析：从0到1打造高效智能管理平台》
weixin_62330360的博客
04-01 608
本文深入解析了无人茶室系统的核心技术，涵盖Spring Boot 后台、uni-app 用户端、Vue 管理后台的完整开发流程，并探讨了性能优化方案。你是否在开发类似项目时遇到挑战？欢迎在评论区交流你的经验！📌推荐阅读Spring Boot 官方文档MyBatis-Plus 官方文档uni-app 官方文档。
小栗子源码2.9.3版本发布
资源摘要信息:"小栗子源码_*.*.*.*.zip" 根据提供的信息，此压缩包中包含的文件应与"小栗子"项目的源码有关，版本号为*.*.*.*。"小栗子"很可能是一个软件产品的名称，而源码则指的是该软件项目最原始的代码文件。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值