前端

服务端

计算机基础

CORS，即跨源资源共享（Cross-Origin Resource Sharing），是一种允许在一个源（origin）上的网页获取访问另一个源上资源的机制。它是一种安全特性，可以让网站的前端代码安全地进行跨域请求，而不会暴露用户数据。

CORS 请求分为两类：简单请求（simple requests）和复杂请求（preflighted requests）。它们之间的区别主要体现在请求的方式和所发送内容上。

### 简单请求

简单请求满足以下条件：
1. 请求方法是以下三种方法之一：
   - GET
   - POST
   - HEAD
2. HTTP的头信息不超出以下几种字段：
   - Accept
   - Accept-Language
   - Content-Language
   - Last-Event-ID
   - Content-Type（只限于三个值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`）

简单请求的例子：

```http
GET /some/resource HTTP/1.1
Host: api.example.com
Accept-Language: en-US
Content-Type: text/plain
```

当浏览器判断一个请求为简单请求时，它会直接发起跨域请求，并在请求中携带`Origin`头部信息。服务端会检查这个`Origin`，决定是否允许这个跨域请求。

### 复杂请求

复杂请求通常指不满足以上简单请求条件的所有其他请求，例如：
1. 使用了 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH 等 HTTP 方法。
2. 发送的 HTTP 头部信息超出了简单请求允许的范围。
3. Content-Type 的值不属于简单请求中允许的三个值。

在发送复杂请求之前，浏览器会先发起一个 OPTIONS 请求，这被称为“预检”请求（preflight request），用来确认真正的请求是否安全可被服务器接受。预检请求的例子：

```http
OPTIONS /data/resource HTTP/1.1
Host: api.example.com
Origin: http://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header
```

如果服务器允许这样的请求，它会在响应的 HTTP 头部中包含`Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`等字段，明确告知客户端是否可以进行实际的请求。之后，浏览器才会发送实际的请求。

### 总结

简单来说，简单请求是对CORS更宽容的请求，直接发起并通过`Origin`头部判断是否允许跨域；而复杂请求需要先进行一次额外的预检通信以确认安全性，只有在预检通过后，实际的请求才会发起。这个机制确保了敏感操作（如对数据的修改）在跨域时能够得到恰当的安全检查。

cros 的简单请求和复杂请求的区别是什么？

在JavaScript中，`map`和`for`循环是遍历数组的两种常见方法，但在处理异步函数时，它们的行为有显著差异。

### 使用`map`调用异步函数

`map`函数是`Array`原型上的一个方法，它对数组中的每个元素执行一个由你提供的函数，并返回一个新的数组，该数组是由原数组中每个元素调用处理函数得到的结果组成的。当你在`map`内使用异步函数时，每次迭代都会立即发起异步操作，但不会等待上一个完成，这意味着所有异步操作几乎是同时发起的。`map`不会等待异步函数的解决，它会立即继续到下一次迭代。

例如，如果你使用`map`遍历数组，并在每个元素上调用一个返回Promise的异步函数：

```javascript
let promises = [1, 2, 3].map(async (num) => {
  let result = await someAsyncFunction(num);
  return result;
});
```

这里，`promises`数组将包含三个Promise对象，这些Promise对象是`someAsyncFunction`返回的，并且他们将并行执行。

### 使用`for`循环调用异步函数

使用传统的`for`循环，你可以更容易地控制异步函数的执行顺序。如果在循环内部使用`await`，你可以确保每次迭代都等待上一个异步操作完成再继续。

例如，使用`for`循环顺序执行异步操作：

```javascript
let results = [];
for (let num of [1, 2, 3]) {
  let result = await someAsyncFunction(num);
  results.push(result);
}
```

在这段代码中，`someAsyncFunction`会为数组中的每个元素顺序执行。第二次迭代会等待第一次迭代中的异步操作完成，以此类推。这意味着异步操作是串行执行的。

### 总结

- 使用`map`调用异步函数时，所有异步操作几乎同时开始，它们是并行的，最后你得到一个Promise对象的数组。
- 使用`for`循环（或其他类型的循环，如`for...of`、`for...in`、`while`等）并结合`await`调用异步函数时，操作将按顺序一个接一个地执行，即串行执行。

因此，选择哪种方法取决于你是否需要并行或串行执行异步操作。如果操作之间没有依赖，并且你想最大限度地提高效率，可以使用`map`。如果操作必须按照一定的顺序执行，或者一个操作的输出是另一个操作的输入，那么使用`for`循环会更合适。

JavaScript 的遍历方法中，在 map 和 for 中调用异步函数的区别是什么？

`for...of` 循环是在ES6中引入的，它专门用于遍历**可迭代对象**的元素，如数组、字符串、Map、Set 等这些实现了迭代器接口的数据结构。所谓的可迭代对象就是那些具有 `Symbol.iterator` 属性的对象。

例如，数组是可迭代对象，可以使用 `for...of` 遍历其元素：

```javascript
let array = [10, 20, 30];
for (let value of array) {
  console.log(value);
}
// 输出：
// 10
// 20
// 30
```

然而，普通对象不是可迭代的，没有实现 `Symbol.iterator` 方法，因此不能直接使用 `for...of` 遍历它的属性。尝试使用 `for...of` 直接遍历一个对象会导致一个错误：

```javascript
let obj = {a: 1, b: 2, c: 3};
for (let value of obj) {
  console.log(value);
}
// TypeError: obj is not iterable
```

另一方面，`for...in` 循环是用来遍历一个对象的所有可枚举属性的键，包括继承的可枚举属性。它不仅可以遍历普通对象的属性，还可以遍历数组（虽然通常不推荐这样做，因为它会返回数组索引，而且可能会遍历到原型链上的属性）。

使用 `for...in` 遍历对象的例子：

```javascript
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}
// 输出：
// a: 1
// b: 2
// c: 3
```

总结一下，`for...of` 用于遍历可迭代对象的元素，而 `for...in` 用于遍历对象的所有可枚举属性的键。因此，`for...of` 不能直接遍历普通对象，而 `for...in` 可以。

for..of 和 for...in 是否可以直接遍历对象？

### 事件冒泡 (Event Bubbling)

事件冒泡是一种事件传播机制，在这种机制下，当一个元素上的事件被触发时，这个事件会从触发元素开始，逐级向上传播至最外层的父元素。这种传播方式允许在父元素上监听并处理来自子元素的事件。事件冒泡通常用于减少事件处理器的数量，并且简化事件管理。

**例子：** 假设我们有一个按钮(`<button>`)位于一个段落(`<p>`)元素内，该段落又位于一个容器(`<div>`)元素内。如果用户点击了按钮，那么点击事件会首先在按钮元素上触发，然后依次向上冒泡至段落元素，最终到达容器元素。

### 事件代理 (Event Delegation)

事件代理是一种借助事件冒泡机制实现的事件处理模式。它通过在父元素上设置一个事件监听器来管理所有子元素的同类事件。这样可以避免在每个子元素上单独设置事件监听器，从而提高效率和性能，尤其是在动态添加或删除子元素的情况下。

**例子：** 假如我们有一个任务列表，列表中的每一项任务都需要一个点击事件监听器。使用事件代理，我们可以在任务列表的容器元素上设置一个点击事件监听器，而不是在每个任务项上单独设置。当点击事件发生并冒泡到容器元素时，我们可以检查事件的目标元素(`event.target`)来确定是哪个任务项被点击，并进行相应的处理。

### 事件捕获 (Event Capturing)

事件捕获是DOM事件流的另一部分，与事件冒泡相对应。在事件捕获阶段，事件从最外层的父元素开始传递，一直向下直到触发元素。主要的区别在于事件的传播方向：事件捕获是从外到内，而事件冒泡是从内到外。

**例子：** 再次使用上面的按钮、段落和容器元素的场景，当用户点击按钮时，在事件捕获阶段，点击事件会首先到达最外层的容器元素，然后到达段落元素，最后到达按钮元素。

### 它们的关系

事件捕获和事件冒泡是DOM事件流的两个阶段。在实际的事件处理中，浏览器首先经过捕获阶段，从最外层的父元素向下传递到目标元素，然后是目标元素上的事件处理，接着是冒泡阶段，事件从目标元素开始向上逐级传播。

事件代理则是利用了事件冒泡原理来简化事件管理。通过在父元素上监听事件，可以管理所有子元素的事件，而无需在每个子元素上单独绑定事件监听器，使得代码更加简洁高效。

在使用 `addEventListener` 方法时，我们可以指定第三个参数为 `true` 或 `false` 来明确选择是在捕获阶段还是冒泡阶段处理事件，默认值为 `false`，即在冒泡阶段处理。

总之，事件捕获和事件冒泡共同构成了事件传播的完整过程，而事件代理则是一种利用这种传播机制的高效事件处理策略。

分别介绍事件冒泡、事件代理、事件捕获，以及它们的关系？

闭包（closure）的核心是能够捕获并包含自己创建时所在作用域中的变量，并在这个函数在其原始作用域之外被调用时仍然可以访问那些变量。闭包是函数和声明该函数时的词法环境的组合。

在编程中，闭包常常用于以下几种场合：

1. **数据封装**：闭包可以用来模拟私有变量，因为它的内部状态对外部代码是不可见的，只能通过闭包暴露的方法来访问。

    示例：

    ```javascript
    function createCounter() {
        let count = 0; // `count` 是一个闭包中的私有变量
        return {
            increment: function() {
                count++;
            },
            getValue: function() {
                return count;
            }
        };
    }

    const counter = createCounter();
    counter.increment();
    console.log(counter.getValue()); // 输出 1
    ```

    在这个例子中，`createCounter` 返回了一个拥有两个方法的对象，而这两个方法都有权访问私有变量 `count`。`count` 变量是无法从外部直接访问的，只能通过闭包提供的 `increment` 和 `getValue` 方法来操作。

2. **回调函数和异步执行**：闭包常用于回调函数，尤其是在异步操作中，它能够记住并访问其创建时的环境，即使在主执行流程已经完成之后。

    示例：

    ```javascript
    function asyncGreeting(name) {
        setTimeout(function() {
            // 这个匿名函数就是一个闭包
            console.log('Hello, ' + name);
        }, 1000);
    }

    asyncGreeting('World'); // 1秒后输出 "Hello, World"
    ```

    `setTimeout` 的回调是一个闭包，它记住了变量 `name`，即使 `asyncGreeting` 函数已经执行完毕。

3. **模块化代码**：通过闭包，可以创建模块，这些模块拥有公开的方法和私有的数据，这是一种设计模式（即模块模式），可用于组织和管理 JavaScript 代码。

在这些场景中，闭包的核心特性是记忆作用域中的变量，这使得函数在定义它的那个作用域之外执行时依然可以访问那些变量。这对于JavaScript等语言来说是一个极为强大的特性，因为它可以创造出在其他编程范式中难以实现的某些功能。

闭包的核心是什么

`setTimeout` 和 `setInterval` 都是 JavaScript 中用于控制时间和执行定时任务的函数，但它们的工作方式和用途有所不同。

### `setTimeout`

`setTimeout` 函数用于设置一个定时器，该定时器将在指定的毫秒数后执行一次您指定的函数或代码块。一旦定时器完成任务（即执行了指定的函数或代码），它就会停止。

**用法示例:**

```javascript
function sayHello() {
  console.log('Hello!');
}

