前端

服务端

计算机基础

JavaScript 是一种基于脚本的编程语言，主要用于在 Web 页面上实现交互式的效果和动态的内容。JavaScript 是一种解释性语言，不需要编译就可以直接在浏览器中运行。

JavaScript 的主要特点包括：

轻量级：JavaScript 代码通常比较短小，可以快速加载和执行。

可移植性：JavaScript 可以在各种不同的浏览器和操作系统上运行。

面向对象编程：JavaScript 支持面向对象编程，包括对象、继承、封装等特性，可以用于构建复杂的软件系统。

客户端脚本语言：JavaScript 主要用于在 Web 页面上实现交互式的效果和动态的内容，可以与 HTML 和 CSS 一起使用。

异步编程：JavaScript 支持异步编程，可以利用回调函数、Promise、async/await 等方式实现异步操作，提高程序的性能和响应能力。

JavaScript 在 Web 开发中扮演着非常重要的角色，它可以用于实现各种交互式的效果和动态的内容，如表单验证、动画效果、AJAX 等。同时，JavaScript 也可以用于开发各种类型的应用程序，如桌面应用程序、移动应用程序等。

如果您想成为一名 Web 开发人员，JavaScript 是必不可少的编程语言之一，需要掌握 JavaScript 的基本语法和常用的开发框架和库，如 React、Angular、Vue 等。掌握 JavaScript 可以帮助您更加高效和灵活地实现 Web 开发中的各种功能和效果，为自己的职业发展和个人成长打下坚实的基础。

JavaScript

在实现一个`JSON.stringify`功能时，我们需要考虑几个关键点：正确处理不同类型的数据（如字符串、数字、对象、数组等），处理循环引用和其他边界情况，以及保证转换后的字符串格式正确。下面我们一步步来实现简化版的`JSON.stringify`。

### 第一步：基础类型处理
对于基础数据类型，处理相对简单：
- **数字**：直接转换为其字符串形式。
- **字符串**：需要加上引号，并处理特殊字符，如转义字符。
- **布尔值**：转换为`"true"`或`"false"`。
- **`null`**：直接返回`"null"`。

### 第二步：数组和对象
对于数组和对象，需要递归处理其内部元素：
- **数组**：遍历数组的每个元素，对每个元素应用`stringify`，然后将结果用逗号连接，最后加上`[]`。
- **对象**：遍历对象的每个可枚举属性，对键和值应用`stringify`，然后将结果用冒号和逗号连接，注意键名需要加引号，最后加上`{}`。

### 第三步：特殊情况处理
- **undefined、函数和symbol**：在JSON中这些类型是不被允许的，通常应该返回`undefined`或者在数组中被转换为`null`。
- **循环引用**：需要维护一个已访问对象的记录，如果检测到循环引用，应抛出错误或者别的处理方式。

### 示例实现
这里是一个简化的示例实现，只包含基础的功能：

```javascript
function jsonStringify(obj) {
    const type = typeof obj;
    if (type !== 'object' || obj === null) {
        // 非对象或null直接返回文本
        if (type === 'string') obj = '"' + obj + '"';
        return String(obj);
    } else {
        const json = [];
        const isArray = Array.isArray(obj);
        for (const key in obj) {
            let value = obj[key];
            const valueType = typeof value;
            if (valueType === 'string') {
                value = '"' + value + '"';
            } else if (valueType === 'object' && value !== null) {
                value = jsonStringify(value);
            }
            json.push((isArray ? "" : '"' + key + '":') + String(value));
        }
        return (isArray ? "[" : "{") + String(json) + (isArray ? "]" : "}");
    }
}
```

### 测试示例
```javascript
console.log(jsonStringify({ x: 5, y: 6 }));  // 输出：{"x":5,"y":6}
console.log(jsonStringify([1, "false", false]));  // 输出：[1,"false",false]
console.log(jsonStringify({ x: [10, undefined, function(){}, Symbol('')] }));  // 输出：{"x":[10,null,null,null]}
```

这个实现非常基础，许多复杂情况如日期对象、正则对象、BigInt、循环引用等情况都没有处理。在实际开发中，需要根据具体需求添加更多的处理逻辑和优化。

如何实现一个JSON.stringify

JavaScript中有8种基本类型的值：

