2024 前端面试题（GPT回答 + 示例代码 + 解释）No.61 - No.100
本文题目来源于全网收集，答案来源于 ChatGPT 和 博主（的小部分……）
格式：题目 h3 + 回答 text + 参考大佬博客补充 text + 示例代码 code+ 解释 quote + 补充 quote
上一篇链接：2024 前端面试题（GPT回答 + 示例代码 + 解释）No.41 - No.60
目录 No.61 - No.100
-
- 本文题目来源于全网收集，答案来源于 ChatGPT 和 博主（的小部分……）
-
- 格式：题目 h3 + 回答 text + 参考大佬博客补充 *text* + 示例代码 ```code```+ 解释 quote + 补充 quote
- 上一篇链接：[2024 前端面试题（GPT回答 + 示例代码 + 解释）No.41 - No.60](https://blog.csdn.net/m0_67023788/article/details/136109021)
- 61. 如何从一个页面 跳转 到另一个页面？
- 62. 如何编码与解码URL？
- 63. [x, y, z].map(Math.pow)的结果是什么?
- 64. toString() 与 valueOf() 的区别
- 66. form 和 input 如何关闭自动完成功能？
- 67. Label的作用是什么？是怎么用的？
- 68. Doctype 是干什么的？
- 69. b 与 strong 的区别、i 与 em 的区别？
- 70. 浏览器存储有哪些？
- 71. Url 到浏览器的一个过程有哪些步骤？（一次完整的 HTTP 事务包括哪些步骤？）
- 72. JSON 和 JSONP 的区别?
- 73. for循环 与 forEach循环的区别?
- 74. 通过 new 的方式创建对象 和 通过字面量创建对象 的区别？
- 75. 常见的浏览器内核有哪些？
- 76. 为什么要初始化CSS样式
- 77. var const let 三者的区别？
- 78. Promise构造函数是同步执行还是异步执行，then 方法呢？
- 79. Promise 有哪几种状态？
- 80. 使用箭头函数应注意什么？
- 81. 什么是 async/await？
- 82. Vue 的双向绑定原理是什么？关键点在哪里？
- 83. Vue 的生命周期有哪些？它们每个阶段做什么操作？
- 84. 父子组件生命周期执行顺序是怎么样的？
- 85. 组件通讯方式有哪些？
- 86. Vuex 有几个属性及作用？
- 87. Vue 的监听属性和计算属性有什么区别？
- 88. Vue 是什么？
- 89. Vue 常用的指令有哪些？
- 90. v-if 和 v-show 有什么区别？
- 91. v-for 为什么要加一个 key ？
- 92. keep-alive是什么？有哪几个生命周期阶段？
- 93. 常用伪元素有哪些？
- 94. Vue 中如何让 CSS 只在当前组件中起作用？
- 95. v-if 和 v-for 哪个优先级更高？
- 96. 子组件可以直接改变父组件的数据吗？
- 97. 什么是 虚拟DOM 和 diff算法
- 98. vue.js 的两个核心是什么？
- 99. Vue 的导航守卫有哪些？
- 100. 当一个导航被触发时，Vue Router 的执行流程是什么？
61. 如何从一个页面 跳转 到另一个页面？
在 JavaScript 中，可以使用以下几种方法从一个页面跳转到另一个页面：
-
使用 window.location.href：
使用window.location.href属性可以改变当前窗口或标签页的 URL，从而实现页面跳转。例如：// 跳转到指定页面 window.location.href = "https://www.example.com"; -
使用 window.location.replace：
使用window.location.replace方法可以在不产生历史记录的情况下跳转到新页面。这意味着用户无法通过浏览器的后退按钮返回到原始页面。例如：// 用新页面替换当前页面 window.location.replace("https://www.example.com"); -
使用 window.location.assign：
使用window.location.assign方法也可以实现页面跳转，类似于window.location.href，但是会在浏览器的历史记录中添加一个新条目，因此用户可以通过后退按钮返回到原始页面。例如：// 在当前页面打开新页面 window.location.assign("https://www.example.com"); -
使用 a 标签：
可以创建一个标签，并设置其href属性为目标页面的 URL，然后使用 JavaScript 触发点击事件来模拟页面跳转。例如：// 创建并点击 标签进行页面跳转 const link = document.createElement("a"); link.href = "https://www.example.com"; link.click();
62. 如何编码与解码URL？
encodeURI函数用于将字符串编码为有效的 URL 字符串，对于特殊字符（如空格、中文字符等）会进行编码。例如：
const url = "https://www.example.com/?query=编码测试";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
// 输出：https://www.example.com/?query=%E7%BC%96%E7%A0%81%E6%B5%8B%E8%AF%95
decodeURI函数用于将编码后的 URL 字符串解码为原始字符串。例如：
const encodedUrl = "https://www.example.com/?query=%E7%BC%96%E7%A0%81%E6%B5%8B%E8%AF%95";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl);
// 输出：https://www.example.com/?query=编码测试
除了 encodeURI 和 decodeURI，还有两个类似的函数：encodeURIComponent 和 decodeURIComponent。它们用于对 URL 的组成部分进行编码和解码，包括特殊字符（如问号、等号、斜杠等），以及保留字（如冒号、逗号等）。
总结一下：
encodeURI和decodeURI用于编码和解码完整的 URL。encodeURIComponent和decodeURIComponent用于编码和解码 URL 的组成部分。
63. [x, y, z].map(Math.pow)的结果是什么?
x0
y1
z2
64. toString() 与 valueOf() 的区别
toString()方法返回对象的字符串表示形式。当JavaScript需要将一个对象转换为字符串时，会自动调用该对象的toString()方法。例如：
var obj = {
name: "John",
age: 25,
toString: function() {
return this.name + ", " + this.age + " years old";
}
};
console.log(obj.toString()); // 输出：John, 25 years old
console.log(String(obj)); // 输出：John, 25 years old
valueOf()方法返回对象的原始值表示形式。当JavaScript需要将一个对象转换为原始值时（如进行数学运算），会自动调用该对象的valueOf()方法。例如：
var obj = {
value: 42,
valueOf: function() {
return this.value;
}
};
console.log(obj.valueOf()); // 输出：42
console.log(Number(obj)); // 输出：42
需要注意的是，toString()和valueOf()方法可以根据具体需求进行重写，以便返回适合的字符串或原始值表示。如果没有重写这些方法，默认情况下会返回对象的内部标签。
总结来说，toString()方法用于将对象转换为字符串，而valueOf()方法用于将对象转换为原始值。
66. form 和 input 如何关闭自动完成功能？
要关闭HTML5表单的自动完成功能，可以使用以下两种方法之一：
- 在form元素上添加autocomplete属性并将其设置为"off"。例如：
<form autocomplete="off">
form>
这将告诉浏览器不要自动填充表单字段。
- 在需要关闭自动完成功能的具体表单字段上，添加autocomplete属性并将其设置为"new-password"。例如：
<input type="text" name="username" autocomplete="new-password">
这会告诉浏览器该字段可以自动完成，但只应提供新密码作为建议。
67. Label的作用是什么？是怎么用的？
用户点击"label"标签时，浏览器会自动将焦点置于input元素上。
- id 绑定
<label for="username">Username:label>
<input type="text" id="username" name="username">
- 嵌套
<label>
Username:
<input type="text" name="username">
label>
68. Doctype 是干什么的？
DOCTYPE是HTML文档中一个重要的声明，它告诉浏览器正在使用哪个HTML版本进行编写，并让浏览器以相应的标准模式来渲染页面。通常，DOCTYPE需要放在HTML文档的第一行。
DOCTYPE的全称为“Document Type Declaration”，它有两个作用：
-
声明文档类型：DOCTYPE告诉浏览器该文档使用哪种HTML版本进行编写，如HTML5、HTML 4.01、XHTML 1.0等。
-
触发标准模式：DOCTYPE还可以触发浏览器的标准模式（严格模式），这是一种更规范的渲染模式，它与浏览器的兼容模式（混杂模式）相对应。标准模式使得浏览器更加一致地解释和渲染页面，从而提高了跨浏览器兼容性。
以下是几种常见的DOCTYPE声明：
HTML5：
DOCTYPE html>
HTML 4.01 Strict：
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 Transitional：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
69. b 与 strong 的区别、i 与 em 的区别？
- b 与 strong 的区别：
b是HTML中的一种文本样式元素，通常用于将文本设置为加粗效果。它的作用仅仅是呈现出文字的视觉效果，没有任何语义含义。
strong是HTML中的一种语义元素，表示文本具有强调重点的意义。除了将文本设置为加粗外，还可以使用CSS样式对其进行进一步的调整和呈现。
- i 与 em 的区别：
i是HTML中的一种文本样式元素，通常用于将文本设置为斜体效果。它的作用与b类似，仅仅是为了呈现出文字的视觉效果，没有任何语义含义。
em是HTML中的一种语义元素，表示文本具有强调强调强调的语义含义。除了将文本设置为斜体外，还可以使用CSS样式对其进行进一步的调整和呈现。
总之，title、b、i等元素主要用于设置文本的样式效果，而h1、strong、em等元素则更多地关注文本的语义含义，这有助于提高文档的可读性、可访问性和搜索引擎优化效果。
70. 浏览器存储有哪些？
浏览器存储指的是在浏览器中保存和管理数据的技术。浏览器存储一般分为以下几种类型：
- Cookie
Cookie是一种小型的文本文件，可以由服务器发送给浏览器，并存储在用户的计算机上。它可以用于记录用户的登录状态、购物车信息等，以便下次访问时能够自动获取这些信息。Cookie的大小通常有限制，不同浏览器和服务器之间也存在差异，因此需要仔细管理。
- SessionStorage
SessionStorage是一种HTML5引入的API，用于将数据保存在浏览器会话期间。它与Cookie不同的是，SessionStorage存储的数据仅在当前会话期间有效，当用户关闭浏览器窗口时，存储的数据也会被删除。
- LocalStorage
LocalStorage也是一种HTML5引入的API，用于将数据保存在浏览器本地，即使用户关闭浏览器后，数据也能保留。LocalStorage的大小通常比Cookie和SessionStorage更大，可以存储数MB的数据。
71. Url 到浏览器的一个过程有哪些步骤？（一次完整的 HTTP 事务包括哪些步骤？）
-
URL 解析：浏览器根据输入的 URL 进行解析，分析其中的协议（如 HTTP、HTTPS）、域名、路径等信息。
-
DNS 解析：浏览器通过 DNS（Domain Name System）将域名解析成对应的 IP 地址，以便能够找到对应的服务器。
-
建立 TCP 连接：浏览器与服务器之间通过 TCP 协议建立连接，这个过程包括三次握手，确保双方能够互相通信。
-
发起 HTTP 请求：浏览器向服务器发送 HTTP 请求，包括请求的方法（GET、POST 等）、路径、请求头（如 Accept、User-Agent 等）以及请求体（对于 POST 请求）。
-
服务器处理请求：服务器接收到请求后，根据请求路径和方法执行相应的处理逻辑，可能涉及到查询数据库、处理业务逻辑等操作。
-
服务器响应：服务器将处理结果封装成 HTTP 响应，包括状态码、响应头（如 Content-Type、Content-Length 等）以及响应体（实际的返回数据）。
-
接收响应数据：浏览器接收到服务器的响应数据，开始解析处理响应内容。
-
渲染页面：如果响应是 HTML 内容，浏览器会解析 HTML、CSS 和 JavaScript，并渲染出页面。
-
关闭 TCP 连接：页面资源加载完成后，浏览器会关闭与服务器的 TCP 连接，释放网络资源。
72. JSON 和 JSONP 的区别?
JSON（JavaScript Object Notation）和JSONP（JSON with Padding）是两种用于在网络上传输数据的格式，它们之间有一些区别：
-
JSON（JavaScript Object Notation）：
- JSON是一种轻量级的数据交换格式，用于在不同系统之间传输结构化数据。
- JSON数据格式是纯粹的数据，通常由键值对组成，使用JavaScript的语法来描述数据结构。
- JSON数据在传输过程中通常使用HTTP协议的请求和响应进行传输，可以被任何支持JSON格式解析的语言所解析和处理。
-
JSONP（JSON with Padding）：
- JSONP是一种利用JSON的跨域技术，允许在客户端从不同域名下获取数据。
- JSONP利用了