前端面试笔试（二）

目录

一、数据结构算法等综合篇

1.HTTP/2、ETag有关

二、代码输出篇

1.new URL，url中的hostname，pathname，href

扩展说一下url的组成部分和属性

URL的组成部分

urlInfo 对象的属性

 2.一个递归的输出例子

 3.数组去重的不普通方法1

4.数组去重的不普通方法2

5.对象引用，函数参数传递，对象属性修改

扩展说下

三、css、html，JavaScript篇

1.在自定义组件上实现类似原生表单元素的v-model功能，使用？

2.项目在主轴上的对齐方式？

3.JavaScript可能出现内存泄漏的情况有哪些？

可能存在内存泄漏的情况详细版：

4.position中绝对定位是相对于最近的定位父级来定位

扩展：css中position的值有哪些？分别的定位原点？

---

一、数据结构算法等综合篇

1.HTTP/2、ETag有关

• HTTP/2的多路复用允许多个请求和响应通过单个TCP连接同时进行
• HTTP/2通过头部压缩减少了每次请求和响应中头部的冗余数据
• Etag头部用于缓存验证，帮助判断资源是否发生变化
• 使用cache-control:max-age可以指定资源的最大缓存时间

在HTTP/1.1中，每个请求通常都需要一个单独的TCP连接，这会导致多个问题。首先，TCP连接的建立和关闭都需要时间，这会增加网络延迟和资源消耗。其次，HTTP/1.1需要按照顺序处理请求，如果前面的请求比较慢，后面的请求就会被阻塞，这会导致队头阻塞问题。最后，每个请求都需要携带完整的HTTP头部信息，这会占用大量的网络带宽。

而在HTTP/2中，多路复用技术解决了这些问题。它允许多个请求和响应在同一个TCP连接上并行处理，每个请求都有一个唯一的ID，这使得多个请求可以同时进行，而不必等待前一个请求完成。这种方式减少了连接建立和关闭的开销，提高了网络性能，降低了延迟，并节省了网络带宽。

此外，HTTP/2还引入了头部压缩技术，通过压缩HTTP头部信息来进一步减少传输的数据量。这些改进使得HTTP/2在现代Web应用中具有更好的性能和用户体验。

ETag（Entity Tag）是HTTP协议中用于标识资源状态的一种机制，主要用于缓存管理和资源更新判断。当浏览器请求服务器资源时，服务器会返回该资源的ETag值。在后续的请求中，如果客户端想要验证该资源是否发生变化，它会将之前收到的ETag值通过If-None-Match请求头发送给服务器。服务器会检查当前资源的ETag值是否与客户端发送的值相匹配。如果匹配，说明资源自上次请求后未发生变化，服务器会返回304 Not Modified状态码，客户端可以继续使用缓存中的资源。如果不匹配，说明资源已经发生变化，服务器会返回新的资源内容和新的ETag值。

通过这种方式，ETag头部有效地减少了不必要的网络传输，提高了页面加载速度，并确保了客户端能够获取到最新的资源。

cache-control是HTTP协议中用于控制资源缓存行为的头部字段，而max-age则是cache-control头部字段中的一个指令，用于指定资源在客户端缓存中的最大有效时间，单位是秒。当客户端接收到服务器返回的包含cache-control: max-age=N的响应头部时，它会将资源缓存起来，并在接下来的N秒内直接使用缓存中的资源，而不是向服务器发送新的请求。

这种机制有助于减少不必要的网络请求，提高页面加载速度，并减轻服务器的负担。

二、代码输出篇

1.new URL，url中的hostname，pathname，href

    const urlInfo=new URL('https://reolink.com/product/argus/?id=123#comments');console.log(urlInfo.hostname)console.log(urlInfo.pathname)console.log(urlInfo.href);

输出为：

1. urlInfo.hostname
   • 这个属性返回URL的主机名部分，即域名。
   • 输出：reolink.com
2. urlInfo.pathname
   • 这个属性返回URL的路径部分，即/后面的部分，但不包括查询字符串和片段标识符（hash）。
   • 输出：/product/argus/
