No117.精选前端面试题,享受每天的挑战和学习

在这里插入图片描述

文章目录

    • 断点续传怎么做的
    • 秒传怎么实现
    • var let const 块级作用域
    • ts Partial Omit 怎么实现的
    • 箭头函数有哪些限制
    • 箭头函数为什么不能作为构造函数
    • promise常用api
    • Map和Object的区别
    • vue怎么实现双向绑定

断点续传怎么做的

断点续传是指在文件下载或上传过程中,当连接断开后能够恢复之前的下载或上传进度,而不需要重新开始。

在实现断点续传时,可以遵循以下步骤:

在这里插入图片描述

  1. 在客户端与服务器之间建立连接后,发送一个 HTTP 请求,并添加 Range 头部Range 头部指定了当前请求的数据范围。服务器根据这个范围来返回相应的数据。例如,Range: bytes=100- 表示从文件的 100 字节开始进行断点续传。

  2. 服务器接收到具有 Range 头部的请求后,会根据请求中指定的范围来读取相应的数据块。然后将这些数据块以及相应的 Content-Range 头部发送给客户端。Content-Range 头部指示了服务器发送回的数据块的范围。例如,Content-Range: bytes 100-199/2000 表示服务器返回的是文件的第 100 到 199 字节的数据,而整个文件的大小是 2000 字节。

  3. 客户端接收到数据块后,将其存储在本地。可以使用文件流或者分片方式将接收到的数据追加到本地文件中,即可实现断点续传。

  4. 当连接中断后,客户端再次发起一个具有 Range 头部的请求,使用之前获取的断点位置。服务器接收到请求后,读取相应的数据块并返回给客户端。客户端继续接收数据块并追加到本地文件中。

通过重复执行上述步骤,客户端可以在连接断开和恢复后实现文件的断点续传。

需要注意的是,实现断点续传的具体步骤可能因使用的技术和编程语言而有所不同。例如,在使用 JavaScript 的前端开发中,可以通过 XHRFetch API 发起带有 Range 头部的请求,并处理响应数据的逻辑。而在后端开发中,可能需要根据具体的框架和服务器技术来处理断点续传的逻辑。具体的实现方式会因使用的技术而有所不同。

秒传怎么实现

秒传是一种文件传输的优化方式,它利用文件的哈希值(通常是MD5)来判断是否已经存在相同的文件,从而实现快速传输。我们可以通过以下步骤来实现秒传功能:

  1. 前端生成文件哈希值:使用JavaScript库如SparkMD5CryptoJS,在客户端计算文件的哈希值。这可以通过读取文件内容,将其转换为字节数组,并使用哈希算法计算出哈希值。

  2. 将哈希值发送到服务器:将计算得到的哈希值发送到服务器,与已有的哈希值进行比对。

  3. 服务器检查哈希值:服务器接收到哈希值后,检查是否已经存在该哈希值对应的文件。可以在服务器端的数据库中进行查询。

  4. 服务器响应:如果服务器检查到已存在相同的文件,可以返回一个特定的响应,告知客户端无需再次上传。

  5. 客户端处理响应:客户端接收到服务器的响应后,可以根据响应进行不同的操作。如果服务器返回无需上传的消息,客户端可以选择中止上传;如果服务器返回需要上传的消息,客户端则继续上传文件。

需要注意的是,秒传功能的实现还需考虑到文件的完整性校验、并发上传等方面。这些细节的处理可以根据实际需求进行优化和扩展。

在这里插入图片描述

var let const 块级作用域

var, let, 和 const 都是用于声明变量的关键字,但它们在作用域和赋值方面有些不同。

var:使用 var 声明的变量具有函数作用域(function scope),它们被视为函数内部的局部变量。这意味着在函数内部声明的变量可以在整个函数范围内访问。

let:let 关键字引入了块级作用域(block scope)。块级作用域指的是由一对花括号 {} 包裹的代码块,例如在 if 语句、循环语句或函数中的代码块。在块级作用域内部声明的变量只能在该块级作用域内访问,它们不会受外部作用域的影响。

