【前端学习|面试题】JavaScript合集（二）

最新推荐文章于 2024-08-21 14:09:37 发布

FLechazo~~

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量72

点赞数

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/m0_72149295/article/details/134072660

版权

数组的操作（MDN）

遍历数组：
- for循环：使用传统的for循环，通过索引来访问数组元素。
- forEach方法：使用数组的forEach方法，提供一个回调函数来处理每个元素。
- for...of循环：使用for...of循环来遍历数组元素，更简洁的语法。
- map方法：使用map方法遍历数组，并返回一个新的数组，适用于需要对元素进行转换或映射的情况
添加元素：
- push(): 向数组末尾添加元素。
- unshift(): 向数组开头添加元素。
- splice(): 在指定位置插入元素，可对数组进行增删改，传入开始索引、截取项数、换内容（可多个）。
移除元素：
- pop(): 移除数组末尾的元素。
- shift(): 移除数组开头的元素。
查找元素：
- indexOf(): 查找指定元素在数组中第一次出现的位置索引，可传入查找的项和起点的索引。
- find(): 传入函数、函数内部this，返回满足条件的第一个元素。
- findIndex():传入函数、函数内部this，返回第一个匹配位置的索引
- filter(): 传入函数，过滤返回满足条件的所有元素。
检查元素：
- includes(): 传入元素，检查数组是否包含指定元素。
- every(): 传入函数，检查数组中所有元素是否满足条件。
- some(): 传入函数，检查数组中是否有元素满足条件。
其他操作：
- join()：用传入的指定分隔符将数组每一项拼接为字符串。
- toString():将数组转换为字符串
- reduce(): 对数组元素进行累加等迭代操作。
- slice(): 截取数组元素，创建一个数组的浅拷贝，传入开始索引和结束索引，返回一个新数组。
- sort(): 对数组元素进行排序。
- reverse(): 颠倒数组元素的顺序。
- concat(): 合并两个或多个数组。
- fill(): 用指定值填充数组元素，传入填充数值、开始索引、结束索引。
- flat() ：扁平化数组，按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

节流（可背代码）

节流是一种控制函数调用频率的技术，确保函数在特定时间段内只执行一次。它通常用于限制事件处理或函数执行的频率，以提高性能、降低资源消耗，以及避免不必要的重复操作。节流函数通过设定一个时间间隔，只允许在该时间间隔内执行一次函数调用

function throttle(func, delay) {
    let lastExecutionTime = 0; // 记录上一次函数执行的时间戳

    return function() {
        const now = Date.now(); // 获取当前时间戳

        if (now - lastExecutionTime >= delay) {
            // 如果距离上一次执行已经超过指定的延迟时间
            func.apply(this, arguments); // 执行函数
            lastExecutionTime = now; // 更新上一次执行时间戳
        }
    };
  /*
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    };*/
}

// 使用节流控制的函数
const throttledFunction = throttle(myFunction, 1000);

// 用 throttledFunction 处理事件，确保 myFunction 不会过于频繁执行
element.addEventListener('scroll', throttledFunction);

什么是重排？什么是重绘？

重排（Reflow）：

重排是指浏览器重新计算并更新渲染树中的元素的位置和大小的过程。
它通常由以下操作触发：改变窗口大小，改变元素的大小或位置，修改元素的内容，添加或删除元素等。
重排会导致性能下降，因为它消耗大量的计算资源。因此，开发者应尽量减少重排的频率，以提高网页性能。

重绘（Repaint）：

重绘是指浏览器重新绘制元素的外观，而不涉及元素的布局更改。
它通常由以下操作触发：修改元素的颜色、背景、字体等样式属性，但不影响元素的位置和大小。
重绘比重排开销小，因为它只涉及样式的改变，而不需要重新布局。
重绘通常是相对较快的，但也会对性能产生影响，特别是在频繁触发的情况下。

浏览器渲染内容流程

