IT评测·应用市场-qidao123.com技术社区

标题: 前端口试笔试（二） [打印本页]

---

作者: 风雨同行    时间: 2024-11-17 12:20
标题: 前端口试笔试（二）
目次

一、数据布局算法等综合篇
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

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

复制代码

输出为：

• urlInfo.hostname
  
  
  
  • 这个属性返回URL的主机名部门，即域名。
    
  • 输出：reolink.com
    
  
  
• urlInfo.pathname
  
  
  
  • 这个属性返回URL的路径部门，即/后面的部门，但不包罗查询字符串和片段标识符（hash）。
    
  • 输出：/product/argus/
    
  
  
• 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的构成部门

• 协议 (protocol): https:// - 这指明白用于访问资源的协议范例，这里是HTTPS（超文本传输安全协议）。
  
• 主机名 (hostname): reolink.com - 这是服务器的域名或IP地址。
  
• 路径 (pathname): /product/argus/ - 这指定了服务器上资源的具体位置。
  
• 搜索参数 (search): ?id=123 - 这部门包罗了用于查询的键值对，这里的键是 id，值是 123。
  
• 哈希 (hash): #comments - 这部门通常用于指示网页内的某个位置或用于客户端处理（如表现特定的内容部门）。
  

urlInfo 对象的属性

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

• href: 'https://reolink.com/product/argus/?id=123#comments' - 完备的URL字符串。
  
• protocol: 'https:' - 协议部门，注意不包罗 //。
  
• host: 'reolink.com' - 主机名部门，不包罗端口号（如果有的话）。
  
• hostname: 'reolink.com' - 同上，只是更明确地指出这是主机名。
  
• port: '' - 端口号，如果URL中没有指定，则为空字符串。
  
• pathname: '/product/argus/' - 路径部门。
  
• search: '?id=123' - 查询字符串部门，包罗前面的 ?。
  
• searchParams: URLSearchParams 对象 - 一个包罗了全部查询参数的对象，答应你以更便捷的方式访问和操纵这些参数（例如，urlInfo.searchParams.get('id') 会返回 '123'）。
  
• hash: '#comments' - 哈希部门，包罗前面的 #。
  
• origin: 'https://reolink.com' - URL的起源，即协议、主机名和端口（如果指定了）。
  

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

---

 2.一个递归的输出例子

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

复制代码

输出结果为：15

• 函数定义：function calc(a) { ... } 定义了一个名为 calc 的函数，它有一个参数 a。
  
• 递归条件：函数体内使用了三元运算符 ? : 来决定函数的返回值。这个运算符根据条件 a >= 2 的真假来选择两个值中的一个。
  
  
  
  • 如果 a >= 2 为真（即 a 大于或等于 2），则函数返回 calc(a-1) + a。这里发生了递归调用，函数 calc 被再次调用，但这次是用 a-1 作为参数。递归调用的结果加上当前的 a 值，构成了这个递归步骤的返回值。
    
  • 如果 a >= 2 为假（即 a 小于 2），则函数直接返回 a。这是递归的基本环境，它停止了递归调用。
    
  
  
• 递归终止：当 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

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：[]不包罗1，所以返回[1]。
  
• 处理第二个元素2：[1]不包罗2，所以返回[1, 2]。
  
• 处理第三个元素2：[1, 2]包罗2，所以返回[1, 2]（不变）。
  
• 处理第四个元素4：[1, 2]不包罗4，所以返回[1, 2, 4]。
  
• 处理第五个元素4：[1, 2, 4]包罗4，所以返回[1, 2, 4]（不变）。
  
• 处理第六个元素5：[1, 2, 4]不包罗5，所以返回[1, 2, 4, 5]。
  
• 处理第七个元素5：[1, 2, 4, 5]包罗5，所以返回[1, 2, 4, 5]（不变）。
  
• 处理第八个元素6：[1, 2, 4, 5]不包罗6，所以返回[1, 2, 4, 5, 6]。
  

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

---

4.数组去重的不平常方法2

1. 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：在对象上设置属性{1: 1}，返回这个对象。
  
• 处理第二个元素2：在对象上设置属性{1: 1, 2: 2}，返回这个对象。
  
• 处理第三个元素2：对象已经有一个2的键，所以只是更新值为2（实际上没有改变），返回对象{1: 1, 2: 2}。
  
• 处理第四个元素4：在对象上设置属性{1: 1, 2: 2, 4: 4}，返回这个对象。
  
• 处理第五个元素4：对象已经有一个4的键，所以只是更新值为4（实际上没有改变），返回对象{1: 1, 2: 2, 4: 4}。
  
• 处理第六个元素5：在对象上设置属性{1: 1, 2: 2, 4: 4, 5: 5}，返回这个对象。
  
• 处理第七个元素5：对象已经有一个5的键，所以只是更新值为5（实际上没有改变），返回对象{1: 1, 2: 2, 4: 4, 5: 5}。
  
• 处理第八个元素6：在对象上设置属性{1: 1, 2: 2, 4: 4, 5: 5, 6: 6}，返回这个对象。
  

---

5.对象引用，函数参数通报，对象属性修改