// 调用 sayHello 函数，但是会在 2000 毫秒（2 秒）后执行
setTimeout(sayHello, 2000);
```

在这个例子中，`sayHello` 函数会在约 2 秒后执行一次，然后 `setTimeout` 就完成了它的任务。

### `setInterval`

与 `setTimeout` 不同，`setInterval` 函数用于设置一个定时器，该定时器会无限次地以指定的时间间隔重复执行您指定的函数或代码块，除非您明确停止它。

**用法示例:**

```javascript
function sayHelloRepeatedly() {
  console.log('Hello again!');
}

// 每隔 2000 毫秒（2 秒），调用一次 sayHelloRepeatedly 函数
const intervalId = setInterval(sayHelloRepeatedly, 2000);

// 当你想停止定时器时，可以调用 clearInterval
// clearInterval(intervalId);
```

在这个例子中，`sayHelloRepeatedly` 函数会每隔 2 秒执行一次，这将一直持续下去，直到调用 `clearInterval(intervalId)` 才会停止这个定时器。

### 总结差异

- `setTimeout` 是执行一次延迟操作的函数。
- `setInterval` 是重复执行操作的函数，直到清除定时器。
- `setTimeout` 定时器执行完毕后自动清除。
- `setInterval` 定时器会持续运行，直到你调用 `clearInterval`。
  
实际应用中，选择哪一个函数取决于你的具体需求：如果你需要延迟执行一次操作，使用 `setTimeout`；如果你需要以固定的时间间隔重复执行操作，使用 `setInterval`。

setTimeout 与 setInterval 的区别是什么？

JavaScript 中判断一个对象是否为空对象，通常可以通过检查对象是否有自身的属性。最常见的方法是使用 `Object.keys()` 函数，它会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组。如果这个数组的长度为0，那么可以认定该对象为一个空对象。

以下是一个函数示例，它可以用来判断一个对象是否为空：

```javascript
function isEmptyObject(obj) {
  return Object.keys(obj).length === 0 && obj.constructor === Object;
}
```

这个函数首先检查 `Object.keys(obj)` 返回的数组长度是否为0，确保没有枚举的自身属性。然后，通过 `obj.constructor === Object` 确保 `obj` 是由 `Object` 构造函数创建的，避免错误地将具有自身属性但不是普通对象的实例（比如 `new Date()`）判断为“空对象”。

我们可以用以下例子来测试这个函数：

```javascript
// 空对象
let obj1 = {};

