当前位置: 首页 > news >正文

前端面试编程题(异步调度,Promise实现、占用空间大小、渲染虚拟节点、实现for of)

目录

异步调度问题

题目一

答案

题目二

 答案

递归输出

题目一

 答案

Promise相关

题目一

答案

占用空间大小

题目一

答案

渲染虚拟节点

题目一

答案

实现for of

题目一

答案

 


异步调度问题

题目一

1.实现一个带并发限制的异步调度Scheduler,保证同时运行的任务最多有N个。完善下面代码中的Scheduler类,使以下程序能正确输出

class Scheduler {add(promiseCreator) {}
}
const timeout = (time) => new Promise(resolve => {setTimeout(resolve, time)
})
const scheduler = new Scheduler(3)
const addTask = (time, order) => {scheduler.add(() => timeout(time)).then(() => console.log(order))
}
addTask(1000, 'a')
addTask(500, 'b')
addTask(100, 'c')
addTask(2000, 'd')
addTask(10, 'f')

答案

方法一

class Schdule {constructor(n) {this.max = maxthis.count = 0this.queue = []}async add(promiseCreator) {if (this.count >= this.max) {await new Promise((resolve, reject) => this.queue.push(resolve))}this.count++;let res = await promiseCreator()this.count--;if (this.queue.length) {this.queue.shift()()}return res}
}

方法二 

