前端面试题详解整理82|数组去重，apply,call,bind,双向绑定， 继承，防抖节流，浏览器缓存，浏览器输入 URL 过程，HTTP 和 HTTPS，

金色的雨570
90 阅读10分钟

pcg前端

1. 项目难点是什么 怎么解决
2. 3个看代码输出（作用域）
3. 数组去重
4.防抖 节流
5. 浏览器缓存
6.cookie localstorage区别
7.http和https

3. 数组去重

数组去重是指将数组中重复的元素去除，只保留唯一的元素。常见的数组去重方法有以下几种：

  • 使用 Set 数据结构：利用 Set 对象的特性，可以轻松实现数组去重，然后将 Set 转换回数组。

    const uniqueArray = [...new Set(array)];

  • 使用 filter() 方法：通过遍历数组，利用 indexOf() 方法判断当前元素在数组中第一次出现的位置与当前索引位置是否相等，若相等则表示该元素为唯一元素，然后将其添加到新数组中。

    const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);

  • 使用 reduce() 方法：通过遍历数组，利用 reduce() 方法将数组中的元素逐个添加到新数组中，但只添加第一次出现的元素。

    const uniqueArray = array.reduce((acc, cur) => {
    if (acc.indexOf(cur) === -1) {
        acc.push(cur);
    }
    return acc;
}, []);

4. 防抖节流

防抖（Debounce）和节流（Throttle）都是用于控制函数执行频率的方法。

  • 防抖：指在连续触发事件的情况下，只有等事件停止触发一定时间后，才执行一次函数。常用于处理输入框输入事件、窗口调整事件等频繁触发的场景。

  • 节流：指在一段时间内只执行一次函数。常用于处理滚动事件、页面 resize 事件等高频触发的场景。

5. 浏览器缓存

浏览器缓存是浏览器将之前请求的资源保存在本地存储器中，以便于后续的请求使用，从而加快页面加载速度和节省网络流量。主要包括以下几种类型：

  • 强缓存：浏览器在请求资源时，会先检查本地是否有缓存副本，并通过一些 HTTP 头信息判断缓存是否有效。如果缓存有效，则直接从本地获取资源，不再向服务器发起请求。

  • 协商缓存：当强缓存失效时，浏览器会向服务器发送请求，并携带一些信息，询问服务器是否有更新的资源。服务器通过比较资源的 ETag 或者 Last-Modified 等字段来判断资源是否已经更新，然后返回相应的状态码告知浏览器是否可以使用缓存。

6. cookie 和 localstorage 区别

  • 存储容量：cookie 的存储容量较小，一般为 4KB 左右，而 localstorage 的存储容量一般为 5MB 左右，可以存储更多的数据。

  • 存储位置：cookie 的数据会随着每个 HTTP 请求被发送到服务器，而 localstorage 的数据仅保存在客户端，不会被发送到服务器。

  • 生命周期：cookie 可以设置过期时间，可以是会话结束时失效，也可以是指定的过期时间。而 localstorage 的数据会一直保存在客户端，除非被显式删除。

  • 存储方式：cookie 的数据以字符串形式保存，需要手动转换成 JSON 格式存储复杂数据，而 localstorage 可以直接存储对象类型的数据。

7. HTTP 和 HTTPS

  • HTTP（Hypertext Transfer Protocol）是一种用于传输超文本数据的应用层协议，基于客户端-服务器架构，使用 TCP 连接进行通信，端口号为 80。

  • HTTPS（Hypertext Transfer Protocol Secure）是在 HTTP 的基础上添加了安全性支持的协议，通过 SSL/TLS 协议对数据进行加密传输，使用 TCP 端口号 443。

主要区别：

  1. 安全性：HTTPS 数据传输过程中使用 SSL/TLS 进行加密，可以有效防止数据被窃取或篡改，提高了通信安全性。

  2. 数据完整性：HTTPS 使用数字证书验证服务器的身份，确保数据的完整性，防止中间人攻击。

  3. 通信方式：HTTP 传输的数据是明文的，容易被窃取和篡改；而 HTTPS 传输的数据是加密的，安全性更高。

  4. 连接速度：HTTPS 传输过程中需要进行加密解密操作，会增加一定的服务器负载和通信时间，相对而言连接速度可能会稍慢一些。

综上所述，HTTPS 是在 HTTP 基础上添加了安全支持的协议，可以保障数据传

输过程中的安全性和完整性。

8.浏览器输入url过程
9.类的继承方式有哪些
10.apply call bind区别

8. 浏览器输入 URL 过程

当在浏览器中输入 URL 后，浏览器会执行以下步骤：

  1. URL 解析：浏览器解析输入的 URL，分析其中的协议、域名、端口号、路径等信息。

  2. DNS 解析：如果 URL 中包含域名，浏览器会向 DNS 服务器发送请求，获取对应域名的 IP 地址。

  3. 建立 TCP 连接：浏览器通过 IP 地址和端口号与服务器建立 TCP 连接。

  4. 发送 HTTP 请求：浏览器向服务器发送 HTTP 请求，请求特定资源（如 HTML 文件、CSS 文件、JavaScript 文件等）。

  5. 服务器处理请求：服务器接收到请求后，根据请求的 URL 和方法（GET、POST 等）执行相应的处理，并返回响应。

  6. 接收响应数据：浏览器接收到服务器返回的响应数据，包括 HTTP 状态码、响应头和响应体。

  7. 渲染页面：浏览器根据收到的 HTML、CSS、JavaScript 等资源，解析和渲染页面，呈现给用户。

  8. 断开 TCP 连接：当页面加载完成后，浏览器会断开与服务器的 TCP 连接，释放资源。

