前端面试题10.23 2
set和map的用法
Set和Map都是ES6中引入的数据结构，用于存储不重复的值和键值对。Set是一组唯一值的有序集合，Map是一组键值对的有序集合。
如何遍历map，为什么可以用for of遍历
使用for...of循环可以遍历Map对象。for...of循环会迭代Map对象的键值对，并将每个键值对作为一个数组返回。可以通过解构赋值来获取键和值。这是因为Map对象内部实现了一个迭代器（Iterator），for...of循环可以通过迭代器来遍历Map中的键值对。
用for of遍历普通对象可以吗 如何用for of遍历普通对象（迭代器会写吗）
普通对象（Plain Object）不能使用for...of循环来遍历。for...of循环是基于迭代器实现的，而普通对象没有内置的迭代器。可以使用Object.keys()、Object.values()或Object.entries()等方法来获取普通对象的可迭代属性，并使用for...of循环遍历。
promise的理解
Promise是一种用于处理异步操作的对象。它代表了一个异步操作的最终完成或失败，并可以获取其结果。Promise有三个状态：pending（进行中）、fulfilled（已完成）和rejected（已失败）。
Promise对象可以通过new关键字来创建，并接收一个执行器函数作为参数。执行器函数接收两个参数：resolve和reject，分别用于将Promise的状态从pending改变为fulfilled或rejected。
通过调用Promise的then()方法可以注册异步操作成功时的回调函数，通过调用catch()方法可以注册异步操作失败时的回调函数。
promise的then方法的参数是怎么来的，catch方法的参数是怎么来的
Promise的then()方法和catch()方法的参数是通过上一步Promise对象的resolve()和reject()方法传递的。then()方法接收一个成功回调函数作为参数，该函数的参数是上一步Promise对象的resolve()方法传递的值；catch()方法接收一个失败回调函数作为参数，该函数的参数是上一步Promise对象的reject()方法传递的值。
aysnc和await的理解，await等的值是什么（具体回答）await 1的结果是什么
async和await是ES8中引入的一种处理异步操作的语法糖。async函数是返回一个Promise对象的函数，await用于等待一个Promise对象的结果。await关键字后面可以跟一个Promise对象，如果该对象变为fulfilled状态，则返回其结果；如果该对象变为rejected状态，则抛出一个异常。
await等待的值可以是Promise对象、thenable对象、原始类型（例如数字、字符串等）或普通对象。如果不是Promise对象，await会将其转换为一个已经fulfilled状态的Promise对象，并返回其值。
await 1的结果是1，因为await会将原始类型的值转换为一个已经fulfilled状态的Promise对象，并返回该值。
如何监听屏幕窗口的变化
监听屏幕窗口的变化可以通过window对象的resize事件来实现。可以通过addEventListener()方法来监听resize事件，并在回调函数中处理窗口大小变化的逻辑。
window.addEventListener('resize', () => {
// 处理窗口大小变化的逻辑
});
resize事件在窗口大小改变时触发，可以通过event对象获取窗口的新尺寸信息。
MVVM的原理
MVVM（Model-View-ViewModel）是一种软件架构模式，用于将用户界面（View）与业务逻辑（Model）分离，并通过ViewModel来进行交互。在MVVM模式中，ViewModel负责将Model的数据同步到View中，并处理View的用户输入，更新Model的数据。
ViewModel是一个与View和Model交互的中间层，它通过双向绑定机制将View的变化及时反映到Model中，同时将Model的数据变化同步到View中。
vue的虚拟dom和真实dom是如何绑定的
Vue的虚拟DOM和真实DOM是通过Vue的响应式系统实现绑定的。Vue使用虚拟DOM来描述真实DOM的结构和属性，当数据发生变化时，Vue会通过比较新旧虚拟DOM的差异，然后只更新需要变化的部分，从而减少对真实DOM的操作，提高性能。
当数据发生变化时，Vue会重新渲染虚拟DOM，并通过diff算法找出需要更新的差异。然后，Vue将差异应用到真实DOM上，使得真实DOM和虚拟DOM保持同步。
路由的原理是什么
路由的原理是基于浏览器的History API和hashchange事件来实现的。通过History API，可以在不刷新页面的情况下，动态改变浏览器地址栏中的URL，并且可以通过前进和后退按钮进行导航。
两种路由的区别，使用场景是什么
Vue中有两种路由模式：hash模式和history模式。
使用场景：hash模式适合在不支持HTML5 History API的浏览器环境中使用，history模式适合在支持HTML5 History API的现代浏览器环境中使用。
-
Hash模式：URL中会带有一个#符号，例如
http://example.com/#/home。在hash模式下，路由信息会被存储在URL的哈希部分，不会发送到服务器。浏览器通过监听hashchange事件来响应路由的变化。 -
History模式：URL中不会有#符号，例如
http://example.com/home。在history模式下，路由信息会被存储在浏览器的历史记录中，可以通过浏览器的前进和后退按钮进行导航。为了支持history模式，需要在服务器上进行相应的配置，以确保在刷新页面时能够正确响应路由。
了解http的缓存吗
HTTP缓存通过充分利用请求和响应报文中的缓存控制字段来实现缓存数据的存储及重复使用，以减少带宽使用，提高服务器和客户端效率。HTTP缓存主要包括以下两种：
-
强缓存：如果请求的资源在有效期内，那么网络不会被触发，浏览器直接从缓存中读取资源。此时返回HTTP 200状态码。强制缓存通过两个HTTP Header实现：Expires和Cache-Control。
-
协商缓存：协商缓存则是强缓存失效后，使用协议提供的某种机制，让浏览器和服务器通过某种机制判断，决定是否使用缓存。其主要是通过Last-Modified和ETag两种方式实现。
http的各种协议
HTTP协议包括一些版本如HTTP/1.0、HTTP/1.1和HTTP/2等。
-
HTTP/1.0：HTTP/1.0版本在1996年5月发布，它在HTTP/0.9的基础上增加了很多重要特性，例如，头部（header）、多媒体对象等。
-
HTTP/1.1：HTTP/1.1版本于1997年1月发布，它在HTTP/1.0的基础上增加了持久连接、节约带宽等概念，降低了延迟，提高了数据传输的速度。
-
HTTP/2：HTTP/2版本于2015年发布，主要目标是通过支持完整的请求和响应复用，减少延迟来提高页面加载速度。
http的csp策略
内容安全策略（Content Security Policy，CSP）是一种提供网站安全的重要工具，可以用来减少或消除某些特定的、特定类型的攻击，包括跨站脚本（XSS）和数据注入攻击等。CSP的基本思想是白名单制度，开发者明确告诉浏览器哪些外部资源可以加载和执行，我们只需要配置策略，如何拦截是由浏览器自己实现的。我们可以通过HTTP Header中的Content-Security-Policy来设置CSP策略，或者通过HTML的标签来设置。
实现一个Human类，满足以下功能const human = new Human()
human.say('hello').sleep(2).say('world').done();
done执行后，依次输出hello，两秒钟后，输出world
class Human {
constructor() {
this.queue = Promise.resolve();
}
say(word) {
this.queue = this.queue.then(() => {
console.log(word);
return Promise.resolve();
});
return this;
}
sleep(time) {
this.queue = this.queue.then(() => {
return new Promise(resolve => setTimeout(resolve, time * 1000));
});
return this;
}
done() {
return this.queue;
}
}
//测试代码
const human = new Human();
human.say('hello').sleep(2).say('world').done();
此代码中，使用了 JavaScript 的 Promise 机制来解决异步问题，并通过链式调用的方式确保 say 与 sleep 方法的调用顺序，其中 say 方法立即执行并输出字符串，而 sleep 方法则在指定时间后继续执行后续操作。最后，done 方法返回最后一个 Promise 对象，确保所有操作都已完成。