1. **Undefined**：一个未给定值的变量的类型是undefined。例如: `let x;`
2. **Null**：表示缺少或者空值的类型。例如：`let x = null;`
3. **Boolean**：有两个boolean操作符：true 和 false。例如：`let x = true;`
4. **String**：用于显示文本数据的类型。例如：`let x = 'hello world';`
5. **Number**：用于表示整数和浮点数。例如：`let x = 3.14;`
6. **BigInt**：一种用于存储和操作任意大小整数的类型。例如：`let x = 9007199254740991n;`
7. **Symbol**：一种唯一并且不可变的数据类型。例如：`let x = Symbol('hi');`
8. **Object**：对象数据类型用于存储更复杂的数据集。例如: `let x = {firstName:"John", lastName:"Doe"};`



以上8种类型可大致分为两类：

- 原始值（Undefined, Null, Boolean, Number, String, Symbol, BigInt
- 对象值（Object）。


JavaScript有几种类型的值

> 强制类型转换

**强制类型转换** 是指开发者显式地将一种数据类型转换为另一种数据类型。

强制类型转换的例子：

1. **Number转换为String**：使用 `toString()`方法来转换数字为字符串。例如：`(123).toString()`，结果为 `"123"`。
2. **String转换为Number**：使用 `Number()`函数将字符串转换为数字。例如：`Number("123")`，结果为 `123`。
3. **非布尔值转换为布尔值**：使用 `Boolean()`函数将非布尔值转换为布尔值。例如：`Boolean(1)`，结果为 `true`。

> **隐式类型转换**

**隐式类型转换**，又被称为**隐式类型强制转换**，是指JavaScript引擎在处理表达式时自动完成的类型转换。

隐式类型转换的两个例子：

1. **加法运算符**：当通过加法运算符加入字符串和非字符串（数字，布尔值等）时，非字符串将被转换为字符串。例如：`"5" + 3`，结果为 `"53"`。
2. **相等性比较**：如果比较的值具有不同的类型，JavaScript会尝试通过诸如转换字符串为数字，或转换布尔值为数字等方式，来进行比较。例如：`"5" == 5`，结果为 `true`。


列举 3 种强制类型转换和 2 种隐式类型转换

HTML表单（form）是可以执行跨域请求的。

在Web开发中，跨域请求指的是从一个源（domain、协议、端口）发起的请求试图获取另一个源上的资源。通常，出于安全考虑，浏览器会实施同源策略（Same-Origin Policy），这意味着如果使用XMLHttpRequest或Fetch API来发起Ajax请求，那么请求通常会受到限制，除非目标服务器明确允许跨源资源共享（CORS，Cross-Origin Resource Sharing）。

但是，HTML表单不受同源策略的限制，因此可以向任何URL发起POST或GET请求，即使这个URL指向的是另一个域。当表单提交时，浏览器会将用户输入的数据作为请求参数发送到表单的 `action`属性所指定的URL。不过，使用表单进行跨域提交时，浏览器会导航到响应页面，也就是说用户的当前页面会被新页面替换。

下面是一个简单的表单跨域请求的例子：

```html
<form action="https://example.com/api/submit" method="POST">
  <input type="text" name="username" value="User">
  <input type="text" name="password" value="Pass">
  <input type="submit" value="Submit">
</form>
```

在此示例中，表单数据将提交给位于 `example.com`域的服务器，即使表单所在的HTML页面可能托管在不同的域上。当用户点击提交按钮时，浏览器会将表单数据作为POST请求的一部分发送到 `example.com`。

需要注意的是，即使表单可以跨域提交，服务端仍然需要处理来自不同源的请求。此外，跨域表单提交不会提供Ajax那样的客户端JavaScript接口来访问响应内容，除非服务器在响应中包含适当的CORS头部信息。


Form 表单可以执行跨域请求吗？

JavaScript 的执行过程大致可以分为以下几个阶段：

### 1. 解析（Parsing）

在这一阶段，JavaScript 引擎会读取源代码，并将其解析成抽象语法树（AST）。抽象语法树是一种深层次的、结构化的代码表达方式，能够以树形结构表现代码中的每个语句、表达式等元素。解析过程中，如果遇到语法错误，会抛出错误，停止进一步执行。

### 2. 编译（Compilation）

JavaScript 引擎（如V8）通常会将解析后的代码进行即时编译（JIT）。编译器会先生成字节码，这是一种低级的、比源代码更接近机器语言的代码。随后根据程序的执行情况，编译器可能会把热点代码（经常执行的代码）编译成优化的机器码，提高执行效率。