// 非空对象
let obj2 = { prop: 'value' };

// 空对象的另一种形式（通过 Object.create(null) 创建）
let obj3 = Object.create(null);

console.log(isEmptyObject(obj1)); // true
console.log(isEmptyObject(obj2)); // false
console.log(isEmptyObject(obj3)); // true, 但请注意这种对象没有原型链
```

在这些例子中，`obj1` 是一个标准的空对象，所以 `isEmptyObject(obj1)` 返回 `true`。`obj2` 有一个自身属性 `prop`，所以 `isEmptyObject(obj2)` 返回 `false`。`obj3` 虽然是一个空对象，但它通过 `Object.create(null)` 创建，这意味着它没有原型链，而 `isEmptyObject(obj3)` 也返回 `true`。

需要注意的是，这个函数不能检测那些没有可枚举属性但实际上不是空的对象，比如：

```javascript
let obj4 = Object.create(Object.prototype, {
  prop: {
    value: 'value',
    enumerable: false
  }
});

console.log(isEmptyObject(obj4)); // true，但实际上 obj4 有一个不可枚举的属性 prop
```

在这种情况下，`prop` 属性是不可枚举的，因此 `Object.keys(obj4)` 不会包含 `prop`，导致 `isEmptyObject(obj4)` 错误地返回 `true`。如果需要考虑不可枚举的属性，可以使用 `Object.getOwnPropertyNames()` 替换 `Object.keys()`，它会返回所有自身属性的数组，无论它们是否可枚举。

JavaScript 怎么判断是一个空对象

Ajax (Asynchronous JavaScript and XML)、Axios 和 Fetch API 是前端开发中用于与服务器进行异步通信的不同技术。下面，我将详细介绍它们之间的主要区别：

### Ajax
1. **概念**: Ajax 并不是一种独立的技术，而是一系列技术的集合，包括 HTML、CSS、JavaScript、DOM、XMLHttpRequest 等。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
   
2. **XMLHttpRequest 对象**: Ajax 通常依赖于 `XMLHttpRequest` 对象来进行通信。这是一个老旧的 API，可以用来执行异步请求。
   
3. **例子**: 
    ```javascript
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'server.php', true);
    xhr.send();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    ```

4. **兼容性**: `XMLHttpRequest` 在老版本的浏览器中有很好的兼容性。

5. **缺点**: 编写代码较繁琐，不支持 `Promise`，错误处理和编写异步代码可能比较复杂。

### Axios
1. **概念**: Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了一个易于使用的 API，可以在客户端执行异步请求。

2. **特点**: 支持 Promise，可以很容易地使用 `.then()` 和 `.catch()` 方法进行链式调用。Axios 还提供了请求取消、HTTP 自动转换 JSON 数据、客户端支持防御 XSRF 等功能。

3. **例子**: 
    ```javascript
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    ```

4. **兼容性**: Axios 可以用在浏览器和 node.js 中，并且基本上支持所有现代浏览器。

5. **缺点**: 相对于 Fetch API，Axios 是一个额外的库，需要单独安装和配置。

### Fetch API
1. **概念**: Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的部分，例如发起请求。它提供了一个全局 `fetch()` 方法，具有比 `XMLHttpRequest` 更加简洁和强大的功能。

2. **特点**: Fetch API 基于 Promise 设计，使得异步请求代码更加简洁。它不是以形式参数的形式，而是以配置对象的形式接收请求信息，使得请求更加灵活。

3. **例子**: 
    ```javascript
    fetch('https://api.example.com/data', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
    ```

4. **兼容性**: Fetch API 在现代浏览器中得到了良好的支持，但在一些老旧浏览器中可能不可用。

5. **缺点**: Fetch API 默认不发送或接收 cookies，如果站点依赖于用户会话，则需要额外的配置。此外，即使请求失败，fetch 也不会拒绝 Promise，只有在网络故障时才会被拒绝。

总结来说，Ajax、Axios 和 Fetch API 提供了实现前端 HTTP 通信的不同方法。Ajax 是最传统的方式，依赖于 `XMLHttpRequest`。Axios 是一个现代的库，提供了丰富的 API 和易于使用的 Promise 支持。

ajax/axios/fetch 的区别是什么？

在JavaScript中，继承是一个用来使一个类（子类）能够获取另一个类（父类）的属性和方法的机制。以下是在JavaScript中实现继承的几种方法：

### 1. 原型链继承

原型链继承是将子类的原型对象设置为父类的一个实例，从而实现继承。

```javascript
function Parent() {
  this.parentProperty = true;
}

Parent.prototype.getParentProperty = function() {
  return this.parentProperty;
};

function Child() {
  this.childProperty = false;
}

// 继承Parent
Child.prototype = new Parent();

var child = new Child();
console.log(child.getParentProperty()); // true
```

### 2. 构造函数继承

构造函数继承通过在子类的构造函数中调用父类构造函数实现继承，并使用 `.call()`或 `.apply()`方法将子类的 `this`绑定到父类上。

```javascript
function Parent(name) {
  this.name = name;
}

function Child(name) {
  Parent.call(this, name);
}

var child = new Child('Alice');
console.log(child.name); // Alice
```

### 3. 组合继承（原型链 + 构造函数继承）

组合继承结合了原型链继承和构造函数继承的优点，即子类的原型被设置为父类的一个实例，并且父类构造函数被用来增强子类实例。

```javascript
function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log(this.age);
};

