2023年-0.0.13

• #Promise 了解多少？【JavaScript】 回答链接：#1

  1. ==Promise 是异步编程的一种解决方案==，比传统的解决方案 —— 回调函数和事件 —— 更合理和更强大。它由社区最早提出和实现， ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
  2. Promise对象有以下两个特点。
     1. 对象的状态不受外界影响。
        Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled ）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是 “ 承诺 ” ，表示其他手段无法改变。
     2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。
        Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（ Event ）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
        有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
        Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

1. #9.call、apply、bind 的区别和用法？【JavaScript】 回答链接：#9

   1. call、apply 和 bind 都是 JavaScript 中用于改变函数执行上下文（即 this 指向）的方法

• #let 和 const 与 var 的区别？【JavaScript】 回答链接：#10

  1. 不存在变量提升
     必须先定义后使用，否则报错
  2. 暂时性死区
     在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
  3. 不允许重复申明/不允许在函数内部重新申明参数（也算重复申明）
  4. SE5的作用域
     1. 内层变量覆盖外层的变量
     2. 用来计数的循环变量会泄露为全局变量
  5. const是一个常量，一旦声明，就不能改变。而且在申明的时候必须初始化，不能留到后面赋值。
  6. 在ES5里面，var 在全局作用域下申明的变量，会自动生为window的属性:
     没法在编译过程爆出变量为申明的错误，语法上顶层对象有一个实体含义的对象这样肯定不合适。
     用var定义的依然会升级为顶层对象(全局对象)window的属性；但是let,const申明则不会。

#19.什么是同源策略？【网络】 回答链接：#19

同源策略是一种安全机制，它是浏览器对 JavaScript 实施的一种安全限制。所谓“同源”是指==域名、协议、端口号==均相同。同源策略限制了一个页面中的脚本只能与同源页面的脚本进行交互，而不能与不同源页面的脚本进行交互。这是为了防止恶意脚本窃取数据、进行 XSS 攻击等安全问题。

同源策略限制的资源包括：

• Cookie、LocalStorage 和 IndexDB 等存储性资源
• AJAX、WebSocket 等发送 HTTP 请求的方法
• DOM 节点
• 其他通过脚本或插件执行的跨域请求

这些资源只能与同源页面进行交互，不能与不同源的页面进行交互。

#24.JS数据类型有哪些，区别是什么？【JavaScript】 回答链接：#24

在 JavaScript 中，数据类型可以分为两类：原始类型和对象类型。原始类型包括：数字（number）、字符串（string）、布尔值（boolean）、null、undefined 和 Symbol（ES6 新增），对象类型包括：对象（object）、数组（array）、函数（function）等。

区别如下：

• 原始类型的值是不可变的，对象类型的值是可变的。
• 原始类型的值是按值访问的，对象类型的值是按引用访问的。
• 原始类型存储在栈内存中，对象类型存储在堆内存中。

原始类型：
具体来说，数字、字符串、布尔值、null 和 undefined 是 JavaScript 中的五种原始类型，它们都是不可变的。每次对原始类型进行操作时，都会创建一个新的原始类型的值。例如：

复制let num1 = 10;
let num2 = num1 + 5;
console.log(num1); // 10
console.log(num2); // 15

在上面的例子中，对 num1 进行操作时并没有改变 num1 的值，而是创建了一个新的值 num2。

对象类型：
对象类型则是可变的，因为对象、数组、函数等值是通过引用来访问的。例如：

复制let obj1 = { name: '张三' };
let obj2 = obj1;
obj2.name = '李四';
console.log(obj1.name); // "李四"
console.log(obj2.name); // "李四"

在上面的例子中，修改了 obj2 的属性值，但由于 obj1 和 obj2 指向的是同一个对象，所以 obj1 的属性值也被修改了。

Symbol：
除了五种原始类型和对象类型外，ES6 新增了一种原始类型：Symbol。它的主要作用是创建唯一的标识符。例如：

复制let s1 = Symbol();
let s2 = Symbol();
console.log(s1 === s2); // false

在上面的例子中，两个 Symbol 创建的值是不相等的，即使它们的值是一样的。

另外值得注意的是，ES6 还引入了一些新的对象类型或结构，例如 Map、Set、WeakMap 和 WeakSet，以及为了更好地处理异步操作引入的 Promise 和生成器对象。这些都属于扩展的 Object 类型，增强了 JavaScript 的功能性和异步编程能力。