HTML 解析：
- 浏览器从服务器获取 HTML 文件，并开始解析它。
- 解析过程中，浏览器构建文档对象模型（DOM），表示页面的结构。
CSS 解析：
- 浏览器同时获取页面关联的 CSS 文件，并开始解析。
- 解析过程中，构建样式表对象模型（CSSOM）。
构建渲染树：
- 将 DOM 和 CSSOM 结合，创建渲染树。
- 渲染树只包含需要显示的元素和其样式信息，忽略不可见的元素（例如 display: none）。
布局（Layout）：
- 浏览器根据渲染树计算每个可见元素的大小、位置和形状。
- 这个过程叫做布局或回流。
绘制（Paint）：
- 浏览器将布局后的元素转换为屏幕上的实际像素。
- 这个过程被称为绘制或栅格化。
合成与显示：
- 浏览器将绘制的内容合成在一起，包括页面的各个图层。
- 最终的图像被显示在屏幕上。
重绘与重排：
- 如果用户进行某些操作，可能导致页面发生变化，需要进行重绘或重排。
- 重绘是更新元素的样式而不影响布局，而重排则涉及布局的改变。
合成层：
- 一些现代浏览器使用合成层提高性能。图层可以独立绘制和合成，减少整体渲染的工作量。

Http和Https的区别（高频）

安全性：
- HTTP是明文传输的，数据在传输过程中不进行加密。这意味着如果有人拦截了通信，就能直接读取其中的信息。
- HTTPS通过使用SSL（安全套接层）或TLS（传输层安全）协议对数据进行加密。这样，即使有人截取了数据，也很难解读其中的内容。
端口：
- HTTP默认使用端口80进行通信。
- HTTPS默认使用端口443。当你访问一个网站时，如果使用HTTPS，浏览器会默认连接到443端口。
证书：
- HTTPS需要使用SSL证书，这是由认证机构（CA）颁发的，用于验证服务器的身份。
- HTTP不需要证书，信息在传输过程中是明文的。
协议：
- HTTP是无状态的协议，每个请求都是独立的，不会记住之前的状态。
- HTTPS在HTTP的基础上通过加入SSL/TLS层，实现了加密和身份认证，保证了数据的完整性和安全性。
速度：
- 由于HTTPS需要加密解密的过程，相对于HTTP会稍微慢一些。但随着硬件和加密算法的发展，这个差距逐渐减小。

http特性以及状态码

HTTP特性：

文本协议：
- HTTP使用纯文本格式来传输数据，这使得它易于阅读和理解，也方便了开发者进行调试。
客户端-服务器模型：
- HTTP遵循客户端-服务器模型，客户端（通常是浏览器）发送请求，而服务器接收并返回响应。
请求-响应模式：
- 这是HTTP的基本工作方式。客户端发送一个请求，其中包含了请求方法（如GET、POST等）和要访问的资源的地址（URL），服务器则根据请求返回相应的响应。
无状态：
- HTTP协议本身是无状态的，也就是说，服务器在处理完一个请求后，不会保留与该请求相关的任何信息。这意味着每个请求都是独立的，服务器不会记住之前的请求。
无连接：
- HTTP也是一种无连接的协议，这意味着在每个请求-响应周期中，客户端和服务器之间会建立一个临时的连接，请求完成后就会关闭连接。这有助于节省服务器资源。
支持多种数据类型：
- HTTP支持传输各种数据类型，包括HTML、文本、图像、音频、视频等。
支持缓存：
- HTTP通过使用缓存来提高性能和减少带宽消耗。客户端可以在请求头中发送缓存相关的信息，服务器会根据这些信息来决定是否使用缓存数据。

HTTP状态码：

HTTP状态码是服务器响应的一部分，用来告知客户端请求的处理结果。以下是一些常见的HTTP状态码及其含义：