var child1 = new Child('Alice', 10);
child1.colors.push('yellow');
console.log(child1.name); // Alice
console.log(child1.age); // 10
console.log(child1.colors); // ['red', 'blue', 'green', 'yellow']
```

### 4. 原型式继承

原型式继承是基于已有的对象创建新对象，使用 `Object.create`方法实现。

```javascript
var parent = {
  name: "Bob",
  getName: function() {
    return this.name;
  }
};

var child = Object.create(parent);
child.name = "Alice";
console.log(child.getName()); // Alice
```

### 5. 寄生式继承

寄生式继承创建一个封装继承过程的函数，这个函数在内部以某种方式增强对象然后返回。

```javascript
function createAnother(original) {
  var clone = Object.create(original);
  clone.sayHi = function() {
    console.log('Hi');
  };
  return clone;
}

var person = {
  name: 'Bob',
  getName: function() {
    return this.name;
  }
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // Hi
```

### 6. 寄生组合式继承

寄生组合式继承通过使用寄生式继承来继承父类的原型，并将结果指定给子类的原型。

```javascript
function inheritPrototype(childObj, parentObj) {
  var prototype = Object.create(parentObj.prototype);
  prototype.constructor = childObj;
  childObj.prototype = prototype;
}

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Child, Parent);

Child.prototype.sayAge = function() {
  console.log(this.age);
};