#29.请简述 HTTP 请求的过程【网络】 回答链接：#29

HTTP（Hypertext Transfer Protocol）是一种用于传输数据的协议。当我们在浏览器中输入 URL，点击链接或提交表单时，浏览器会发送 HTTP 请求，并等待服务器的响应。以下是 HTTP 请求的基本过程：

建立连接：浏览器向服务器发出连接请求，服务器接受请求并建立连接。

发送请求：浏览器向服务器发送 HTTP 请求。请求包括请求方法（GET、POST、PUT、DELETE等）、请求头（包含一些元数据，如 Accept、Content-Type、Authorization 等）、请求体（POST 和 PUT 请求会带上数据）等。

接受请求：服务器接受请求并解析请求。服务器会根据请求的内容进行相应的处理，如查询数据库、读取文件等。

发送响应：服务器向浏览器发送 HTTP 响应。响应包括响应状态码、响应头、响应体等。常见的响应状态码包括 200 OK、404 Not Found、500 Internal Server Error 等。

接受响应：浏览器接受响应并解析响应。浏览器会根据响应的内容进行相应的处理，如渲染页面、执行 JavaScript 等。

断开连接：请求处理完毕后，浏览器和服务器会断开连接。

需要注意的是，HTTP 是一种无状态协议，即每次请求都是独立的，服务器不会保留任何关于请求的信息。为了保持客户端与服务器之间的状态，通常使用 Cookie 或 Session 等机制来保存状态信息。

此外，现代浏览器通常会使用 HTTP 缓存来提高性能。当浏览器发送请求时，如果发现资源已经在本地缓存中存在，就会直接使用缓存的版本，而不是重新从服务器下载。可以使用 Cache-Control、Expires 等响应头控制缓存的行为。

31.JS 中继承方式有哪些？【JavaScript】 回答链接：#31

1、借助构造函数实现继承

2、通过原型链实现继承

3、组合方式

#32.解释一下 原型、构造函、实例、原型链 之间的关系？【JavaScript】 回答链接：#32

#34.DOM事件类相关问题【JavaScript】 回答链接：#34

#35.解释边距重叠【CSS】 回答链接：#35

什么是BFC

BFC （block formatting context） 及块级格式化上下文，从样式上看，具有 BFC 的元素与普通的容器没有什么区别，从功能上看，BFC相当于构建了一个密闭的盒子模型，在BFC中的元素不受外部元素的影响；

个人理解：BFC就是将盒子中子元素的属性锁在父元素中，例如margin,float 使其不影响盒子外的元素。

如何构建BFC

以下情况都会使元素产生BFC

• 根元素或其它包含它的元素 (也就是html元素本身就是BFC)

• float:left ,right

• position:absolute,fixed

• display:inline-block,table-cell,table-caption;(行内块元素与表格元素)

• overflow：hidden，auto，scroll （非 visible属性）

• display: flow-root

• column-span: all

  ---

#36.水平垂直居中定位【CSS】 回答链接：#36

flex布局

绝对定位

#3.ES6 Generator 了解多少？【JavaScript】 回答链接：#3

ES6中的 Generator（生成器）是一种特殊类型的函数，它可以被暂停和恢复。这意味着在调用Generator函数时，它不会立即执行，而是返回一个可暂停执行的Generator对象。在需要的时候，可以通过调用.next()方法来恢复函数的执行。这使得我们能够编写更具表现力和灵活性的代码。

#4.ES6 Map 数据结构了解多少？【JavaScript】 回答链接：#4

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

Map 对象是键值对的集合。Map 中的一个键只能出现一次；它在 Map 的集合中是独一无二的。Map 对象按键值对迭代——一个 for...of 循环在每次迭代后会返回一个形式为 [key，value] 的数组。迭代按插入顺序进行，即键值对按 set() 方法首次插入到集合中的顺序（也就是说，当调用 set() 时，map 中没有具有相同值的键）进行迭代。

maps复制时不为同一个对象的引用

#5.Map 和 Object 有哪些主要的区别？【JavaScript】 回答链接：#5

1. 1. map默认不包括任意键值，object有一个原型

   2. map的key可因为任意值，object的必须为string或者symbol

   3. map的key按照插入顺序

   4. map有一些方法，get,set,keys,values,entiies

      ---

