文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

11道JavaScript 面试题

2024-11-29 21:43

关注

尽管从事过基于 JavaScript 的项目,但其中一些人甚至无法回答最基本的 JavaScript 问题。因此,本文的目的是分享在JavaScript 面试中会遇到哪些问题以及如何回答这些问题。

这些不是我在采访中提出的确切问题,但它们确实涵盖了概念。让我们从一些基本问题开始,然后逐步讨论更高级的概念。

1. var、let 和 const 之间的区别?

尽管这是 JS 的基本问题之一,但令人惊讶的是,许多人都无法区分 let 和 var 之间的区别。

答案很简单:var 是函数作用域,可以重新声明和更新,而 let 是块作用域,不能重新声明,但可以更新。同时,const 是块作用域的,不能重新声明或更新。

var a = 10 // Can re-declared and update
let b = 20 // Can't re-declared but can update
const c = 30 // Can't re-declared or update

当然,var 如今已经不太常用了,但是仍然有代码使用它,我们可能会遇到。未能回答此问题还表明你不熟悉 JavaScript 中块作用域和函数作用域之间的区别。

2. == 和 === 运算符的区别?

这也是一个很常见的JS问题。== 运算符仅检查值是否匹配,而忽略数据类型。如果要比较的两个变量的类型不同,它会在后台执行类型强制。另一方面, === 运算符确保值和类型相等。

2 == "2" //true
2 === "2" //false
null == undefined //true
null === undefined //false

3. 如何在不改变原始数组的情况下对数组进行排序?

在 2023 年之前,要对数组进行排序而不改变它,你需要对其进行浅表复制,因为 JS 排序函数会改变原始数组。

因此,最简单的方法是使用扩展运算符,然后对数组进行排序,如下例所示。

const numbers = [3, 1, 4, 1, 5];
const sorted = [...numbers].sort();

然而,在 2023 年,JS 引入了 toSorted() 函数,它允许您在不改变原始数组的情况下对数组进行排序。这个问题测试候选人的知识以及是否是最新的。

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.toSorted();

4. 解释回调函数并提供用例?

简而言之,回调是一个函数,它作为参数传递给另一个函数,然后在后者完成其任务后执行。它支持异步操作,允许 JavaScript 处理耗时的任务,而不会延迟其他操作的执行。

const fetchData = (callbackFunc) => {
    setTimeout(() => {
      const data = "Sample data";
      callbackFunc(data);
   }, 2000);
}


const processFetchedData = (data) => {
    console.log("Processing data:", data);
}


fetchData(processFetchedData);

回调用于处理用户事件,例如按钮单击和输入更改。当用户事件发生时,可以调用回调函数来执行一段代码。回调对于处理异步数据请求也非常有用。当从服务器获取数据时,回调函数处理接收到的数据。

5. JavaScript 中的闭包是什么?

闭包是一个可以访问其自身作用域、外部函数作用域和全局作用域的函数。闭包还与 JavaScript 中的词法作用域相关。词法作用域描述了变量和函数在运行时如何确定作用域。为了解释什么是闭包,最好用一个简单的例子。

let makeSizer = (size) => 
  () => {
    console.log(`fontSize = ${size}px`);
  };


const size10 = makeSizer(10);
const size12 = makeSizer(12);
const size14 = makeSizer(14);


size10(); // fontSize = 10px
size12(); // fontSize = 12px
size14(); // fontSize = 14px

在前面的示例中,size10、size12 和 size14 函数是闭包。闭包在事件驱动编程中很有用。例如,你可以编写一个生成事件处理程序的函数,每个处理程序都可以访问特定数据,而不会污染全局范围。

6.什么时候需要使用Async代码?

当我们需要避免 JavaScript 中阻塞主线程时,我们必须使用异步代码。主线程管理调用堆栈,其中包含当前的函数调用序列。如果主线程被阻塞,函数在调用之前将必须等待。