const:const 关键字也引入了块级作用域,但用于声明常量(constant)。声明的常量是只读的,一旦声明并赋值后,其值不能再被修改。

ts Partial Omit 怎么实现的

PartialOmit 是 TypeScript 中的两个内置类型工具。

  • Partial 用于将一个对象中的所有属性变为可选的。它可以方便地创建一个包含部分属性的对象。

  • Omit 用于从一个类型中排除指定的属性。它可以创建一个新类型,该类型排除了指定属性,而保留了其他属性。

在 TypeScript 中,这两个类型工具的实现都基于了索引类型和映射类型。

这是一个简化的 Partial 的实现:

type Partial<T> = {[P in keyof T]?: T[P];
};

它使用了映射类型的语法,通过遍历泛型类型 T 的所有属性 P,将其设置为可选属性 ?,从而实现了 Partial 类型。

下面是一个简化的 Omit 的实现:

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

它使用了两个内置类型工具:PickExclude

Pick 从一个类型中选取指定的属性,而 Exclude 用于从一个联合类型中排除指定类型。

Omit 的实现中,它首先使用 keyof T 获取 T 的所有属性,然后使用 Exclude 将指定的属性 K 从中排除,从而得到一个新的类型。

注意,以上是对 PartialOmit 的简化实现,实际上这两个类型工具考虑了更多复杂的情况和使用方式。但这个简化实现可以帮助你理解它们的基本思想和原理。

箭头函数有哪些限制

箭头函数在某些情况下有一些限制,主要包括以下几点:

  1. 没有自己的 this:箭头函数没有自己的 this,它继承了外层作用域的 this 值。这意味着在箭头函数中无法使用 this 关键字来引用函数自身的对象。

  2. 不能用作构造函数:由于箭头函数没有自己的 this,它不能用作构造函数进行实例化。尝试使用 new 关键字调用一个箭头函数会抛出错误。

  3. 没有 arguments 对象:箭头函数没有自己的 arguments 对象。在箭头函数中使用 arguments 关键字将引用外层函数的 arguments 对象。

  4. 不能用作生成器函数:箭头函数不支持生成器(generator)语法。生成器函数使用 function* 声明,并且具有 yield 关键字来控制执行流程。

  5. 没有 prototype 属性:箭头函数没有 prototype 属性,因此无法用来定义原型方法。

这些限制是由箭头函数的设计和用途决定的。箭头函数更适合于无需使用 thisarguments、构造函数或生成器的简单函数场景。如果需要使用这些功能,应选择普通的函数表达式或函数声明。

箭头函数为什么不能作为构造函数

箭头函数不能用作构造函数的原因是箭头函数没有自己的 this。与普通函数不同,箭头函数继承了外层作用域的 this 值。这意味着无法在箭头函数内部使用 new 关键字来实例化一个对象。

在构造函数中,this 关键字指向新创建的对象实例。构造函数使用 new 关键字调用时,会创建一个空的对象,并将该对象的原型链指向构造函数的原型(即构造函数的 prototype)。然后,构造函数内部的代码会执行,可以在其中使用 this 关键字来操作当前的实例对象。

由于箭头函数继承了外层作用域的 this 值,它们没有自己的 this 绑定。在箭头函数中使用 this 关键字会引用外层函数或全局作用域的 this 值,而不是创建新的实例对象。因此,使用箭头函数作为构造函数调用会导致 this 指向错误或 undefined。

如果需要使用构造函数来创建实例对象,应该使用普通的函数表达式或函数声明,并使用 new 关键字调用。这样可以确保正确地绑定 this 值,并创建新的实例对象。

promise常用api