3. urlInfo.href
   • 这个属性返回整个URL的字符串表示，包括协议、主机名、路径、查询字符串和片段标识符。
   • 输出：https://reolink.com/product/argus/?id=123#comments

扩展说一下url的组成部分和属性

这个URL https://reolink.com/product/argus/?id=123#comments 是一个指向特定网页地址的字符串，它包含了多个部分，这些部分可以被解析和访问通过JavaScript中的 URL 对象。基于提供的URL创建的 URL 实例可能拥有的一些属性。

URL的组成部分

1. 协议 (protocol): https:// - 这指明了用于访问资源的协议类型，这里是HTTPS（超文本传输安全协议）。

2. 主机名 (hostname): reolink.com - 这是服务器的域名或IP地址。

3. 路径 (pathname): /product/argus/ - 这指定了服务器上资源的具体位置。

4. 搜索参数 (search): ?id=123 - 这部分包含了用于查询的键值对，这里的键是 id，值是 123。

5. 哈希 (hash): #comments - 这部分通常用于指示网页内的某个位置或用于客户端处理（如显示特定的内容部分）。

urlInfo 对象的属性

当你使用 const urlInfo = new URL('https://reolink.com/product/argus/?id=123#comments'); 创建一个 URL 对象时，urlInfo 将拥有以下属性（以及其他一些可能不直接相关的属性）：

1. href: 'https://reolink.com/product/argus/?id=123#comments' - 完整的URL字符串。

2. protocol: 'https:' - 协议部分，注意不包括 //。

3. host: 'reolink.com' - 主机名部分，不包括端口号（如果有的话）。

4. hostname: 'reolink.com' - 同上，只是更明确地指出这是主机名。

5. port: '' - 端口号，如果URL中没有指定，则为空字符串。

6. pathname: '/product/argus/' - 路径部分。

7. search: '?id=123' - 查询字符串部分，包括前面的 ?。

8. searchParams: URLSearchParams 对象 - 一个包含了所有查询参数的对象，允许你以更便捷的方式访问和操作这些参数（例如，urlInfo.searchParams.get('id') 会返回 '123'）。

9. hash: '#comments' - 哈希部分，包括前面的 #。

10. origin: 'https://reolink.com' - URL的起源，即协议、主机名和端口（如果指定了）。

这些属性提供了对URL不同部分的访问，使得解析、修改和使用URL变得更加容易和直观。

---

 2.一个递归的输出例子

    function calc(a){return a>=2?calc(a-1)+a:a;}console.log(calc(5))

输出结果为：15

1. 函数定义：function calc(a) { ... } 定义了一个名为 calc 的函数，它有一个参数 a。

2. 递归条件：函数体内使用了三元运算符 ? : 来决定函数的返回值。这个运算符根据条件 a >= 2 的真假来选择两个值中的一个。

   • 如果 a >= 2 为真（即 a 大于或等于 2），则函数返回 calc(a-1) + a。这里发生了递归调用，函数 calc 被再次调用，但这次是用 a-1 作为参数。递归调用的结果加上当前的 a 值，构成了这个递归步骤的返回值。

   • 如果 a >= 2 为假（即 a 小于 2），则函数直接返回 a。这是递归的基本情况，它停止了递归调用。

3. 递归终止：当 a 减到 1 时，a >= 2 的条件为假，函数返回 1。因为没有更多的递归调用发生（因为已经达到了基本情况），所以递归终止。

现在，让我们计算 calc(5) 的结果：

• calc(5)：因为 5 >= 2，所以返回 calc(4) + 5。

• calc(4)：因为 4 >= 2，所以返回 calc(3) + 4。

• calc(3)：因为 3 >= 2，所以返回 calc(2) + 3。

• calc(2)：因为 2 >= 2，所以返回 calc(1) + 2。

• calc(1)：因为 1 < 2，所以直接返回 1（这是递归的基本情况）。

现在，我们将这些值加起来，以逆序的方式（因为递归是从内向外计算的）：

• calc(1) 返回 1