1xx（信息性状态码）：
- 100：继续，服务器收到请求，客户端可以继续发送请求的剩余部分。
- 101：客户要求服务器根据请求转换HTTP协议版本。
2xx（成功状态码）：
- 200：OK，请求成功。
- 201：已创建，服务器成功创建了新资源，提示知道新文件的URL。
- 202：接受和处理、但处理未完成。
- 203：返回信息不确定或不完整。
- 204：无内容，请求成功，但响应无实体主体。
- 205：服务器完成了请求，用户代理必须复位当前已经浏览过的文件。
- 206：服务器已经完成了部分用户的GET请求。
3xx（重定向状态码）：
- 301：永久重定向，请求的资源被永久移动到新位置。
- 302：临时重定向，请求的资源暂时被移动到新位置，在其他地址发现了请求数据。
- 303：建议客户访问其他URL或访问方式。
- 304：未修改，资源未被修改，可以使用缓存。
- 305：请求的资源必须从服务器指定的地址得到。
- 306：前一版本HTTP中使用的代码，现行版本中不再使用。
- 307：申明请求的资源临时性删除。
4xx（客户端错误状态码）：
- 400：错误的请求，通常是由于语法错误引起的。
- 401：未授权，需要身份验证。
- 402：保留有效ChargeTo头响应
- 403：禁止访问，请求不允许，客户端没有权限访问所请求的资源。
- 404：未找到，请求的资源不存在，没有发现文件、查询或URl。
- 405：用户在Request-Line字段定义的方法不允
- 406：根据用户发送的Accept拖，请求资源不可访
- 407：类似401，用户必须首先在代理服务器上得到授权
- 408：客户端没有在用户指定的饿时间内完成请求
- 409：对当前资源状态，请求不能完成
- 410：服务器上不再有此资源且无进一步的参考地址
- 411：服务器拒绝用户定义的Content-Length属性请求
- 412：一个或多个请求头字段在当前请求中错误
- 413：请求的资源大于服务器允许的大小
- 414：请求的资源URL长于服务器允许的长度
- 415：请求资源不支持请求项目格式
- 416：请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
- 417：服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
5xx（服务器错误状态码）：
- 500：服务器内部错误，表示服务器在处理请求时遇到了错误。
- 501：服务器不支持请求的函数
- 502：网关错误，表示服务器作为网关或代理，从上游服务器接收到无效的响应，服务器暂时不可用，有时是为了防止发生系统过载。
- 503：服务不可用，服务器暂时无法处理请求，服务器过载或暂停维修。
- 504：网关超时，表示服务器作为网关或代理，在等待上游服务器的响应时超时。
- 505：服务器不支持或拒绝支请求头中指定的HTTP版本

http三次握手

第一次握手 - 客户端发起连接请求：
- 客户端发送一个TCP报文段，其中包含一个标志位（SYN）设置为1，以及一个随机的初始序列号（ISN）。这表示客户端希望建立连接。
第二次握手 - 服务器响应：
- 服务器收到客户端的请求后，会发送一个TCP报文段，其中也包含SYN标志位设置为1，以及自己的随机初始序列号。此时，服务器已经接受了客户端的请求。
第三次握手 - 客户端确认：
- 客户端收到服务器的响应后，会发送一个确认报文段，其中的ACK标志位被设置为1，同时确认号字段被设置为服务器发送的序列号加1。这表示客户端已经接受了服务器的响应，连接建立。

如果只有两次握手，那么到这里，连接就建立了，但是此时客户端并没有任何数据要发送，而服务端还在傻傻的等候佳音，造成很大的资源浪费。所以需要第三次握手，只有客户端再次回应一下，就可以避免这种情况。所以说，第三次握手是为了防止已经失效的连接请求报文段突然又传到服务端，因而产生错误。

http四次挥手

第一次挥手（FIN）- 客户端发起关闭：客户端向服务器发送一个FIN（Finish）报文，表示客户端不再向服务器发送数据。
第二次挥手（ACK）- 服务器确认关闭：服务器接收到客户端的FIN后，会发送一个ACK（Acknowledgment）报文，确认收到了客户端的FIN。
第三次挥手（FIN） - 服务器关闭：服务器在完成数据传输后，也向客户端发送一个FIN，表示服务器不再向客户端发送数据。
第四次挥手（ACK）- 客户端确认关闭：客户端接收到服务器的FIN后，发送一个ACK报文，确认接收到了服务器的FIN。

