欢迎来到尧图网

客户服务 关于我们

您的位置：首页 > 科技 > IT业 > 前端面试题

前端面试题

2024/10/24 11:13:42 来源：https://blog.csdn.net/m0_64450406/article/details/141289838  浏览:  次   关键词：前端面试题

目录

1.JS中数组查找元素的时间复杂度

2.从数组头部 弹出一个元素的时间复杂度是多少（就把下面这些时间复杂度都记一下）

修改数组 

访问数组

3.作用域和作用域链

4.cookie

5.后端怎么传cookie

注意事项

6.HTTP里面AES是对称加密还是非对称加密

7.HTTP网络安全协议有哪些（扩展）

8.vue2为什么不建议用箭头函数

1.JS中数组查找元素的时间复杂度

在JavaScript中，数组查找元素的时间复杂度主要取决于你使用的查找方法。以下是几种常见的查找方法及它们的时间复杂度：

  1. 线性查找（Linear Search）：
    • 时间复杂度：O(n)，其中n是数组的长度。
  2. 线性查找会遍历数组中的每个元素，直到找到目标元素或遍历完整个数组
function linearSearch(arr, target) {  for (let i = 0; i < arr.length; i++) {  if (arr[i] === target) {  return i; // 返回目标元素的索引  }  }  return -1; // 如果未找到目标元素，则返回-1  
}  // 示例  
const arr = [3, 5, 7, 9, 11];  
const target = 7;  
console.log(linearSearch(arr, target)); // 输出: 2

indexof方法查找，indexof方法区分大小写

// 定义一个数组  
const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];  // 使用 indexOf 方法查找元素 'banana'  
const index = fruits.indexOf('banana');  // 输出索引位置  
console.log(index);
  1. 二分查找（Binary Search）（前提：数组已排序）：
    • 时间复杂度：O(log n)，其中n是数组的长度。
    • 二分查找通过不断地将搜索区间减半来查找目标元素，但它要求数组是有序的。
function binarySearch(arr, target) {  let left = 0;  let right = arr.length - 1;  while (left <= right) {  const mid = Math.floor((left + right) / 2);  if (arr[mid] === target) {  return mid; // 找到目标元素，返回其索引  } else if (arr[mid] < target) {  left = mid + 1; // 调整左边界  } else {  right = mid - 1; // 调整右边界  }  }  return -1; // 未找到目标元素，返回-1  
}  // 示例（注意：数组需要是有序的）  
const sortedArr = [3, 5, 7, 9, 11];  
const target = 9;  
console.log(binarySearch(sortedArr, target)); // 输出: 3
  1. 哈希查找（Hashing）（如果数组元素被用作哈希表的键）：
    • 理想情况下的时间复杂度：O(1)。哈希查找通过将键映射到哈希表的槽位上来快速定位元素。但是，如果哈希函数设计得不好或者哈希表发生了大量碰撞，则查找时间可能会增加。
    • 在最坏情况下的时间复杂度：可能退化到O(n)，这通常发生在哈希表填充率过高且解决碰撞的策略不够高效时。
function hashSearch(hashMap, target) {  return hashMap[target] !== undefined ? hashMap[target] : -1; // 如果存在目标元素，则返回其值（或自定义的索引/信息），否则返回-1  
}  // 示例  
const hashMap = {  'apple': 1,  'banana': 2,  'cherry': 3  
};  
const target = 'banana';  
console.log(hashSearch(hashMap, target)); // 输出: 2  // 注意：这里的返回值是哈希表中目标键对应的值，而不是索引。如果你想要索引，可以在插入时自定义一个索引映射。

2.从数组头部 弹出一个元素的时间复杂度是多少（就把下面这些时间复杂度都记一下）

修改数组 
  1. push（参数1，参数2，……）：在数组末尾增加一个或者多个元素
  2. pop（）：删除数组的最后一个元素
  3. unshift(参数1，参数2，……)：在数组开头添加一个或者多个元素
  4. shift()：删除数组的第一个元素，数组长度减1，无参数修改原数组

push和pop时间复杂度为O（1）unshift和shift时间复杂度为O（n)

访问数组

直接通过数组的索引访问数组的时间复杂度是O(1)

find() 方法的时间复杂度是 O(n)

3.作用域和作用域链

作用域分为全局作用域，局部作用域，块级作用域（ES6新增）

作用域链
当JavaScript引擎需要查找一个变量时，它会从当前作用域开始查找，如果没有找到，就会继续向上查找父级作用域，直到找到全局作用域。这个逐级向上查找的过程形成了一条作用域链。

4.cookie

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies

用户识别：Cookie 允许网站在用户的不同访问之间识别用户。当用户在浏览器中首次访问网站时，服务器可以在响应中包含一个 Set-Cookie 头部，该头部指示浏览器存储一个小段的数据（即 Cookie）。在随后的请求中，浏览器会在请求头部中包含这些 Cookie，这样服务器就可以知道这是来自同一个用户的请求。

node.js中cookie的使用

https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value

在node.js里面

response.setHeader('Set-Cookie', ['type=ninja', 'language=javascript']);
Set-Cookie: <cookie-name>=<cookie-value>

这指示服务器发送标头告知客户端存储一对 cookie：

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry[页面内容]

node.js标头

// returns content-type = text/plain
const server = http.createServer((req, res) => {res.setHeader('Content-Type', 'text/html');res.setHeader('X-Foo', 'bar');res.writeHead(200, { 'Content-Type': 'text/plain' });res.end('ok');
});

 会话管理：Cookie 常用于管理用户的会话。在用户登录网站后，服务器可以生成一个会话标识符（Session ID）并将其存储在 Cookie 中。之后，每当用户发送请求时，服务器就可以通过读取 Cookie 中的会话标识符来识别用户的会话，从而提供个性化的内容或服务。
个性化设置：网站可以利用 Cookie 存储用户的偏好设置，如语言选择、页面布局、字体大小等。这样，当用户再次访问网站时，网站可以根据 Cookie 中的信息自动调整页面设置，以满足用户的个性化需求。
跟踪用户行为：通过 Cookie，网站可以跟踪用户的浏览行为，包括用户访问的页面、停留的时间、点击的链接等。这些信息有助于网站分析用户的行为模式，从而优化网站结构和内容，提高用户体验。
跨站请求伪造（CSRF）防护：虽然 Cookie 本身不是用于 CSRF 防护的，但通过将 Cookie 与其他安全措施（如 CSRF 令牌）结合使用，可以提高网站的安全性。

5.后端怎么传cookie

 1. 创建Cookie对象
首先，你需要在后端代码中创建一个或多个Cookie对象。这些对象将包含你想要发送给客户端的信息，如用户ID、会话标识符等。

import javax.servlet.http.Cookie;  
import javax.servlet.http.HttpServletResponse;  public class CookieHandler {  public void setCookie(HttpServletResponse response) {  // 创建一个Cookie对象  Cookie cookie = new Cookie("user", "John Doe");  // 设置Cookie的有效期（秒），例如设置为3600秒（1小时）  cookie.setMaxAge(3600);  // 设置Cookie的路径，这里设置为根目录，表示对整个网站有效  cookie.setPath("/");  // 将Cookie添加到HTTP响应中  response.addCookie(cookie);  }  // 如果需要传递多个Cookie  public void setCookies(HttpServletResponse response) {  Cookie cookie1 = new Cookie("user", "John Doe");  cookie1.setMaxAge(3600);  cookie1.setPath("/");  Cookie cookie2 = new Cookie("language", "en");  cookie2.setMaxAge(3600);  cookie2.setPath("/");  response.addCookie(cookie1);  response.addCookie(cookie2);  }  
}

2. 将Cookie添加到HTTP响应中
在创建了Cookie对象之后，你需要通过HTTP响应将这些对象发送给客户端。这通常是通过调用HttpServletResponse对象的addCookie(Cookie cookie)方法完成的。

注意事项

有效期：你可以通过setMaxAge(int expiry)方法设置Cookie的有效期（以秒为单位）。如果设置为0，则表示Cookie仅在当前浏览器会话中有效，浏览器关闭时Cookie将被删除。如果设置为负值，则表示该Cookie为临时Cookie，不会被存储在客户端的硬盘上，仅在当前浏览器会话中有效。
路径：通过setPath(String uri)方法可以设置Cookie的路径。默认情况下，Cookie的路径与创建它的请求的路径相同。但是，你可以将其设置为更通用的路径，比如网站的根目录，这样该Cookie就可以在整个网站中访问。
安全性：对于敏感信息，不建议直接存储在Cookie中。如果必须存储敏感信息，请考虑使用HTTPS来加密Cookie的传输，并设置Cookie的HttpOnly和Secure标志以提高安全性。
跨域问题：如果你正在处理跨域请求，并希望携带Cookie，你需要在发送请求时设置withCredentials为true（在使用如XMLHttpRequest或Fetch API时），并且服务器需要设置适当的CORS（跨源资源共享）头部以允许携带Cookie。

6.HTTP里面AES是对称加密还是非对称加密

在HTTP中，AES（Advanced Encryption Standard，高级加密标准）属于对称加密算法。

对称加密的特点
密钥相同：加密和解密使用同一个密钥。这意味着数据的发送方和接收方必须事先共享这个密钥，才能确保加密的数据能够被正确解密。
效率高：由于加密和解密使用相同的密钥，并且算法相对简单，因此对称加密的运算速度较快，适合处理大量数据的加密和解密。
安全性：虽然对称加密的密钥必须保密，但只要密钥不被泄露，加密的数据就是安全的。
AES算法
AES是目前广泛使用的对称加密算法之一，其加密强度高、运算速度快，并且有多种密钥长度可供选择（如128位、192位和256位）。AES算法被广泛应用于各种需要数据加密的场景，包括网络通信、数据存储等。

在HTTP中的应用
在HTTP通信中，由于HTTP本身不提供加密功能，因此通常需要使用其他机制来确保数据的安全性。HTTPS（HTTP Secure）就是HTTP的一个安全版本，它通过SSL/TLS协议来实现数据的加密传输。在SSL/TLS协议中，通常会结合使用对称加密和非对称加密来确保数据的安全性。具体来说，在通信开始时，双方会使用非对称加密算法（如RSA）来交换一个对称加密的密钥（如AES密钥），然后在后续的通信中，就使用这个对称密钥来进行数据的加密和解密。

7.HTTP网络安全协议有哪些（扩展）

1. HTTPS（HTTP Secure）
简介：HTTPS是HTTP的安全版本，通过在HTTP协议的基础上加入SSL（Secure Sockets Layer，安全套接层）或TLS（Transport Layer Security，传输层安全）协议来实现数据的加密传输和身份验证。
功能：
数据加密：通过SSL/TLS协议对数据进行加密，确保数据在传输过程中的机密性和完整性。
身份验证：通过数字证书对服务器进行身份验证，防止中间人攻击。
完整性校验：通过消息认证码（MAC）确保数据在传输过程中未被篡改。
默认端口：HTTPS默认使用端口443。
2. SSL/TLS
简介：SSL和TLS是用于在两个通信应用程序之间提供保密性和数据完整性的安全协议。SSL是早期的版本，而TLS是SSL的继任者，目前广泛使用的是TLS 1.2和TLS 1.3版本。
功能：
加密通信：使用公钥和私钥进行加密和解密，确保数据的机密性。
身份验证：通过数字证书验证通信双方的身份。
密钥协商：通过协议中的握手过程协商加密通信所需的密钥。
3. 数字证书
简介：数字证书是一种用于身份验证的电子文档，它包含了证书持有者的公钥信息、身份信息以及证书颁发机构的签名。
功能：
身份验证：验证通信双方的身份，防止中间人攻击。
密钥分发：通过数字证书分发公钥，确保加密通信的顺利进行。
4. HTTP/2
简介：HTTP/2是HTTP协议的最新版本，旨在提高网页的加载速度和性能。
安全相关功能：
头部压缩：减小了请求和响应的头部大小，减少了带宽消耗和加载时间，虽然不直接增加安全性，但提高了效率。
多路复用：允许多个请求和响应同时在单个连接上传输，减少了建立新连接的开销，提高了整体的安全性（因为减少了暴露于潜在攻击的时间）。
5. 其他安全协议和机制
HTTP Strict Transport Security (HSTS)：要求浏览器仅通过HTTPS与服务器建立连接，防止中间人攻击。
内容安全策略 (CSP)：减少跨站脚本（XSS）等攻击的风险。
HTTP认证：如基本认证（Basic Authentication）和摘要认证（Digest Authentication），虽然它们本身并不加密传输的数据，但可以提供一种身份验证机制。

8.vue2为什么不建议用箭头函数

箭头函数的this绑定特性

  • 箭头函数不绑定自己的this，而是继承自外围作用域的this值。
  • 这意味着，如果你在Vue组件的methods中使用箭头函数，那么这些函数中的this将不会指向Vue组件实例，而是指向定义这些箭头函数时所在的外围作用域（通常是Vue组件的methods对象本身，但在严格模式下，它可能是undefined）。

Vue 2中不建议使用箭头函数的具体原因

  • 无法访问组件实例的属性和方法：

由于箭头函数中的this不指向Vue组件实例，因此在箭头函数内部无法直接访问组件的data、computed属性、methods等。这会导致在尝试访问这些属性或方法时出现错误。

  • 生命周期钩子函数和选项中的函数：

在Vue 2中，生命周期钩子函数（如created、mounted等）以及配置选项中的函数（如watch、computed中的函数）都应该使用普通函数来定义，以确保this能够正确指向Vue组件实例。如果使用箭头函数，则会导致this指向错误，从而无法访问组件的属性和方法。

  • 代码可读性和维护性：

虽然这不是一个直接的技术原因，但使用箭头函数可能会降低Vue组件代码的可读性和维护性。因为Vue组件的开发者通常期望在组件的方法中能够直接通过this来访问组件的属性和方法，而箭头函数打破了这一期望。

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

12_Linux进程管理命令详解 使用Dask在多块AMD GPU上加速XGBoost YOLOv11入门到入土使用教程(含结构图) 京东 北京 java 中级: 哪些情况下的对象会被垃圾回收机制处理掉? 哪些对象可以被看做是 GC Roots 呢？对象不可达，一定会被垃圾收集器回收么？ 适合做小说推文的素材哪里找？5个高清推文视频素材网站推荐 Adobe Media Encoder--将可变帧率视频转为固定帧率