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

news2024/9/24 17:13:31

在这里插入图片描述

文章目录

    • 断点续传怎么做的
    • 秒传怎么实现
    • 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://www.coloradmin.cn/o/935479.html

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

相关文章

ForexClub七夕交易大赛启动! 点燃交易之火为爱而战!

在这个充满激情的七夕季&#xff0c;ForexClub与您携手&#xff0c;掀起交易狂潮!点燃您心中的交易热忱&#xff0c;冲锋市场&#xff0c;赢取惊人奖金!别等了&#xff0c;参赛即有机会获得77美元的交易赠金&#xff0c;让我们一同为迸发的交易机会&#xff0c;燃烧一片天! 【大…

直流无刷电机工作原理及有感方波控制

BLDC方波控制 BLDC工作原理BLDC换向驱动过程有感控制模式 BLDC工作原理 首先要知道&#xff0c;BLDC转起来是基于什么原理 BLDC包括定子&#xff08;线圈&#xff09;和转子&#xff08;永磁体&#xff09;&#xff0c;线圈要通电&#xff0c;通电的线圈具有磁场&#xff0c;该…

基于寄生捕食算法优化的BP神经网络(预测应用) - 附代码

基于寄生捕食算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于寄生捕食算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.寄生捕食优化BP神经网络2.1 BP神经网络参数设置2.2 寄生捕食算法应用 4.测试结果&#xff1a;5…

01.基于自定义MVC架构的用户登录与首页展示实现 — OA项目实践

目录 本章节目标&#xff1a;完成OA项目用户登录及首页展示 一.用户登录 User.java UserDao.java IUserDao.java UserAction.java login.jsp&#xff08;登录界面&#xff09; userManage.jsp (数据绑定&#xff0c;修改&#xff0c;删除) userEdit.jsp&#xff08;用…

windows wvp-gb28181-pro一键安装的脚本流程

流程图 【金山文档】 windows wvp安装脚本流程https://kdocs.cn/l/cataPonNMXNm

信息系统项目管理师(第四版)教材精读思维导图-第四章信息系统管理

请参阅我的另一篇文章&#xff0c;综合介绍软考高项&#xff1a; 信息系统项目管理师&#xff08;软考高项&#xff09;备考总结_计算机技术与软件专业技术_铭记北宸的博客-CSDN博客 本章思维导图PDF格式 本章思维导图XMind源文件 目录 4.1 管理方法 4.2 管理要点 4.1 管理方…

linux并发服务器 —— Makefile与GDB调试(二)

Makefile Makefile&#xff1a;定义规则指定文件的编译顺序&#xff1b;类似shell脚本&#xff0c;执行操作系统命令 优点&#xff1a;自动化编译——通过make&#xff08;解释Makefile文件中指令的命令&#xff09;命令完全编译整个工程&#xff0c;提高软件开发效率&#x…

144. 二叉树的前序遍历-C++

题目来源&#xff1a;力扣 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[] 代码实现&#xff1a; class Solution { public:vector<int> preorderTraversal(TreeNo…

【Redis】Redis是什么、能干什么、主要功能和工作原理的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…

人员着装识别算法 yolo

人员着装识别系统通过yolo网络模型识别算法&#xff0c;人员着装识别系统算法通过现场安装的摄像头识别工厂人员及工地人员是否按要求穿戴着装&#xff0c;实时监测人员的着装情况&#xff0c;并进行相关预警。目标检测架构分为两种&#xff0c;一种是two-stage&#xff0c;一种…

帆软报表系统未授权重置授权

子曰&#xff1a;“父在观其志&#xff0c;父没观其行。三年无改于父之道&#xff0c;可谓孝矣。” 未授权重置授权 构造payload&#xff0c;访问漏洞url&#xff1a; /ReportServer?opfr_server&cmdsc_version_info&showtoolbarfalse漏洞证明&#xff1a; 文笔生…

提高企业会计效率,选择Manager for Mac(企业会计软件)

作为一家企业&#xff0c;良好的财务管理是保持业务运转的关键。而选择一款适合自己企业的会计软件&#xff0c;能够帮助提高会计效率、减少错误和节约时间。在众多的选择中&#xff0c;Manager for Mac(企业会计软件)是一款值得考虑的优秀软件。 首先&#xff0c;Manager for…

软考:中级软件设计师:大数据

软考&#xff1a;中级软件设计师:大数据 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备的 &#x…

QEMU 仿真RISC-V freeRTOS 程序

1. 安裝RISC-V 仿真環境 --QEMU 安裝包下載地址: https://www.qemu.org/ 安裝命令及安裝成功效果如下所示, target-list 設定爲riscv32-softmmu, $ cat ~/project/qemu-8.0.4/install.sh sudo apt-get install libglib2.0-dev sudo apt-get install libpixman-1-dev ./co…

STM32移植ST77891.69寸屏幕并移植lvgl8.0.2(按键输入设备)一些心得

学习目标: 将ST7789(1.69寸圆角屏SPI)驱动移植+lvgl移植+按键当作输入设备 学习内容: 驱动移植lvgl移植按键移植软件使用正片开始: 先说说这块屏幕的介绍呗 ST7789屏幕是一种高性能的液晶显示屏,它具有高清晰度、高亮度、低功耗等优点。它采用了SPI接口通信,可以实现快速…

Hive原理剖析

一、简介 Hive是建立在Hadoop上的数据仓库框架&#xff0c;提供大数据平台批处理计算能力&#xff0c;能够对结构化/半结构化数据进行批量分析汇总完成数据计算。提供类似SQL的Hive Query Language语言操作结构化数据&#xff0c;其基本原理是将HQL语言自动转换成MapReduce任务…

k3s初体验

概述 K3s 是轻量级的 Kubernetes。K3s 易于安装&#xff0c;仅需要 Kubernetes 内存的一半&#xff0c;所有组件都在一个小于 100 MB 的二进制文件中。 K3s 是 rancher 公司开发维护的一套 K8s 发行版。 目的是轻量化 K8s&#xff0c;并将其应用于 IoT 设备&#xff08;比如树…

信息系统项目管理师(第四版)教材精读思维导图-第五章信息系统工程

请参阅我的另一篇文章&#xff0c;综合介绍软考高项&#xff1a; 信息系统项目管理师&#xff08;软考高项&#xff09;备考总结_计算机技术与软件专业技术_铭记北宸的博客-CSDN博客 本章思维导图PDF格式 本章思维导图XMind源文件 5.1 软件工程 5.2 数据工程 5.3 系统集成 5.4 …

JVM第二篇 类加载子系统

JVM主要包含两个模块&#xff0c;类加载子系统和执行引擎&#xff0c;本篇博客将类加载子系统做一下梳理总结。 1.类加载子系统功能 2.类加载子系统执行过程 2.1 加载 解析class文件的常用工具

SpringCloud学习笔记(十二)_Zipkin全链路监控

Zipkin是SpringCloud官方推荐的一款分布式链路监控的组件&#xff0c;使用它我们可以得知每一个请求所经过的节点以及耗时等信息&#xff0c;并且它对代码无任何侵入&#xff0c;我们先来看一下Zipkin给我们提供的UI界面都是提供了哪些信息。 zipkin首页为我们提供了对于调用链…