Promise 是 JavaScript 中处理异步操作的对象,它提供了一些常用的 API 来处理异步任务的执行和结果。以下是一些常用的 Promise API:

  1. Promise.resolve(value):将一个值或一个已解析的 Promise 对象作为参数,返回一个以给定值解析的 Promise 对象。

  2. Promise.reject(reason):返回一个带有拒绝原因的 Promise 对象。

  3. Promise.all(iterable):接收一个可迭代对象(比如数组),返回一个 Promise 对象,该 Promise 对象在所有输入的 Promise 对象都变为 fulfilled 时才变为 fulfilled,或者任意一个输入的 Promise 对象变为 rejected 时变为 rejected

  4. Promise.race(iterable):接收一个可迭代对象(比如数组),返回一个 Promise 对象,该 Promise 对象在可迭代对象中的任意一个 Promise 对象解决或拒绝时,相应地解决或拒绝,而不是等待所有 Promise 对象。

  5. Promise.allSettled(iterable):接收一个可迭代对象(比如数组),返回一个 Promise 对象,该 Promise 对象在所有输入的 Promise 对象都已解决或拒绝后进入 resolved 状态,并提供每个 Promise 对象的结果。

  6. Promise.prototype.catch(onRejected):添加一个拒绝处理程序到当前 Promise 对象,并返回一个新的 Promise 对象。

  7. Promise.prototype.then(onFulfilled, onRejected):添加一个解决处理程序和一个拒绝处理程序到当前 Promise 对象,并返回一个新的 Promise 对象。

  8. Promise.prototype.finally(onFinally):添加一个最终处理程序到当前 Promise 对象,在 Promise 对象变为 resolved 或 rejected 状态时都会被调用。

这些是 Promise 的一些常用 API,它们可以用于处理异步操作的状态和结果。通过使用这些 API,我们可以更便捷地编写和处理异步任务。

Map和Object的区别

Map 和 Object 是 JavaScript 中两种常见的数据结构,它们在一些方面是相似的,但也有一些重要的区别。

  1. 键的类型:在 Object 中,键只能是字符串或者 Symbol 类型。而在 Map 中,键可以是任意类型的值,包括原始数据类型和对象引用

  2. 键的顺序:Map 会按照插入顺序来保存键值对,这意味着可以迭代 Map 时按照插入顺序来获取键值对。而 Object 中的键值对没有固定的顺序

  3. 大小的获取:Map 提供了 size 属性来获取键值对的数量。而 Object 中没有直接获取键值对数量的方法,需要通过自己的逻辑来计算。

  4. 遍历的方式:Map 提供了多种遍历方式,例如 for...of、forEach、keys、values 和 entries。而 Object 只能通过 for…in 来遍历键值对。

  5. 继承和原型链:Object 是基于原型链的,它的原型链中会包含一些默认的方法和属性。而 Map 不会继承任何原型链,它只包含 Map 自身提供的方法和属性

  6. 引用类型的键:在 Object 中,当使用引用类型(如对象或数组)作为键时,会将其转换为字符串作为键。而在 Map 中,引用类型的键会保持其原始类型

  7. 性能和内存消耗:在小规模数据时,Object 的性能可能会更好。而在大规模数据时,Map 的性能可能更好。此外,Map 相对于 Object 会占用更多的内存空间

总而言之,Map 适用于需要保持键值对顺序和使用其他类型作为键的情况。而 Object 适用于简单的键值对存储和基本的数据结构。根据具体的需求,可以选择使用适合的数据结构。

vue怎么实现双向绑定

在 Vue 中,实现双向绑定可以通过使用 v-model 指令来实现。v-model 可以将表单输入元素和 Vue 实例的数据进行绑定,使得数据的变化能够自动反映到输入元素上,同时用户的输入也能够自动同步到 Vue 实例的数据中。

下面是一个简单的例子来展示如何在 Vue 中实现双向绑定:

HTML:

<div id="app"><input type="text" v-model="message"><p>输入的内容:{{ message }}</p>
</div>

JavaScript:

new Vue({el: "#app",data: {message: ""}
});

在上面的例子中,使用 v-model="message" 将输入框和 Vue 实例的 message 数据进行了双向绑定。当用户输入内容时,输入框中的值会自动更新为用户输入的内容,并且 Vue 实例中的 message 数据也会更新为用户输入的内容。同时,{{ message }} 中展示的内容也会自动更新为 message 的最新值。

通过 v-model 可以实现双向绑定,而 Vue 内部会自动为你处理数据的绑定和更新。这种方式简化了开发过程,使得开发者可以更方便地处理数据的变化和用户输入。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/1618490.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【微信小程序遇到的坑】实现跨行跨列的表格