### 3. 执行（Execution）

编译后得到的字节码或机器码被送到 JavaScript 引擎的执行环境中执行。在执行过程中，会进入下面的子阶段：

- **创建执行上下文（Execution Context）**：首先会创建全局执行上下文，随后每当调用一个函数时，就会为该函数创建一个新的执行上下文。执行上下文包括变量对象、作用域链和 `this` 引用等信息。
- **变量提升（Hoisting）**：在执行代码前，函数声明和变量（声明）会被提升到它们各自的执行上下文的顶部。变量会初始化为 `undefined`，而函数则会完整地提升。
- **执行代码（Running Code）**：按照执行上下文中的代码逐行执行，进行变量赋值、函数调用等。
- **垃圾回收（Garbage Collection）**：在执行过程中，引擎会进行内存管理，自动释放那些不再被需要的内存空间。

### 4. 优化（Optimization）

在代码执行的过程中，某些代码可能会被执行多次，引擎会尝试对这些频繁执行的代码进行优化。例如，在V8引擎中，有一个称为“TurboFan”的优化编译器，它可以根据代码执行的特点对代码进行优化，提高性能。如果优化假设失败了（即出现了“去优化” deoptimization），引擎还可以将代码回退到一个较少优化的版本。

### 5. 回收（Deoptimization & Garbage Collection）

对于那些不再需要的数据和优化，JavaScript 引擎会进行去优化和垃圾回收，以保证内存的高效使用。

**例子：**
假设我们有这样一个简单的 JavaScript 函数：

```javascript
function sum(a, b) {
  return a + b;
}

let result = sum(5, 3);
```

首先，该函数会被解析成 AST。然后，它可能会被编译成字节码，当我们调用 `sum(5, 3)` 时，会创建一个新的执行上下文，包含 `a` 和 `b` 的参数以及任何局部变量。在这个上下文中，`a` 和 `b` 被赋予了值 `5` 和 `3`，函数执行，并返回结果 `8`。这个过程中可能还包括了对 `sum` 函数的优化，如果函数被频繁调用。最后，当执行上下文离开作用域，如果没有其他引用指向其中的数据，垃圾回收器最终会清理掉这些对象。


JavaScript 执行过程分为哪些阶段？

JavaScript 区分微任务（microtasks）和宏任务（macrotasks）主要是为了有效地管理异步操作的执行时机和顺序。这两种类型的任务允许 JavaScript 引擎维持一个控制异步操作何时何地执行的精细化调度机制。

### 宏任务 (Macrotasks)
宏任务通常是浏览器的主要任务，包括但不限于：
- `setTimeout`
- `setInterval`
- I/O 操作
- UI 渲染
- 事件处理（如点击、滚动事件）
  
每次执行栈为空时，事件循环都会从任务队列中取出一个宏任务执行。

### 微任务 (Microtasks)
微任务通常是需要快速响应的任务，执行时机在每个宏任务之后，以及JavaScript执行环境准备好以后。微任务包括：
- `Promise` 回调（例如`.then`、`.catch`和`.finally`）
- `MutationObserver` 的回调
- `queueMicrotask`函数

### 执行顺序
在每个宏任务执行完毕后，在执行下一个宏任务之前，JavaScript 引擎会处理所有队列中的微任务。这意味着微任务总是在当前宏任务结束和下一个宏任务开始之间执行，并在新的UI渲染前完成。这样可以确保异步操作的快速响应，同时因为微任务的延迟更小，所以适合高优先级的任务。

### 为什么区分
区分微任务和宏任务的原因包括：

1. **性能优化：** 通过微任务，JavaScript 可以在不影响用户界面渲染的情况下，快速执行简单的操作，如承诺的解决。这提高了应用程序的响应速度和性能。
  
2. **控制异步操作顺序：** 微任务和宏任务的区分允许开发者控制异步操作的执行顺序。例如，一个由`Promise`产生的微任务可以确保其在下次UI渲染之前解决，而`setTimeout`可能会推迟到下一个宏任务。
  
3. **避免阻塞：** 对于需要快速执行的代码，使用微任务可以避免阻塞宏任务队列，这有助于避免长时间运行的任务阻塞UI更新。

### 示例
假设我们有以下代码：

```javascript
console.log('宏任务开始');

setTimeout(() => {
  console.log('宏任务');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务');
});

console.log('宏任务结束');
```