• calc(2) 返回 1 + 2 = 3

• calc(3) 返回 3 + 3 = 6

• calc(4) 返回 6 + 4 = 10

• calc(5) 返回 10 + 5 = 15

---

 3.数组去重的不普通方法1

    console.log([1,2,2,4,4,5,5,6].reduce((p,q)=>p.includes(q)?p:[...p,q],[]))

输出结果为[1,2,4,5,6]

上面的代码使用了JavaScript数组的reduce方法来对一个数组进行遍历和归约（或聚合），目的是去除数组中的重复元素。这里，reduce方法接收一个回调函数和一个初始值（空数组[]）作为参数。
 

回调函数接收四个参数，但在这种情况下，只用到了前两个：

• p（累加器）：上一次调用回调函数时返回的数组（或初始值）。

• q（当前值）：数组中当前正在处理的元素。

回调函数逻辑

• p.includes(q)：检查累加器数组p是否包含当前元素q。

• 如果p包含q（即p.includes(q)为true），则回调函数返回p（不变），这样q就不会被添加到结果数组中。

• 如果p不包含q（即p.includes(q)为false），则使用扩展运算符...将p的所有元素复制到一个新数组中，并将q添加到这个新数组的末尾。然后，这个新数组被返回作为下一次迭代的累加器值。

初始值

初始值是一个空数组[]，它作为第一次迭代时的累加器值。

代码执行流程

1. 初始累加器值：[]

2. 处理第一个元素1：[]不包含1，所以返回[1]。

3. 处理第二个元素2：[1]不包含2，所以返回[1, 2]。

4. 处理第三个元素2：[1, 2]包含2，所以返回[1, 2]（不变）。

5. 处理第四个元素4：[1, 2]不包含4，所以返回[1, 2, 4]。

6. 处理第五个元素4：[1, 2, 4]包含4，所以返回[1, 2, 4]（不变）。

7. 处理第六个元素5：[1, 2, 4]不包含5，所以返回[1, 2, 4, 5]。

8. 处理第七个元素5：[1, 2, 4, 5]包含5，所以返回[1, 2, 4, 5]（不变）。

9. 处理第八个元素6：[1, 2, 4, 5]不包含6，所以返回[1, 2, 4, 5, 6]。

最终输出

最终，reduce方法返回的是去除重复元素后的数组[1, 2, 4, 5, 6]，这个值被console.log输出到控制台。

---

4.数组去重的不普通方法2

console.log(Object.values([1,2,2,4,4,5,5,6].reduce((p,q)=>(p[q]=q,p),{})))

输出结果也是[1,2,4,5,6]

使用了JavaScript数组的reduce方法来处理一个数组，并结合Object.values方法来获取最终结果的数组形式。这里，reduce方法被用来构建一个对象，该对象的键是数组中的元素（去重后），值也是这些元素本身。然后，Object.values方法被用来从这个对象中提取出所有的值，形成一个新的数组。

回调函数接收四个参数，但在这个例子中，只使用了前两个：

• p（累加器）：上一次调用回调函数时返回的对象（或初始值，一个空对象{}）。

• q（当前值）：数组中当前正在处理的元素。

回调函数逻辑

• p[q] = q：在累加器对象p上设置一个属性，其键和值都是当前元素q。如果q已经是一个存在的键，则这个操作会覆盖之前的值（但在这个例子中，由于我们关心的是键的唯一性，所以值被设置为相同的q并不会影响结果）。

• 返回p：无论是否设置了新属性，都返回累加器对象p作为下一次迭代的累加器值。

初始值

初始值是一个空对象{}，它作为第一次迭代时的累加器值。

代码执行流程

1. 初始累加器值：{}

2. 处理第一个元素1：在对象上设置属性{1: 1}，返回这个对象。

3. 处理第二个元素2：在对象上设置属性{1: 1, 2: 2}，返回这个对象。

4. 处理第三个元素2：对象已经有一个2的键，所以只是更新值为2（实际上没有改变），返回对象{1: 1, 2: 2}。

