每日面试题系列--------01

Bystander！

已于 2023-07-09 20:54:49 修改

阅读量111

点赞数

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

于 2023-07-09 19:43:47 首次发布

本文链接：https://blog.csdn.net/wwwdddwff/article/details/131626491

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、对前端工程师这个职位是怎么样理解的？它的前景会怎么样

作为前端工程师，主要负责开发和维护网站和应用程序的用户界面。他们需要具备HTML、CSS和JavaScript等前端技术的深入理解和熟练应用能力，并且通常与设计团队和后端开发人员密切合作，共同实现用户界面的功能和交互效果。

前端工程师的职责包括但不限于

实现用户界面：将设计师提供的界面设计转化为可交互的网页或应用程序，通过HTML、CSS和JavaScript来创建页面结构、样式和交互特效

前端开发框架与工具：熟悉并使用现代的前端开发框架（如React、Vue.js）和相关工具（如Webpack、Babel），提高开发效率和代码组织

浏览器兼容性：确保网页在不同浏览器和设备上的显示一致，并处理兼容性问题，以提供良好的用户体验

性能优化：通过优化代码结构、资源加载和渲染过程等方式，提升网站的性能和加载速度

响应式设计：使用响应式设计技术创建适应不同屏幕尺寸和设备的用户界面

与后端集成：与后端开发人员协作，实现与服务器交互、数据传输和处理等功能

故障排除与调试：分析并解决前端开发过程中遇到的问题，进行故障排查和代码调试

前端工程师的前景非常广阔。随着移动互联网的不断发展和用户对良好用户体验的要求增加，前端技术的重要性日益凸显。同时，新兴技术如WebRTC、WebAssembly、Progressive Web Apps（渐进式Web应用）等也为前端领域带来了更多的机会与挑战。

随着云计算、大数据、人工智能等技术的快速发展，前端工程师还有机会参与到更复杂、更创新的项目中。前端工程师可以通过不断学习和提升技能，不断适应行业的变化，并关注新技术的发展趋势，以保持竞争力并享受较好的就业前景

2、说说JavaScript中的数据类型？存储上的差别？

基本数据类型（Primitive Types）：

数字（Number）：用于表示整数和浮点数，例如：3, 3.14。

字符串（String）：用于表示文本字符串，需要用单引号或双引号括起来，例如：“Hello World”。

布尔值（Boolean）：表示真（true）或假（false）。

空值（Null）：表示一个空值。

未定义（Undefined）：表示一个未定义的值
symbol：新的数据类型，用于创建具有唯一标识符的值

引用数据类型（Reference Types）：

对象（Object）：一种复合数据类型，可以存储多个键值对。

数组（Array）：用于存储多个值的有序列表。

函数（Function）：用于封装可重用的代码块。

日期（Date）：用于表示日期和时间。

正则表达式（RegExp）：用于匹配和处理文本的模式。

存储上的差别

基本数据类型直接存储在栈（stack）内存中。当我们创建一个变量并赋予基本数据类型的值时，该值直接存储在分配给变量的内存空间中

引用数据类型的值存储在堆（heap）内存中，并且变量中存储的是该值在堆内存中的引用地址。当我们创建一个变量并赋予引用数据类型的值时，变量中存储的是该引用地址，而实际的对象或数组等数据存储在堆内存中

这意味着基本数据类型的赋值是直接复制值，而引用数据类型的赋值是复制引用地址，两个变量最终指向的是同一个对象。

需要注意的是，JavaScript引擎会自动进行内存管理，并且使用垃圾回收机制来回收不再使用的内存。对于基本数据类型，它们的生命周期与变量的作用域相关，当变量超出作用域时，相关内存会被释放。而对于引用数据类型，如果没有任何变量引用它们，它们将成为垃圾数据，并经过垃圾回收销毁释放内存

3、 typeof 与 instanceof 区别