由于微信小程序组件中不带table标签&#xff0c;所以只能自己制作一个table表格&#xff0c;并且是实现跨行跨列的复杂表格。 直接上代码&#xff0c;即可预览效果 wxml <view class"table"><view class"tr tr_title">上午8:30-11:45</vi…

50.服务程序SERVICE_STATUS、SERVICE_STATUS_HANDLE、RegisterServiceCtrlHandler、SetServiceStatus、SERVICE_TABL

我得先总结一下步骤&#xff1a; 一、在main函数中的操作 1.先创建一个main主函数&#xff0c;在main主函数中创建创建一个服务程序入口函数列的结构体并将其初始化 机构体SERVICE_TABLE_ENTRY DispatchTable[2]; 假设定义的服务入口函数是(LPSERVICE_MAIN_FUNCTION)ServiceMa…

使用 SAP WebIDE 将 SAP UI5 应用部署到 ABAP 系统时遇到的关于传输请求的错误

有朋友遇到一个在 webide 里部署 SAP UI5 应用到 ABAP Repository 里时出错的问题&#xff1a; 错误消息&#xff1a; Failed to get transports for the selected package. Request POST /webidedispatcher/destinations/LND500/sap/bc/adt/cts/transportchecks failed: Forbi…

【操作记录】CLion 中引入 Gurobi 并使用 C++ 编程

文章目录 一、前言二、具体操作2.1 创建项目2.2 修改编译工具2.3 修改 CMakeLists.txt2.4 修改 main.cpp2.5 运行测试 一、前言 虽然C编程大部分人都会选择使用VS&#xff0c;但是作为 IDEA 的长期用户&#xff0c;我还是比较习惯 JetBrains 风格的编译器&#xff0c;所以就选…

7.11英语学习及笔记

《花木兰》 Based on a Chinese legend, the film follows the story of the titular hero – a young woman who poses as a man in order to take her ailing father’s place in the Imperial army, after the threat of the invading Huns requires a man from every house…

针对韩国开展的一系列韩文类恶意文档定向攻击行动分析 part-1

?点个关注&#xff0c;你的支持是我更新最大的动力? 最近朝鲜APT组织的攻击事件层出不穷&#xff0c;基于看到一篇很好的文章&#xff0c;特此结合文章对朝鲜相关组织进行分析。 Financial Security Institute对近期一系列投放韩文类恶意文档的定向攻击行动命名为“DOKKAEBI…

跨国邮件诈骗团伙案例

如果某天你收到了这样一封邮件&#xff0c;啊&#xff0c;大体意思就是这人身患绝症且有一笔遗产&#xff0c;你是个幸运儿要你继承。 重点来了啊&#xff0c;他会伪造证件然后让你相信并按照对方的思路来&#xff0c;给他你的身份信息&#xff0c;例如身份证照片&#xff0c;你…

springboot+vue+Elementui图书馆自习室座位预约系统

随着学校的人数的扩招,图书馆的座位资源短缺问题日益严重&#xff0c;特别是在临近考试时&#xff0c;座位占座情况尤为明显。起大早、摞书本、放水杯&#xff0c;甚至粘上纸条……宣誓主权&#xff0c;在图书馆里&#xff0c;很多学生办法用尽&#xff0c;只为了能获得“一席之…

SQLite3 极简教程 Go 使用 SQLite 内存模式操作数据结构

SQLite 简介 关键词: RDBMS (embedded), C SQLite is a database engine written in the C language. It is not a standalone app; rather, it is a library that software developers embed in their apps. SQLite是一个开源的、内嵌式的关系型数据库。它最初发布于2000年,…

致--所有努力生活的人们(暑假学习总结与考研宣誓)

致--所有努力生活的人们 确定专业和院校科研任务关于英语的学习退游喜欢的女孩备战数模比赛学习智能算法计算机素养的锻炼basketball对未来的展望 虽然文章写的虽然不是很好&#xff0c;但是很用心有诚意&#xff0c;我保证读完你会充满慢慢能量的&#xff01; 本blog记录了暑假…

有书共读:《穷查理宝典》