5. 处理第四个元素4：在对象上设置属性{1: 1, 2: 2, 4: 4}，返回这个对象。

6. 处理第五个元素4：对象已经有一个4的键，所以只是更新值为4（实际上没有改变），返回对象{1: 1, 2: 2, 4: 4}。

7. 处理第六个元素5：在对象上设置属性{1: 1, 2: 2, 4: 4, 5: 5}，返回这个对象。

8. 处理第七个元素5：对象已经有一个5的键，所以只是更新值为5（实际上没有改变），返回对象{1: 1, 2: 2, 4: 4, 5: 5}。

9. 处理第八个元素6：在对象上设置属性{1: 1, 2: 2, 4: 4, 5: 5, 6: 6}，返回这个对象。

---

5.对象引用，函数参数传递，对象属性修改

    let objA={name: 'A'}let objB={name: 'B'}function main(oa,ob){oa={};ob.name='C'}main(objA,objB);console.log(objA.name,objB.name);

输出结果为：A C

oa = {}; // 这里重新赋值了oa，让它引用了一个新的空对象。这个修改不会影响到objA。
ob.name = 'C'; // 这里修改了ob引用的对象的name属性。由于ob和objB引用的是同一个对象，所以这个修改会影响到objB。

• 在调用 main(objA, objB) 时，oa 和 objA 引用同一个对象 {name: 'A'}，ob 和 objB 引用同一个对象 {name: 'B'}。
• 在 main 函数内部，oa = {} 重新赋值了 oa，让它引用了一个新的空对象。这个修改不会影响到 objA，因为 objA 仍然引用着原来的对象 {name: 'A'}。
• 另一方面，ob.name = 'C' 修改了 ob 引用的对象的 name 属性。由于 ob 和 objB 引用的是同一个对象，因此 objB.name 也被修改为 'C'。
• 最后，console.log(objA.name, objB.name) 输出 "A C"

扩展说下
 

1. 对象引用：
   • 在JavaScript中，对象是通过引用来传递的。当你将一个对象赋值给另一个变量时，你实际上是在复制对该对象的引用，而不是对象本身。
   • 例如，let objA = {name: 'A'} 创建了一个对象，并且 objA 是对这个对象的引用。
2. 函数参数传递：
   • 当你将对象作为参数传递给函数时，你实际上是在传递对象的引用。
   • 在函数内部，你可以修改这个引用所指向的对象的内容（即对象的属性），但这种修改会影响到函数外部的对象，因为它们引用的是同一个对象。
   • 然而，如果你尝试在函数内部重新赋值给这个参数（即让它引用一个新的对象），那么这个修改不会影响到函数外部的对象。
3. 对象属性的修改：
   • 你可以通过点（.）或方括号（[]）语法来访问和修改对象的属性。
   • 修改对象的属性会影响到所有引用该对象的变量。

---

三、css、html，JavaScript篇

1.在自定义组件上实现类似原生表单元素的v-model功能，使用？

用value和input

1. 接收一个 value 属性。
2. 在值改变时触发一个 input 事件。

首先，创建一个自定义组件，比如 MyInput.vue：

<template><input:value="value"@input="$emit('input', $event.target.value)":placeholder="placeholder"/>
</template><script>
export default {name: 'MyInput',props: {value: {type: String,default: ''},placeholder: {type: String,default: ''}}
}
</script>

在这个组件中：

• :value="value"：绑定 value 属性到输入元素的值。
• @input="$emit('input', $event.target.value)"：监听 input 事件，并在事件发生时通过 $emit 触发一个名为 input 的自定义事件，传递新的值。

在你的父组件中使用这个自定义组件，并使用 v-model 绑定数据：

<template><div><h1>自定义输入组件示例</h1><MyInput v-model="message" placeholder="请输入一些文字" /><p>你输入的是: {{ message }}</p></div>
</template><script>
import MyInput from './MyInput.vue';export default {name: 'App',components: {MyInput},data() {return {message: ''};}
}
</script>

在这个父组件中：