class Schdule {constructor(n) {this.max = maxthis.count = 0this.queue = []}add(promiseCreator) {return new Promise(resolve => {promiseCreator.resolve = resolve; // 保存当前promise的状态if (this.count < this.max) { // 最大并发任务处理this.runWork(promiseCreator)} else {this.queue.push(promiseCreator)}})}runWork(promiseCreator) {this.count++promiseCreator().then(() => {promiseCreator.resolve()this.count--if (this.queue.length) {this.runWork(this.queue.shift())}})}
}

题目二

实现一个带并发限制的异步调度PromiseQueue,保证同时运行的任务最多有N个且按优先级运行任务。完善下面代码中的PromiseQueue类,使以下程序能正确输出

link1start
link2start
link3start
link2end
high prioritystart
link1end
link5start
link3end  
link4start
high priorityend
link4end
link5end

const urls = [{info: 'link1',time: 3000,priority: 1}, {info: 'link2',time: 2000,priority: 2}, {info: 'link3',time: 3000,priority: 3}, {info: 'link4',time: 2000,priority: 2}, {info: 'link5',time: 5000,priority: 5}
]
function loadImg(url) {return new Promise((resolve, reject) => {console.log(url.info + 'start')setTimeout(() => {console.log(url.info + 'end')resolve()}, url.time)})
}
class PromiseQueue {}
const q = new PromiseQueue({concurrency: 3
})
const formatTask = (url) => {return {fn: () => loadImg(url),priority: url.priority}
}
urls.forEach(url => {q.add(formatTask(url))
})
const highPriorityTask = {priority: 10,info: 'high priority',time: 2000
}
q.add(formatTask(highPriorityTask))

 答案

class PromiseQueue {constructor(options = {}) {this.concurrency = options.concurrency || 1;this.currentCount = 0this.pendingList = []}add(task) {this.pendingList.push(task)this.run()}run() {if (this.pendingList.length === 0) {return;}if (this.concurrency === this.currentCount) {return;}this.currentCount++const { fn } = this.pendingList.sort((a, b) => b.priority - a.priority).shift()fn().then(this.completeOne.bind(this)).catch(this.completeOne.bind(this))}completeOne() {this.currentCount--this.run()}
}

递归输出

题目一

实现compose函数使下面的代码输出顺序为1,2,3,3.3,2.2,1.1 。

let middleware = []
middleware.push((next)=>{console.log(1)next()console.log(1.1)
})
middleware.push((next)=>{console.log(2)next()console.log(2.2)
})
middleware.push((next)=>{console.log(3)next()console.log(3.3)
})
let fn = compose(middleware)
fn()

这里观察输出1后执行next,然后输出2,执行next在到3,然后3.3,回到2.2,再回到1.1,这里明显为一个递归调用,传入的参数next为递归的函数,每次调用便会执行下一个函数。 

 答案

function compose(...args){let index = 0;return function fn() {if(args[0].length<=index){return;}return args[0][index++](fn)}
}
function compose(middlewares) {const copyMidlewares = [...middlewares];let index = 0const fn = () => {if (index >= copyMidlewares.length) {return ;}const middlewares = copyMidlewares[index];index++;return middlewares(fn)}return fn;
}

Promise相关

题目一

编写Promise.all和Promise.race方法。

答案

Promise.all = (arr) => {if (!Array.isArray(arr)) {return;}let counter = 0;let result = []return new Promise((resolve, reject) => {arr.forEach((item, index) => {Promise.resolve(item).then(value => {result[index] = value;counter++;if (counter === arr.length) {resolve(result);}}).catch(err => {reject(err)})})});
}
Promise.rRace = function (arr) {if (!Array.isArray(arr)) {return;}return new Promise((resolve, reject) => {arr.forEach(v => {Promise.resolve(v).then(value=>{resolve(value)}).catch(err => reject(err))})})
}

占用空间大小

题目一

1.计算一个变量占用的字节数(string占2字节,boolean占4字节,number占8字节)

注意

1.对象的属性值也占用字

2.相同的引用只能算一次

答案

const set = new Set()
function sizeOfObject(object) {if (object == null) {return 0}let bytes = 0;const properties = Object.keys(object)for (let i = 0; i < properties.length; i++) {const key = properties[i]if (typeof object[key] === 'object' && object[key] !== null) {if (set.has(object[key])) {bytes += calculator(key)continue}set.add(object[key])}bytes += calculator(key)bytes += calculator(object[key])}return bytes
}
function calculator(object) {switch (typeof object) {case 'string': {return object.length * 2}case 'boolean': {return 4}case 'number': {return 8}case 'object': {if (Array.isArray(object)) {return object.map(calculator).reduce((res, current) => res + current, 0)}return sizeOfObject(object)}}
}

渲染虚拟节点

题目一

1.将如下数据格式的虚拟dom为真实dom

const vnode = {tag: 'DIV',attrs: {id: 'app'},children: [{tag: 'SPAN',children: [{tag: 'A',children: []}]},{tag:'SPAN',children:[{tag:'A',children:[]},{tag:'',children:[]}]}]
}

答案

function render(vnode){if(typeof vnode === 'number'){vnode = String(vnode)}if(typeof vnode=== 'string'){return document.createTextNode(vnode);}const  element = document.createElement(vnode.tag);if(vnode.attrs){Object.keys(vnode.attrs).forEach(key=>{element.setAttribute(key,vnode.attrs[key])})}if(vnode.children.length){vnode.children.forEach(v=>{element.appendChild(render(v))})}return element
}

实现for of

题目一

如何使对象实现for of。

答案

方法一

obj[Symbol.iterator]=function(){const _this = this//也可使用: keys = Object.getOwnPropertyNames(this)const keys = Object.keys(this)let index = 0return {next(){return {value: _this[keys[index++]],done: index>keys.length}}}
}

方法二

obj[Symbol.iterator] = function *(){for(let prop in this){yield this[prop]}
}

 

相关文章:

前端面试编程题(异步调度,Promise实现、占用空间大小、渲染虚拟节点、实现for of)

目录 异步调度问题 题目一 答案 题目二 答案 递归输出 题目一 答案 Promise相关 题目一 答案 占用空间大小 题目一 答案 渲染虚拟节点 题目一 答案 实现for of 题目一 答案 异步调度问题 题目一 1.实现一个带并发限制的异步调度Scheduler&#xff0c;保证同…...

复旦团队发布国内首个模型MOSS 类ChatGPT

复旦团队发布国内首个模型MOSS 类ChatGPT 首先看到这个标题&#xff0c;还有这个名字&#xff0c;我是正经&#xff08;zhen jing&#xff09;的 &#xff08;bu shi 流浪地球&#xff1f;550W&#xff1f;不了解的可以把550W倒过来写&#xff0c;就懂了 看到新闻里的一些图…...

5.35 综合案例2.0 -称重数据上传云端

综合案例2.0 - 称重数据上传云端案例说明连线功能实现1.阿里云平台连接代码应用开发3.1新建‘普通项目’3.2关联产品和设备3.3新建‘移动应用’3.4添加组件3.5配置组件信息3.6保存预览案例说明 使用hx711串口模块称重,结合IOT studio制作手机APP远程控制并采集物体重量。 hx7…...

如何让人机对话更自然?

来源&#xff1a;投稿 作者&#xff1a;顾相欢 编辑&#xff1a;学姐 AAAI-2022|定制对话的人设和知识背景 原文标题&#xff1a; Call for Customized Conversation: Customized Conversation Grounding Persona and Knowledge 原文链接&#xff1a; https://arxiv.org/ab…...

Python每日一练(20230224)

目录 1. 列表奇偶拆分 ★ 2. 二叉树的后序遍历 ★★ 3. 接雨水 ★★★ 附录 二叉树 特点 性质 特殊二叉树 满二叉树 完全二叉树 完全二叉树性质 二叉树的遍历 1. 列表奇偶拆分 【问题描述】 输入一个列表&#xff0c;包含若干个整数&#xff08;允许为空&#xff…...

【Linux】-- Shell的运行原理、Linux当中的权限

目录 Shell的运行原理 Linux权限的概念 su命令 权限 文件访问权限的相关设置方法 chmod指令 chown指令 chgrp指令 sudo命令 文件的常见问题 umask 粘滞位 关于权限的总结 Shell的运行原理 Shell运行原理 —— 外壳程序。 Linux严格意义上说的是一个操作系统&…...

MOS管选型参数:VGS(th)

MOS管选型参数&#xff1a;VGS(th) VGS&#xff08;th&#xff09;&#xff1a;开启电压&#xff08;阀值电压&#xff09;。当外加栅极控制电压 VGS 超过 VGS&#xff08;th&#xff09; 时&#xff0c;漏区和源区的表面反型层形成了连接的沟道。应用中&#xff0c;常将漏极短…...

二.线性表之顺序表

文章目录前言一.顺序表的概念及结构二.顺序表的接口实现1.顺序表的动态存储2.顺序表的初始化3.顺序表尾插#封装&#xff1a;扩容函数4.顺序表尾删5.顺序表头插6.顺序表头删7.顺序表查找8.顺序表在pos位置插入x9.顺序表删除pos位置的值10.顺序表销毁11.顺序表打印三.源1.Seqlist…...

ElasticSearch - SpringBoot整合ElasticSearch实现文档的增删改

文章目录1. ElasticSearch和kibana的安装和配置2. SpringBoot 项目环境搭建3. 创建索引4. 索引文档5. 更新文档6. 删除文档https://www.elastic.co/guide/en/elasticsearch/reference/current/search-your-data.htmlhttps://www.elastic.co/guide/cn/elasticsearch/guide/curre…...

JavaScript 库

文章目录JavaScript 库JavaScript 框架&#xff08;库&#xff09;jQueryPrototypeMooTools其他框架CDN -内容分发网络引用 jQuery使用框架JavaScript 库 JavaScript 库 - jQuery、Prototype、MooTools。 JavaScript 框架&#xff08;库&#xff09; JavaScript 高级程序设计…...

云解析DNS为什么要配置默认线路?

传统解析技术不会判断访客IP&#xff0c;而是会随机选择一个IP返回给访问者&#xff0c;这样就有可能造成移动用户访问电信服务器IP&#xff0c;北京用户访问深圳服务器IP这种跨域跨网访问的情况&#xff0c;产生非常大的延迟&#xff0c;带来很不好的访问体验。 而云解析DNS会…...

Linux命令之awk

awk是一个有强大的文本格式化能力的linux命令&#xff0c;早期是在Unix上实现的&#xff0c;linux后来也可以使用了&#xff0c;我们在Linux上使用的awk是gawk&#xff08;GNU awk的意思&#xff09; 语法 awk [option] 模式{动作} file option表示awk的可选参数&#xff0c;可…...

实战-缓存数据一致+binlog初始+cannel监听+数据迁移,数据一致性架构设计

前言 一. 解决缓存不命中&#xff08;高并发操作击穿打挂DB的风险&#xff09; 当并发量打的时候&#xff0c;当我们的缓存过期时&#xff0c;就算到数据库的比例偏小的时候&#xff0c;我们的请求时比较大的。那也会存在数据库崩掉的情况。解决方案想法如下&#xff08;总体…...

nginx配置中proxy_pass反向代理502的bug

记录一个坑人的bug&#xff0c; 我今天在一台新的liunx上运行nginx来进行反向代理时候&#xff0c;发现怎么测都是502 我把配置全部删了从头开始配置&#xff0c;发现80端口正常&#xff0c;80端口index.html正常&#xff0c;反向代理转向http://127.0.0.1/也正常&#xff0c;…...

JavaScript 两种方案打开文件对话框

JavaScript 两种方案打开文件对话框 文章目录JavaScript 两种方案打开文件对话框一、文件对话框二、传统方案表单元素&#x1f308;三、文件系统访问API&#x1f4a6;四、更进一步使用六、代码仓库&#x1f310;七、参考资料&#x1f498;七、推荐博文&#x1f357;一、文件对话…...

Pycharm远程服务器常见问题

2023年02月23日 问题描述&#xff1a;Pycharm远程服务器跑代码时&#xff0c;不小心把Pycharm关掉了&#xff0c;但服务器代码还在运行&#xff1f; 解决办法&#xff1a;kill进程 先用watch -n 0.5 nvidia_smi查看进程&#xff0c;然后kill -9 <进程> 1、nvidia-smi…...

内容团队如何快速出稿

对于内容团队而言&#xff0c;每个内容选题就相当于一个小项目&#xff0c;它们并非简单的线性工作流&#xff0c;相反其复杂程度不亚于一个小型工厂。一个内容选题会涉及内容形式&#xff0c;选题类型等多个变量&#xff0c;这些变量因素组合起来就是十几种不同类型的工作流。…...

es-08索引的批量操作

索引的批量操作 批量查询和批量增删改 批量查询 GET /_mget#批量查询 GET product/_search GET /_mget {"docs": [{"_index": "product","_id": 2},{"_index": "product","_id": 3}] }GET product/_mge…...

诈金花的概率

游戏使用一副除去大小王的扑克牌&#xff0c;共4个花色52张牌。 1、豹子&#xff08;AAA最大&#xff0c;222最小&#xff09;。2、同花顺&#xff08;AKQ最大&#xff0c;A23最小&#xff09;。3、同花&#xff08;AKQ最大&#xff0c;352最小&#xff09;。4、顺子&#xff…...

ESP32设备驱动-MLX90393磁场传感器驱动

MLX90393磁场传感器驱动 文章目录 MLX90393磁场传感器驱动1、MLX90393介绍2、硬件准备3、软件准备4、驱动实现1、MLX90393介绍 MLX90393 磁场传感器可以在运行时重新编程为不同的模式和不同的设置。 该传感器使用 Melexis 专有的 Triaxis 技术提供与沿 XYZ 轴感应的磁通密度成…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...