#6.如何检测对象是否循环引用？【JavaScript】 回答链接：#6

// 对 传入的 subject 对象 内部存储的所有内容执行回调
function execRecursively(fn, subject, _refs = new WeakSet()) {
  // 避免无限递归
  if (_refs.has(subject)) {
    return;
  }

  fn(subject);
  if (typeof subject === "object") {
    _refs.add(subject);
    for (const key in subject) {
      execRecursively(fn, subject[key], _refs);
    }
  }
}

const foo = {
  foo: "Foo",
  bar: {
    bar: "Bar",
  },
};

foo.bar.baz = foo; // 循环引用！
execRecursively((obj) => console.log(obj), foo);

#7.es6 数据结构 Set 了解多少？【JavaScript】 回答链接：#7

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。Set 中的元素只会出现一次，即 Set 中的元素是唯一的。

另外，NaN 和 undefined 都可以被存储在 Set 中，NaN 之间被视为相同的值（NaN 被认为是相同的，尽管 NaN !== NaN）。

#WeakSet

#基本概念

WeakSet 对象允许你将弱保持对象存储在一个集合中。

WeakSet 对象是一些对象值的集合。且其与 Set 类似，WeakSet 中的每个对象值都只能出现一次。在 WeakSet 的集合中，所有对象都是唯一的。

它和 Set 对象的主要区别有：

• WeakSet 只能是对象的集合，而不能像 Set 那样，可以是任何类型的任意值。
• WeakSet 持弱引用：集合中对象的引用为弱引用。如果没有其它的对 WeakSet 中对象的引用，那么这些对象会被当成垃圾回收掉。

这也意味着 WeakSet 中没有存储当前对象的列表。正因为这样，WeakSet 是不可枚举的。

#8.Proxy 和 Reflect 了解多少？【JavaScript】 回答链接：#8

#11.常见数组排序算法有哪些？【JavaScript】 回答链接：#11

#12.WebSocket 了解多少？【网络】 回答链接：#12

#

#13.postMessage 是如何解决跨域问题的？【网络】 回答链接：#13

postMessage 是 HTML5 提供的一种跨窗口通信机制，可以在不同窗口、甚至不同域名之间进行通信，从而实现跨域通信。通过在一个窗口中调用 postMessage 方法向另一个窗口发送消息，接收窗口可以监听 message 事件，以接收发送过来的消息。

使用 postMessage 可以解决一些跨域问题，如在一个域名下的网页与其他域名下的网页进行通信。具体来说，当两个窗口的协议、主机名或端口不同时，就会发生跨域问题。但使用 postMessage 可以突破同源策略的限制，实现不同域之间的通信。

一般情况下，为了保证安全，使用 postMessage 进行跨域通信时，需要在目标窗口中设置 window.postMessage 的接收地址，只有来自该地址的消息才能被接收，从而避免了安全问题。同时，可以使用 origin 参数来限制消息来源，避免恶意攻击。

#14.CORS 是如何实现跨域的？【网络】 回答链接：#14

#15.JSONP 是如何实现跨域的?【网络】 回答链接：#15

#16.跨域通信的常见方式有哪些?【网络】 回答链接：#16

#17.ajax如何获取下载进度?【JavaScript】 回答链接：#17

#18.手写创建一个 ajax 请求【JavaScript】 回答链接：#18

#20.JS 有哪些迭代器，该如何使用？【JavaScript】 回答链接：#20

#21.如何使对象 iterable 化， 以其可以支持 for...of 迭代【JavaScript】 回答链接：#21

#22.js 对象可以使用 for...of 迭代吗？【JavaScript】 回答链接：#22

#23.详细讲一下 Symbol 数据类型特征与实际使用案例？【JavaScript】 回答链接：#23

#25.网络模型分层大概有哪些层级？【网络】 回答链接：#25

#26.TCP 传输过程？【网络】 回答链接：#26

#27.HTTP建立连接的过程?【网络】 回答链接：#27

#30.实现一个双向链表， 具备添加节点、删除节点、在特定位置插入节点、查找节点、遍历等功能【JavaScript】 回答链接：#30

#33.Http协议基础【网络】 回答链接：#33

#2.手写 async 函数？【JavaScript】 回答链接：#2

#28.HTTP 缓存策略有哪些？【网络】 回答链接：#28