你如何理解Promise

Promise 是JavaScript中用于处理异步操作的对象，它代表一个尚未完成但最终会完成的操作，可以是成功、失败或处于挂起状态。Promise用于更优雅地处理回调地狱（Callback Hell）问题，使异步代码更易于阅读和维护。

一个Promise对象有三个状态：

Pending（挂起）：Promise的初始状态，表示操作尚未完成，也没有失败。
Fulfilled（已完成）：表示操作成功完成，通常会包含操作的结果数据。
Rejected（已拒绝）：表示操作失败，通常会包含一个错误对象，指明失败的原因。

Promise对象有以下几个关键方法：

then方法：用于注册回调函数，以处理Promise对象的成功状态和失败状态。通常，then接受两个回调函数作为参数，第一个用于处理成功状态，第二个用于处理失败状态。
catch方法：用于捕获Promise对象的失败状态。它是then方法的一个特殊版本，只处理失败状态，通常用于处理错误。
finally方法：用于在Promise无论成功还是失败时都执行的回调函数。
Promise.all方法：接受一个Promise数组，返回一个新的Promise对象，只有当所有Promise都成功才会成功，否则会失败。
Promise.race方法：接受一个Promise数组，返回一个新的Promise对象，只要有一个Promise成功或失败，新的Promise就会立即以相同的状态结束。

为了方便了解，咱们直接封装一个简单的Ajax请求吧：

let baseUrl = 'http://localhost:8891/api'
function ajax_get({ url, query }) {
    return new Promise((resolve, reject) => {
        if (!url) {
            return alert('你没有给我地址啊！！！')
        }
        // 将请求信息作为查询字符串拼接到URL上
        let str = ''
        if (query) {
            str = '?'
            for (let key in query) {
                str += `${key}=${query[key]}&`
            }
            str = str.slice(0, -1)
            // console.log(str)
        }
        let xhr = new XMLHttpRequest()
        // 初始化
        xhr.open('get', query ? baseUrl + url + str : baseUrl + url)
        // 设置请求头 携带token
        xhr.setRequestHeader('authorization', cookie.getCookie('token') || null)
        // 发送请求
        xhr.send()
        // 监听响应
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    // 改变Promise状态为成功
                    resolve(JSON.parse(xhr.response))
                } else {
                    // 改变Promise状态为失败
                    reject(JSON.parse(xhr.response))
                }
            }
        }
    })
}
let params = {
    url: '/users/info',
    query: { id: 123456 }
}
ajax_get(params)

这里就不进行测试啦，懒得搭建服务器啦😆，这段代码需要浏览器环境哦😉，因为里面的XMLHttpRequest()是浏览器的内置对象。

Promise状态

Pending（挂起）：Promise的初始状态。表示操作尚未完成，也没有失败。在Promise创建后、但尚未成功完成或失败之前，它处于挂起状态。
Fulfilled（已完成）：也称为解决（resolved），表示操作成功完成。在这个状态下，Promise对象会包含一个值，通常是操作的结果数据。Promise从Pending状态转为Fulfilled状态，表示异步操作成功完成。
Rejected（已拒绝）：表示操作失败。在这个状态下，Promise对象会包含一个原因，通常是一个错误对象，指明失败的具体原因。Promise从Pending状态转为Rejected状态，表示异步操作失败。

Promise的状态转换是单向的，一旦进入Fulfilled或Rejected状态，就不可再返回到Pending状态。状态的转换是由异步操作决定的，当异步操作完成时，可以使用resolve方法将Promise状态从Pending转为Fulfilled，或使用reject方法将Promise状态从Pending转为Rejected。

每天10个☀️☀️，后续会有更多资源持续更新❕ ❕ ❕
个人收集整理、创作不易, 若有帮助🉑, 请帮忙点赞👍➕收藏❤️, 谢谢!✨✨🚀🚀