执行顺序会是这样的：
1. 打印"宏任务开始"
2. 宏任务结束时，设置了一个`setTimeout`
3. 打印"宏任务结束"
4. 当前宏任务已结束，开始执行微任务队列中所有任务
5. 打印"微任务"
6. 微任务队列为空，开始下一个宏任务
7. 打印"宏任务"

通过这个例子，我们可以看到微任务总是在当前执行栈清空后立即执行，而宏任务的执行则可能会因为任务队列中的其他宏任务而延迟。这种机制允许JavaScript有效地处理异步事件，同时保持对执行顺序的细粒度控制。

JavaScript 为什么要区分微任务和宏任务？

JSONP（JSON with Padding）是一种利用`<script>`标签不受同源策略限制的特性来实现跨源请求的技术。因为`<script>`标签的初衷是加载静态的JavaScript文件，所以`<script>`标签仅支持GET方法来请求资源，它并不支持POST方法。这就是为什么JSONP不支持POST方法的根本原因。

当使用JSONP进行通信时，您会将请求参数包含在URL中，并通过动态创建`<script>`标签的方式将其发出。服务器接收到GET请求后，将数据包裹在一个函数调用中，并将其作为响应返回。客户端定义好回调函数后，这段包裹着JSON数据的JavaScript被执行，回调函数便会被调用并处理返回的数据。

例如，假设您的页面需要从`http://example.com`获取一些用户数据，您可能会发送如下的JSONP请求：

```html
<script type="text/javascript">
  // 定义回调函数
  function handleResponse(data) {
    console.log('Received data:', data);
  }
</script>
<script type="text/javascript" src="http://example.com/data?callback=handleResponse"></script>
```

服务器端需要接收到callback参数后，把数据包装在该函数调用中：

```javascript
// 服务器端响应
handleResponse({ "user": "Alice", "age": 25 });
```

如上所述，JSONP请求的本质是一个GET请求，它是通过`<script>`标签的src属性来发起的。因此，它不能使用POST方法，后者通常用于传输大量数据或者发送需要安全传输的数据。如果您需要进行跨域的POST请求，可以考虑使用更现代的技术，如CORS（跨源资源共享），它允许在各种HTTP方法中使用跨源请求，同时提供了更好的安全性。

jsonp 为什么不支持 post 方法？

### Ajax 处理请求跨域问题

Ajax（Asynchronous JavaScript and XML）本身是不支持跨源请求的，这是因为浏览器出于安全考虑实施的同源策略（Same-Origin Policy）。同源策略限制了来自不同源的文档或脚本对当前文档读取或设置某些属性的能力。

不过，有几种方法可以绕过这个限制来实现跨源请求：

1. **JSONP（JSON with Padding）**：这是一种老的技巧，它利用 `<script>`标签不受同源策略限制的特点来进行跨域请求。服务器返回的响应拼接一个函数调用作为JavaScript代码。这种方法的缺点是它只能用于GET请求，并且存在一定的安全隐患。
2. **CORS（Cross-Origin Resource Sharing）**：这是现在推荐的方法，它允许服务器显式地指定哪些源可以访问该服务器上的资源。CORS是一个 W3C 标准，它通过在服务器上设置特定的HTTP头来工作。
3. **代理服务器**：使用一个服务器充当中间人的角色，接受来自客户端的跨源请求，然后转发请求到目标服务器。代理服务器接收到响应后，再将数据返回给客户端。这种方法需要额外的服务器端配置。
4. **WebSockets**: WebSockets提供了一个全双工的通信渠道，可以在浏览器和服务器之间建立持久连接。虽然WebSocket协议与HTTP不同，但它可以绕过同源策略，从而实现跨域通信。

### CORS 设置

当你控制服务器时，可以通过设置HTTP响应头来启用CORS。这些头部主要包括：

1. **Access-Control-Allow-Origin**: 指定了哪些网站可以参与跨域资源共享。例如，设置为 `*`代表允许所有域进行跨域请求，但出于安全考虑通常会指定明确的域名。
2. **Access-Control-Allow-Methods**: 指定了允许的HTTP请求方法，如 `GET, POST, PUT, DELETE, OPTIONS`等。
3. **Access-Control-Allow-Headers**: 在实际请求中允许自定义的HTTP头部字段列表。
4. **Access-Control-Allow-Credentials**: 表示是否允许发送Cookie。如果服务器端设置了这个值为 `true`，那么前端请求的时候也必须将 `withCredentials`属性设置为 `true`。
5. **Access-Control-Expose-Headers**: 允许客户端访问的服务器白名单头部字段。
6. **Access-Control-Max-Age**: 表明在多少秒内，不需要再发送预检验请求（对于某一资源的预检请求结果的有效期）。