• v-model="message"：使用 v-model 将 message 变量绑定到 MyInput 组件。
• <p>你输入的是: {{ message }}</p>：显示 message 变量的值，以验证双向数据绑定是否工作。

注意事项

1. 命名：确保你触发的自定义事件名称为 input，因为 v-model 默认监听这个事件。
2. 类型匹配：确保 value 属性和 input 事件传递的值类型一致。在上面的例子中，value 和 input 事件的值都是字符串类型。
3. 默认值和可选属性：为 props 提供默认值，并在需要时添加其他可选属性（如 placeholder）。

---

2.项目在主轴上的对齐方式？

justify-content
在交叉轴是align-items

---

3.JavaScript可能出现内存泄漏的情况有哪些？

DOM 清空时还存在引用，定时器未清除，全局变量未清理，闭包使用不当，事件监听器未解绑，循环引用，缓存未清理，第三方库或框架存在内存泄漏

注意：箭头函数本身不会导致内存泄漏

可能存在内存泄漏的情况详细版：

1. 全局变量未清理：

   • 如果在全局作用域中创建了过多的变量且未及时释放，它们会一直占用内存，导致内存泄漏。全局变量会一直存在于内存中，直到页面关闭或手动释放。过多创建并保留全局变量，尤其是大型的数据结构或对象，容易引发内存泄漏问题。

2. 闭包使用不当：

   • 闭包可以让函数访问其定义时的作用域。但如果闭包中引用了一些较大的对象或数据结构，且这些对象或数据结构在闭包不再被需要时没有被及时清理，也可能导致内存泄漏。

3. DOM 元素未正确删除：

   • 在使用 JavaScript 操作 DOM 元素时，必须确保在不需要它们时正确删除它们。如果保留了对不再需要的 DOM 元素的引用，那么这些元素及其相关的 JavaScript 对象将无法被垃圾回收器清理，从而导致内存泄漏。

4. 事件监听器未解绑：

   • 如果注册了事件监听器却没有在合适的时候移除它们，那么即使相关的 DOM 元素已经被删除，事件监听器仍然会保留对它们的引用，导致内存无法被回收。

5. 定时器或回调函数未清除：

   • 使用 setInterval 或 setTimeout 创建的定时器，如果在不再需要时没有及时清除，它们会持续占用内存。即使定时器的回调函数已经执行完毕，定时器本身仍然可能存在于内存中。

6. 循环引用：

   • 当两个或多个对象之间存在相互引用，并且这些对象没有其他外部引用可以打破这种循环时，它们将无法被垃圾回收机制正确处理，从而占用内存。

7. 第三方库或框架存在内存泄漏：

   • 如果使用了存在内存泄漏问题的第三方库或框架，就可能导致整个应用程序出现内存泄漏问题。因此，在选择和使用第三方库或框架时，需要谨慎评估其内存管理性能。

8. 缓存未清理：

   • 缓存可以提高性能，但如果使用不当，也会带来内存管理的问题。过度使用缓存且未及时清理过期或不再需要的缓存数据，也可能导致内存泄漏。

---

4.position中绝对定位是相对于最近的定位父级来定位

扩展：css中position的值有哪些？分别的定位原点？

static:元素默认值，按正常的文档流进行定位，从上到下，从左到右，没有特定的原点

relative：相对定位。元素相对于其正常位置进行定位，相对于原本位置进行偏移，定位原点即元素原本在文档流中的位置

absolute：绝对定位。元素相对于最近的已定位祖先（即设置了position属性为absolute,relative,fixed,sticky的元素）进行定位。定位原点是最近的已定位祖先元素的左上角，相对于初始包含块的左上角

fixed：固定定位。元素相对于浏览器窗口进行定位，即使页面滚动，也会始终位于同一位置。定位原点为浏览器窗口的左上角

sticky：粘性定位。根据正常文档流进行定位，然后相对于用户的滚动位置在视口内粘性定位，会黏在父元素身上直到某个阈值被跨越。定位原点是元素原本在文档流中的位置，滚动到某个阈值后，相对于视口进行定位。

---

加油加油^_^