前端面试题整理3

最新推荐文章于 2024-11-07 19:48:34 发布

m-TT

最新推荐文章于 2024-11-07 19:48:34 发布

阅读量650

点赞数

分类专栏：面试文章标签：前端

本文链接：https://blog.csdn.net/weixin_44892365/article/details/130721439

版权

本文汇总了前端面试中常见的20个问题，涵盖异步编程、this指向、响应式、首屏加载优化、axios使用、CSS预处理、事件循环机制等核心知识点，帮助开发者深入理解和准备前端面试。

摘要由CSDN通过智能技术生成

1.不使用promise怎么实现一个异步编程?

2.this的指向有哪些？

3.Ref和reactive响应式的区别？

4.首屏加载优化。如何处理？

5.axios封装？

6.css为什么使用预处理？

7.从1000-9999里面取出AAAA这种数字？

8.销毁的生命周期在什么时候使用？

9.怎么做配置代理？

10.怎么改变this指向，他们有什么不同？

17.Promise 的方法有哪些，分别有什么作用？

18.说说你对 TypeScript 的理解？与 JavaScript 的区别？

19.什么是事件循环机制？

20.工厂模式和发布订阅者模式的区别？

1.不使用promise怎么实现一个异步编程?

①回调函数：将一个函数作为另一个函数的参数传递，当第一个函数完成时，第二个函数将被调用。最常用的异步编程方式

function fetchData(callback) {
  setTimeout(() => {
    const data = { message: "Hello, world!" };
    callback(data);
  }, 1000);
}

fetchData(data => {
  console.log(data.message);
});

②Async/Await：ES2017 引入了 async/await，使得异步编程更加简单易读。async 函数返回一个 Promise 对象，可以使用 await 关键字来等待异步操作的结果。

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = { message: "Hello, world!" };
      resolve(data);
    }, 1000);
  });
}

async function printData() {
  const data = await fetchData();
  console.log(data.message);
}

printData();

③事件监听器：使用事件监听器来处理异步操作的结果。例如，使用 XMLHttpRequest 对象时，可以监听 load 事件以处理响应数据。

const request = new XMLHttpRequest();
request.open("GET", "https://api.example.com/data");
request.addEventListener("load", () => {
  const data = JSON.parse(request.responseText);
  console.log(data.message);
});
request.send();

④Generator 函数：使用 Generator 函数可以通过 yield 关键字来暂停和恢复函数的执行。可以将异步操作封装在 Generator 函数中，然后使用 next() 方法来控制函数的执行。

function* fetchData() {
  const data = yield new Promise(resolve => {
    setTimeout(() => {
      const data = { message: "Hello, world!" };
      resolve(data);
    }, 1000);
  });
  console.log(data.message);
}

const generator = fetchData();
const promise = generator.next().value;
promise.then(data => generator.next(data));

2.this的指向有哪些？

①作为函数调用，非严格模式下，this指向window，严格模式下，this指向undefined；

②作为某对象的方法调用，this通常指向调用的对象。

③ 使用apply、call、bind 可以绑定this的指向。

④ 在构造函数中，this指向新创建的对象

⑤ 箭头函数没有单独的this值，this在箭头函数创建时确定，它与声明所在的上下文相同。

3.ref和reactive响应式的区别？

①ref多用来定义基本数据类型，而 reactive 只能用来定义对象数组类型；

②ref操作数据需要 .value ，reactive 操作数据不需要 .value。

4.首屏加载优化。如何处理？

①压缩文件体积；

②减少请求次数。

5.axios封装？

//axios封装
import axios from 'axios';

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = '';
}
// 请求超时时间
axios.defaults.timeout = 10000;
// 请求拦截器
axios.interceptors.request.use((config) => {
    //判断是否存在token
    let token = localStorage.getItem('_token');       
    token && (config.headers[""] = token);        
    return config;    
},(