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

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

断点续传怎么做的

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

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

  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 内部会自动为你处理数据的绑定和更新。这种方式简化了开发过程,使得开发者可以更方便地处理数据的变化和用户输入。

相关文章
|
1天前
|
机器学习/深度学习 数据挖掘 开发工具
2024年最全0基础学python开发工具及学习平台推荐_python平台a,面试阿里巴巴客服
2024年最全0基础学python开发工具及学习平台推荐_python平台a,面试阿里巴巴客服
2024年最全0基础学python开发工具及学习平台推荐_python平台a,面试阿里巴巴客服
|
1天前
|
Java 程序员 C语言
2024年Python最新【Python学习教程】Python类和对象_python中类和对象的讲解,Python最新面试题
2024年Python最新【Python学习教程】Python类和对象_python中类和对象的讲解,Python最新面试题
2024年Python最新【Python学习教程】Python类和对象_python中类和对象的讲解,Python最新面试题
|
2天前
|
前端开发 JavaScript
从零开始学习前端开发
前端开发是一门非常受欢迎的技术,它可以让我们在网页上展示出美观、交互式的内容。但是对于初学者来说,前端开发可能是一门比较难入手的技术。本文将会从基础概念开始介绍前端开发,并深入了解HTML、CSS和JavaScript的使用及其应用。
|
4天前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
|
4天前
|
移动开发 前端开发 JavaScript
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
|
4天前
|
前端开发 JavaScript 中间件
Vue3整合VxeTable,2024大厂前端面试
Vue3整合VxeTable,2024大厂前端面试
|
4天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
4天前
|
前端开发 JavaScript 程序员
async-validator 源码学习(一):文档翻译,2024年最新如何面试大厂
async-validator 源码学习(一):文档翻译,2024年最新如何面试大厂
|
4天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战