1.     let objA={name: 'A'}
2.     let objB={name: 'B'}
3.     function main(oa,ob){
4.         oa={};
5.         ob.name='C'
6.     }
7.     main(objA,objB);
8.     console.log(objA.name,objB.name);

复制代码

输出结果为：A C

1. oa = {}; // 这里重新赋值了oa，让它引用了一个新的空对象。这个修改不会影响到objA。
2. 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"
  

扩展说下
 

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

---

三、css、html，JavaScript篇

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

用value和input

• 吸收一个 value 属性。
  
• 在值改变时触发一个 input 变乱。
  

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

1. <template>
2.   <input
3.     :value="value"
4.     @input="$emit('input', $event.target.value)"
5.     :placeholder="placeholder"
6.   />
7. </template>
9. <script>
10. export default {
11.   name: 'MyInput',
12.   props: {
13.     value: {
14.       type: String,
15.       default: ''
16.     },
17.     placeholder: {
18.       type: String,
19.       default: ''
20.     }
21.   }
22. }
23. </script>

复制代码

在这个组件中：

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

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

1. <template>
2.   <div>
3.     <h1>自定义输入组件示例</h1>
4.     <MyInput v-model="message" placeholder="请输入一些文字" />
5.     <p>你输入的是: {{ message }}</p>
6.   </div>
7. </template>
9. <script>
10. import MyInput from './MyInput.vue';
12. export default {
13.   name: 'App',
14.   components: {
15.     MyInput
16.   },
17.   data() {
18.     return {
19.       message: ''
20.     };
21.   }
22. }
23. </script>

复制代码

在这个父组件中：

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

注意事项

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

---

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

justify-content
在交织轴是align-items

---

3.JavaScript可能出现内存走漏的环境有哪些？

DOM 清空时还存在引用，定时器未清除，全局变量未清算，闭包使用不当，变乱监听器未解绑，循环引用，缓存未清算，第三方库或框架存在内存走漏
注意：箭头函数自己不会导致内存走漏
可能存在内存走漏的环境具体版：

• 全局变量未清算：
  
  
  
  • 如果在全局作用域中创建了过多的变量且未实时开释，它们会不停占用内存，导致内存走漏。全局变量会不停存在于内存中，直到页面关闭或手动开释。过多创建并保存全局变量，尤其是大型的数据布局或对象，轻易引发内存走漏题目。
    
  
  
• 闭包使用不当：
  
  
  
  • 闭包可以让函数访问其定义时的作用域。但如果闭包中引用了一些较大的对象或数据布局，且这些对象或数据布局在闭包不再被需要时没有被实时清算，也可能导致内存走漏。
    
  
  
• DOM 元素未正确删除：
  
  
  
  • 在使用 JavaScript 操纵 DOM 元素时，必须确保在不需要它们时正确删除它们。如果保存了对不再需要的 DOM 元素的引用，那么这些元素及其相关的 JavaScript 对象将无法被垃圾接纳器清算，从而导致内存走漏。
    
  
  
• 变乱监听器未解绑：
  
  
  
  • 如果注册了变乱监听器却没有在符合的时候移除它们，那么即使相关的 DOM 元素已经被删除，变乱监听器仍然会保存对它们的引用，导致内存无法被接纳。
    
  
  
• 定时器或回调函数未清除：
  
  
  
  • 使用 setInterval 或 setTimeout 创建的定时器，如果在不再需要时没有实时清除，它们会持续占用内存。即使定时器的回调函数已经实验完毕，定时器自己仍然可能存在于内存中。
    
  
  
• 循环引用：
  
  
  
  • 当两个或多个对象之间存在相互引用，而且这些对象没有其他外部引用可以打破这种循环时，它们将无法被垃圾接纳机制正确处理，从而占用内存。
    
  
  
• 第三方库或框架存在内存走漏：
  
  
  
  • 如果使用了存在内存走漏题目的第三方库或框架，就可能导致整个应用程序出现内存走漏题目。因此，在选择和使用第三方库或框架时，需要谨慎评估其内存管理性能。
    
  
  
• 缓存未清算：
  
  
  
  • 缓存可以进步性能，但如果使用不当，也会带来内存管理的题目。过度使用缓存且未实时清算过期或不再需要的缓存数据，也可能导致内存走漏。
    
  
  

---

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

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

static:元素默认值，按正常的文档流举行定位，从上到下，从左到右，没有特定的原点
relative：相对定位。元素相对于其正常位置举行定位，相对于原本位置举行偏移，定位原点即元素原本在文档流中的位置
absolute：绝对定位。元素相对于近来的已定位先人（即设置了position属性为absolute,relative,fixed,sticky的元素）举行定位。定位原点是近来的已定位先人元素的左上角，相对于初始包罗块的左上角
fixed：固定定位。元素相对于浏览器窗口举行定位，即使页面滚动，也会始终位于同一位置。定位原点为浏览器窗口的左上角
sticky：粘性定位。根据正常文档流举行定位，然后相对于用户的滚动位置在视口内粘性定位，会黏在父元素身上直到某个阈值被超过。定位原点是元素原本在文档流中的位置，滚动到某个阈值后，相对于视口举行定位。

---

加油加油^_^

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4