因此,异步代码对于高效处理耗时操作至关重要。JavaScript 提供了回调、promise 和 async/await 等技术来更好地管理异步操作。

7. JavaScript 中的 Promise 是什么?

Promise 是代表异步操作最终成功或失败的对象。它们是与 ES6 JavaScript 添加一起引入的。当 Promise 被解决或拒绝时,您可以使用 Promise 实例的 then 和 catch 方法来调用函数。以下是 Promise 的简单 JavaScript 代码示例。

const fetchData = () => {
 return new Promise((resolve, reject) => {
    // Simulate an asynchronous operation
    setTimeout(() => {
      // Resolve the promise with some data
      resolve("Data fetched successfully!");
    }, 1000);
 });
};


// Use the Promise
fetchData()
 .then(data => {
    console.log(data);
 })
 .catch(error => {
    console.error("An error occurred:", error);
 });

8. Promise 和 Observables 之间的区别?

这是一个比前面的问题更高级的问题。Observables 是 Promise 的更强大版本,但它们不是 Javascript 原生的。它们用于处理产生多个值的操作,例如,用户输入事件或实时数据流。

与 Promises 不同,Observables 允许你通过调用 unsubscribe() 方法来取消正在进行的操作。Observables 也比 Promises 更适合复杂的数据操作,因为它们支持更广泛的运算符(例如 map、filter、switchMap 等)。

然而,Observables 要求应用程序包含 RxJS 依赖开销。此外,Observables 比 Promise 更难使用。因此,如果需要一种简单的方法来处理异步操作的单个结果,Promise 更适合。

9. Promise 和 Async Await 之间的区别?

Async/Await 具有比 Promises 更同步的语法,使阅读和理解程序的流程变得更容易。与 Promise 链相比,Async/Await 的样板代码更少。链接是连续执行两个或多个异步操作,每个后续操作在前一个操作成功完成后开始。

const fetchData = async () => {
 // Simulate an API call that returns a promise
 let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data fetched!"), 1000);
 });


 let result = await promise;
 console.log(result);
}


fetchData().catch(error => {
    console.error("An error occurred:", error);
});

上面是 async/await 在 JavaScript 中如何工作的示例。wait 关键字指示 JavaScript 等待,直到 Promise 对象被解析或拒绝。

Async/Await 基于 Promises,并作为对开发人员更友好的语法在 Promises 之后添加到 JavaScript 中。

但是,在必须并发处理多个异步操作的场景中,应该使用 Promises 而不是 async/await。Promise.all() 方法在这种情况下会很有用。

10. 解释一下去抖动和节流?

去抖动意味着延迟函数的执行,直到自上次触发事件以来经过一定时间。另一方面,节流限制了调用函数的频率。它确保函数以指定的时间间隔执行,并且该时间间隔内的任何其他调用都将被忽略。

用例

去抖动最常见的应用之一是搜索建议,您希望等待用户完成输入后再获取建议。这避免了每次击键时都调用 API 并提高了性能。

限制对于处理滚动和调整大小事件非常有用,可以在这些事件中限制函数调用的频率,以便应用程序不会因重新渲染而过载。

11. 什么是 JavaScript 中的事件冒泡以及如何阻止它?

当你单击嵌套在其他几个元素中的按钮时,该按钮及其父元素都会触发单击事件,从而在 DOM 树中向上移动。这称为事件冒泡,DOM 中的大多数事件都会发生这种情况。如果组件具有嵌套的单击事件,这可能会成为问题。

要停止事件冒泡,可以使用事件对象的 stopPropagation() 方法。此方法可防止事件在 DOM 树上进一步传播。

onClick((event) => {
  event.stopPropagation();
  console.log("button clicked");
})

总结

以上这11道面试题中有基本和高级 JavaScript 问题与概念。作为面试官,我试图使这些信息尽可能简单,以便即使是初学者也能理解。

我希望今天分享的这期内容能够帮助你自信地面对下一次 JavaScript 面试。最后,感谢您的阅读,祝编程愉快。

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