下面是一个简单的例子，展示了如何在Node.js的Express框架中设置CORS响应头：

```javascript
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  res.header('Access-Control-Allow-Credentials', true);
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Max-Age', '86400');
    return res.status(200).send();
  }
  next();
});

// 你的其他路由和逻辑

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
```


Ajax 如何处理请求跨域问题？CORS 如何设置？

Base64编码通常不是直接用来提升性能的，而是用来确保二进制数据可以通过仅支持文本格式的传输层安全地传输。Base64将二进制数据编码为ASCII字符串，这使得它可以在不支持二进制数据的系统（如电子邮件）中传输。虽然Base64编码的数据比原始二进制数据大约增加了33%，但在某些情况下，它可以间接地提升性能：

1. **减少HTTP请求**：在Web开发中，Base64编码通常用于将小的图片或其他文件直接嵌入到HTML或CSS中。这样做的好处是可以减少浏览器发起的HTTP请求的数量，因为所有的资源都包含在了主文档中。少了额外的请求，网页加载时间就会缩短，间接提高了用户体验和性能。

   举个例子，如果一个网页中有多个小图标，通常的做法可能是每个图标一个HTTP请求来获取图像文件。如果将这些图标的图片用Base64编码后嵌入到CSS中，就可以将多个HTTP请求合并为一个请求，从而减少了服务器的请求负载和网络延迟，提高了页面的加载速度。

2. **数据URI方案**：Base64编码可以使用数据URI方案在Web页面中直接嵌入图像数据，这样可以避免服务器配置对小文件的较慢响应时间。服务器对小文件的处理往往不如大文件高效，因为涉及到磁盘I/O等开销。通过避免这些小文件请求，可以在服务器端节省资源，从而提升性能。

3. **安全和兼容性**：有些系统不支持二进制数据的传输，或者在传输过程中可能会因为某些字符（如NUL byte）的存在而出现问题。在这种情况下，Base64编码提供了一种可靠的方法来处理和传输数据，避免了潜在的数据损坏和传输错误，从而确保系统的顺畅运行和性能。

总之，Base64编码本身增加了数据量，理论上会降低传输效率，但通过减少HTTP请求的数量、充分利用缓存、避免小文件请求开销以及提高数据的安全性和兼容性，它可以在特定场景下间接提升系统的整体性能。

base64 为什么能提升性能？

在JavaScript中，`==` 和 `===` 都用于比较运算符，但它们在比较值时使用不同的方式。

`===` 称为严格等于或恒等运算符，它比较两个值的类型和值是否完全相同。如果比较的两边数据类型不同，则直接返回false，不会进行类型转换。只有当数据类型及值都相同时，`===` 才返回true。

例子：
```javascript
3 === 3   // true，因为类型和值都相同
3 === '3' // false，因为一个是数字类型，另一个是字符串类型
```

`==` 称为宽松等于或等于运算符，它在比较时会进行类型转换，如果两个值类型不同，它会尝试将它们转换为相同类型，然后再进行值的比较。

例子：
```javascript
3 == 3   // true，类型和值都相同
3 == '3' // true，尽管类型不同（一个是数字，一个是字符串），
         // 但'3'会在比较之前转换为数字3，然后进行比较
```

通常在编码中建议使用`===`来避免由于类型转换导致的意外结果，这也是代码质量工具和最佳实践的推荐。然而，有些情况下，如果你确切知道类型转换的机制，并且想利用这个特性来简化代码，可以使用`==`。比如：

```javascript
// 这里我们知道x的值可能是数值0或者"0"，且两者我们视为等同的情况
function checkZero(x) {
  return x == 0;
}

checkZero(0);   // true
checkZero("0"); // true，因为"0"会被转换为数字0然后比较
```

在上述代码中，使用`==`可以接受字符串'0'和数字0，并认为他们是等价的。如果使用`===`，就需要写更多的代码来处理类型检查和转换。不过，除非有非常清晰的理由，一般还是推荐使用`===`，因为它能让代码的行为更加可预测和清晰。

JavaScript面试题手册