9. 类的继承方式有哪些

在 JavaScript 中，类的继承可以通过以下几种方式实现：

  1. 原型链继承：子类的原型对象指向父类的实例，实现了原型链的继承，但会存在引用类型共享的问题。

  2. 借用构造函数继承：在子类的构造函数中调用父类的构造函数，实现属性的继承，但不能继承父类原型上的方法。

  3. 组合继承：结合了原型链继承和借用构造函数继承的方式，既可以继承父类的属性，又可以继承父类原型上的方法。

  4. 原型式继承：通过一个空对象作为中介，将某个对象作为新对象的原型，实现了对父对象的属性和方法的继承。

  5. 寄生式继承：在原型式继承的基础上，增强了对象，添加了新的属性或方法，返回新对象。

  6. 寄生组合式继承：结合了组合继承和寄生式继承的优点，避免了组合继承中调用两次父类构造函数的问题，实现了更优雅的继承方式。

10. apply、call 和 bind 的区别

  • apply 和 call：都是用来改变函数的执行上下文（即 this 指向）并立即执行函数。区别在于传递参数的方式不同，apply 接收一个数组作为参数，而 call 则接收多个参数列表。

    // 使用 apply
func.apply(obj, [arg1, arg2, ...]);

// 使用 call
func.call(obj, arg1, arg2, ...);

  • bind：用于绑定函数的执行上下文，但不会立即执行函数，而是返回一个新的函数。bind 方法也可以传递参数，但是要注意 bind 返回的新函数会在调用时接收额外传入的参数。

    // 使用 bind
var newFunc = func.bind(obj, arg1, arg2, ...);

// 调用新函数
newFunc();

总结：

  • apply 和 call 的作用类似，都是改变函数的执行上下文并立即执行，只是参数的传递方式不同。
  • bind 返回一个新函数，不会立即执行，但可以传递参数，需要手动调用新函数执行。

11.vue的双向绑定

Vue.js 中的双向绑定是指数据和视图之间的双向更新机制，即当数据发生变化时，视图会随之更新；同时，当视图中的表单元素被修改时，绑定的数据也会相应地更新。这一机制让开发者可以方便地处理用户输入和显示数据之间的关系，提高了开发效率和用户体验。

Vue.js 实现双向绑定的核心是通过 v-model 指令和响应式数据系统。

  1. v-model 指令：v-model 指令用于在表单元素（如 input、textarea、select）和 Vue 实例的数据之间建立双向绑定关系。当表单元素的值发生变化时，绑定的数据也会相应地更新；反之，当数据变化时，表单元素的值也会自动更新。
<input type="text" v-model="message">
  1. 响应式数据系统：Vue.js 的响应式数据系统会自动追踪数据的变化，并在数据变化时更新相关的视图。当数据发生变化时，Vue.js 会通过依赖追踪机制，自动重新渲染与该数据相关的视图，从而实现双向绑定。

通过 v-model 指令和响应式数据系统的结合，Vue.js 实现了简单而强大的双向绑定机制，让开发者能够更加便捷地处理用户输入和显示数据的关系。

12.设计模式有哪些

13.display的属性有哪些

display 属性用于定义元素的显示方式，它可以控制元素在页面中的布局方式。常见的 display 属性值有以下几种：

  1. block：将元素显示为块级元素，会新起一行并且填满父元素的宽度，可以设置宽度、高度、内外边距等属性。

  2. inline：将元素显示为行内元素，不会新起一行，只占据其内容的宽度，不可以设置宽度、高度、内外边距等属性。

  3. inline-block：将元素显示为行内块元素，不会新起一行，可以设置宽度、高度、内外边距等属性，但仍保持行内元素的水平排列特性。

  4. none：隐藏元素，元素不会在页面上显示，且不占据页面布局空间。

  5. table：将元素显示为表格，通常用于模拟表格布局，会自动创建表格相关的盒模型。

  6. table-cell：将元素显示为表格单元格，只能用于在表格中定义单元格。

  7. list-item：将元素显示为列表项，通常用于定义列表。

  8. flex：将元素显示为弹性盒子，可以通过弹性盒子模型来进行灵活的布局。

  9. grid：将元素显示为网格容器，可以通过网格布局来进行复杂的布局。

  10. inline-flex：将元素显示为行内弹性盒子，具有弹性盒子的特性，但保持行内元素的水平排列特性。

  11. inline-grid：将元素显示为行内网格容器，具有网格布局的特性，但保持行内元素的水平排列特性。

  12. inherit：继承父元素的 display 属性。

  13. initial：设置元素的 display 属性为初始值，默认为 inline。

  14. unset：取消继承和默认的 display 属性，将元素的 display 属性设置为自然状态。

这些 display 属性值可以根据需要灵活地应用于不同的元素，实现各种不同的布局效果。

avatar
文章
阅读
粉丝