Web前端最全7个Js async await高级用法，大厂面试必问

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

}

### 3. 使用`async/await`优化递归


递归函数是编程中的一种常用技术，`async/await`可以很容易地使递归函数进行异步操作。

// 异步递归函数
async function asyncRecursiveSearch(nodes) {
for (const node of nodes) {
await asyncProcess(node);
if (node.children) {
await asyncRecursiveSearch(node.children);
}
}
}

// 示例
async function asyncProcess(node) {
// 对节点进行异步处理逻辑
}

### 4. 异步初始化类实例


在JavaScript中，类的构造器（constructor）不能是异步的。但可以通过工厂函数模式来实现类实例的异步初始化。

class Example {
constructor(data) {
this.data = data;
}

static async create() {
    const data = await fetchData(); // 异步获取数据
    return new Example(data);
}

}

// 使用方式
Example.create().then((exampleInstance) => {
// 使用异步初始化的类实例
});

### 5. 在`async`函数中使用`await`链式调用


使用`await`可以直观地按顺序执行链式调用中的异步操作。

class ApiClient {
constructor() {
this.value = null;
}

async firstMethod() {
    this.value = await fetch('/first-url').then(r => r.json());
    return this;
}

async secondMethod() {
    this.value = await fetch('/second-url').then(r => r.json());
    return this;
}

}

// 使用方式
const client = new ApiClient();
const result = await client.firstMethod().then(c => c.secondMethod());

### 6. 结合`async/await`和事件循环


使用`async/await`可以更好地控制事件循环，像处理DOM事件或定时器等场合。

// 异步定时器函数
async function asyncSetTimeout(fn, ms) {
await new Promise(resolve => setTimeout(resolve, ms));
fn();
}

// 示例
asyncSetTimeout(() => console.log(‘Timeout after 2 seconds’), 2000);

### 7. 使用`async/await`简化错误处理


错误处理是异步编程中的重要部分。通过`async/await`，可以将错误处理的逻辑更自然地集成到同步代码中。

async function asyncOperation() {
try {
const result = await mightFailOperation();
return result;
} catch (error) {
handleAsyncError(error);
}
}

async function mightFailOperation() {
// 有可能失败的异步操作
}

function handleAsyncError(error) {
// 错误处理逻辑
}

通过以上七个`async/await`的高级用法，开发者可以在JavaScript中以更加声明式和直观的方式处理复杂的异步逻辑，同时保持代码整洁和可维护性。在实践中不断应用和掌握这些用法，能够有效地提升编程效率和项目的质量。



### JavaScript

* js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

* 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

* Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

* JS常见的dom操作api

* 解释一下事件冒泡和事件捕获

* 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

* 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

* this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

* call，apply，bind

* 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

* 创建对象的多种方式

* 实现继承的多种方式和优缺点

* new 一个对象具体做了什么

* 手写Ajax，XMLHttpRequest

* 变量提升

* 举例说明一个匿名函数的典型用例

* 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

* attribute和property的区别

* document load和document DOMContentLoaded两个事件的区别

* JS代码调试  

* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

  ![](https://img-blog.csdnimg.cn/img_convert/a69e7b92af546ecaedf148f129bfef2b.png)