typeof 操作符返回一个字符串，表示未经计算的操作数的类型

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

区别：

typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值

instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型

而typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

4、说说你对闭包的理解？闭包使用场景？

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包常见方式，就是在一个函数的内部创建另一个函数

使用闭包主要为了设计私有的方法和变量，闭包的优点是可以避免变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。

闭包有三个特性：

函数内再嵌套函数

内部函数可以引用外层的参数和变量

参数和变量不会被垃圾回收机制回收

闭包的好处：能够实现封装和缓存等；

闭包的缺点就是常驻内存，会增大内存使用量，使用不当会造成内存泄漏

应用场景：

常见的防抖节流

使用闭包可以在 JavaScript 中模拟块级作用域

闭包可以用于在对象中创建私有变量

5、bind、call、apply 区别？如何实现一个bind?

bind、call、apply用来改变this指向

apply：接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入。改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次 fn.apply(null,[1,2,3]);

call：第一个参数也是this的指向，后面传入的是一个参数列表 fn.call(obj,1,2,3)

bind： bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入) 返回的是新的函数

实现bind三步

修改this指向

动态传递参数

兼容new关键字

6、说说你对事件循环的理解

前提： JavaScript是一门单线程的语言，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环

在JavaScript中，所有的任务都可以分为

同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行

异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就事件循环

异步任务分为微任务和宏任务:

微任务：

是指在JavaScript事件循环的宏任务（Macrotask）执行完成后，被添加到微任务队列中的任务。微任务会在当前宏任务执行结束之后、下一个宏任务开始之前执行

触发条件：

Promise的回调函数：当Promise对象状态变为已解决（fulfilled）或已拒绝（rejected）时，相关的回调函数会作为微任务被添加到微任务队列中执行。
MutationObserver的回调函数：当观察的DOM发生变化时，MutationObserver的回调函数会以微任务方式执行。
process.nextTick（Node.js环境）：process.nextTick方法可以将回调函数作为微任务直接执行。

示例代码

// 使用Promise触发微任务
Promise.resolve().then(() => {
  console.log('Promise microtask');
});

// 使用MutationObserver触发微任务
const observer = new MutationObserver((mutationsList, observer) => {
  console.log('MutationObserver microtask');
});
observer.observe(document.body, { attributes: true });

// 使用process.nextTick触发微任务（仅适用于Node.js环境）
process.nextTick(() => {
  console.log('process.nextTick microtask');
});

console.log('Main task'); // 这是宏任务中的代码

// 输出顺序：
// Main task
// Promise microtask
// MutationObserver microtask (如果DOM变化了的话)
// process.nextTick microtask (仅适用于Node.js环境)

宏任务

是指在JavaScript事件循环中被添加到宏任务队列中的任务

示例代码

// 使用setTimeout创建宏任务
setTimeout(() => {
  console.log('SetTimeout macrotask');
}, 1000);

// I/O操作会生成对应的宏任务
fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    console.log('Fetch macrotask');
  });

// 用户交互事件会触发宏任务
document.addEventListener('click', () => {
  console.log('User interaction macrotask');
});

console.log('Main task'); // 这是第一个宏任务中的代码

// 输出顺序：
// Main task
// User interaction macrotask (如果用户点击了页面)
// Fetch macrotask (当fetch操作成功返回数据时)
// SetTimeout macrotask (过了1秒后)

包含几种情况：

setTimeout和setInterval：使用定时器函数创建的任务会在指定的时间间隔后被添加到宏任务队列中执行。
I/O操作：例如读取文件、发送网络请求等异步操作会生成对应的宏任务，当相应的I/O操作完成后，相关的回调函数会被添加到宏任务队列中执行。
用户交互事件：例如鼠标点击、键盘输入等用户交互行为会触发对应的宏任务。
延迟执行代码：例如通过script标签加载的外部JavaScript文件会作为宏任务进行执行。

执行顺序：