1. 写在前面 最近有幸参加了Datawhale举办的一些读书会活动&#xff0c;里面有很多伙伴分享自己读过的一些好书并分享自己的读书心得和感悟&#xff0c;体会非常的深刻&#xff0c; 也学习到了很多的知识&#xff0c; 所以受到了一些伙伴的影响&#xff0c;最近也开始在闲暇的…

以“人民的名义”劝你快去读点书

“我之前看一个调查&#xff0c;说中国人的读书量远低于世界平均水平&#xff1b;而且趋于图片化、碎片化&#xff0c;缺乏深度。这年头&#xff0c;你们还有个读书会&#xff0c;算是难得了”&#xff0c;陆亦可对赵东来说。“而且我们读的还是闲书&#xff0c;没有任何经济利…

第三讲,三维空间刚体运动

一个刚体在三维空间中的运动是如何描述的。我们当然知道这由一次旋转加一次平移组成。平移确实没有太大问题&#xff0c;但旋转的处理是件麻烦事。我们将介绍旋转矩阵、四 元数、欧拉角的意义&#xff0c;以及它们是如何运算和转换的。 1.向量&#xff0c;坐标系和旋转矩阵 点…

两独立样本的非参数检验(Mann-Whitney U 秩和检验)

原文地址&#xff1a;SPSS学习笔记之——两独立样本的非参数检验&#xff08;Mann-Whitney U 秩和检验&#xff09;作者&#xff1a;王江源 一、概述 Mann-Whitney U 检验是用得最广泛的两独立样本秩和检验方法。简单的说&#xff0c;该检验是与独立样本t检验相对应的方法&…

不止基因编辑 当所有技术都可能成为毒药

基因技术、纳米技术、机器人技术的新潘多拉之盒即将开启&#xff0c;你我却毫无查觉。我们不单受到大规模杀伤性武器的威胁&#xff0c;还有技术知识产生的大规模杀伤力。这一邪恶的力量&#xff0c;正由国家力量支持的大规模杀伤性武器&#xff0c;转向极端的个人。——Bill J…

市场的霸主:对冲基金世界的超额回报大师

《市场的霸主&#xff1a;对冲基金世界的超额回报大师》 基本信息 作者&#xff1a; (美)马妮特.阿胡贾(Maneet Ahuja) 译者&#xff1a; 毕崇毅 郑磊 出版社&#xff1a;机械工业出版社 ISBN&#xff1a;9787111425441 上架时间&#xff1a;2013-5-29 出版日期&#xff1a;201…

革命性新疗法后 第三例艾滋病治愈病例可能出现了!

伦敦病人的例子说明&#xff0c;柏林病人被治愈并非出于侥幸&#xff0c;而是可以被复制的。 艾滋病患者通常要终身每日服用病毒抑制药物。一旦停药&#xff0c;病毒就会在两三周内卷土重来。 新浪科技讯 北京时间3月12日消息&#xff0c;据国外媒体报道&#xff0c;一名德国艾…

SPSS学习笔记(三)方差分析ANOVA(F检验)

目录 一、单因素ANOVA 分析 过程 结果及分析 二、双因素ANOVA 案例及分析 过程 结果及分析 一、单因素ANOVA 单因素方差分析是两个样本平均数比较的引伸&#xff0c;它是用来检验多个平均数之间的差异&#xff0c;从而确定一种因素对试验结果有无显著性影响的统计方法…

JavaSE学习——异常

目录 一、异常概述 二、异常的体系结果 二、异常的处理&#xff1a;抓抛模型 三、try-catch-finally的使用 四、throws 异常类型 的使用 五、开发中如何选择使用try-catch-finally还是使用throws&#xff1f; 六、自定义异常 自定义异常步骤&#xff1a; 七、总结&a…

CAN总线学习——物理层、数据链路层、CANopen协议

1、CAN总线介绍 1.1、CAN总线描述 (1)CAN总线支持多节点通信&#xff0c;但是节点不分区主从&#xff0c;也就是不存在一个节点来负责维护总线的通信&#xff1b;这点可以和I2C总线对对比&#xff0c;I2C是一主多从模式&#xff1b; (2)是差分、异步、串行总线&#xff0c;采用…