var child = new Child('Alice', 10);
child.sayName(); // Alice
child.sayAge(); // 10 
```


JavaScript 继承都有哪些方法？

JavaScript 中的 number 类型是基于 IEEE 754 标准的双精度64位浮点数表示。这种表示方式导致了两类主要的精度问题：

1. **有限的位数：** 64位中，有1位用于符号，11位用于表示指数，剩下的52位用于表示尾数（或分数）。这限制了可以精确表示的数字的范围和精度。当数字超出这个精确范围时，就会出现舍入误差。

2. **二进制浮点数的局限性：** 并非所有的十进制小数都能被二进制系统精确地表示。例如，十进制的0.1在二进制中是一个无限循环的分数，就像十进制中的1/3不能精确表示一样。在二进制浮点数中，这样的十进制数会被近似为一个有限位数的二进制数，因此会有精度损失。

例子：在 JavaScript 中计算 0.1 加 0.2 时，预期结果是 0.3，但实际结果往往是 0.30000000000000004，这展示了精度损失的问题。

为了避免这种精度损失，可以使用以下策略：

1. **整数运算：** 将浮点数转换为整数，进行运算后再转换回去。这适用于简单的加减乘除运算。

   ```javascript
   // 例子：使用整数运算来避免精度损失
   let result = (0.1 * 10 + 0.2 * 10) / 10; // 结果为0.3
   ```

2. **使用第三方库：** 为了处理更复杂的数学运算和避免精度损失，可以使用如 `BigNumber.js` 或 `decimal.js` 等第三方库，这些库提供了更为精确的数值计算能力。

   ```javascript
   // 使用 BigNumber.js 示例
   BigNumber.config({ DECIMAL_PLACES: 10 })
   let a = new BigNumber(0.1);
   let b = new BigNumber(0.2);
   let result = a.plus(b); // '0.3'
   ```

3. **内置 `BigInt` 类型：** 对于整数运算，ES2020 引入了 `BigInt` 类型，它支持任意精度的整数。使用 `BigInt` 可以避免大整数计算中的精度损失，但它不适用于浮点数。

   ```javascript
   // 例子：使用 BigInt 进行大整数计算
   let bigInt1 = BigInt("9007199254740993");
   let bigInt2 = BigInt("1");
   let result = bigInt1 + bigInt2; // 9007199254740994n
   ```

总而言之，为了解决 JavaScript 中的 number 类型的精度问题，开发者需要根据实际情况选取适合的方法来保证数值的精确度。对于常规的小数点精度问题，转换为整数运算通常是最简单的解决办法；对于更复杂的场景，则可能需要使用第三方库或者 `BigInt` 类型。

面试题手册