10 个常见的 JavaScript 面试问题以及如何回答它们

更新日期: 2023-02-24阅读: 758标签: 面试

你在准备 JavaScript 面试吗?别再看了!本文将介绍10 个常见的 JavaScript 面试问题以及如何在代码示例和解释的帮助下回答这些问题。


1. JavaScript 中的提升是什么?

提升是 JavaScript 中的一种行为,其中变量和函数声明被移动到其作用域的顶部。这意味着可以在代码中声明变量和函数之前使用它们。但是,只会提升声明,不会提升赋值。

console.log(x); //undefined
var x = 5;

在这个例子中,变量 x 被提升到范围的顶部,但它的赋值 5 没有,所以当我们尝试记录 x 的值时,它返回undefined。


2. JavaScript 中的闭包是什么?

闭包是一个函数,即使在外部函数返回之后,它也可以访问其外部范围内的变量。

function outerFunction(x) {
return function innerFunction() {
return x;
}
}

const myClosure = outerFunction(10);
console.log(myClosure()); //10

在此示例中,内部函数可以从其外部范围innerFunction访问变量,因此即使在返回后它也可以返回其值。xouterFunction


3. 讲解JavaScript中的事件冒泡和捕获

事件冒泡和捕获是在 dom 中传播事件的两种方式。

  • 事件冒泡是指事件首先被最内层元素捕获和处理,然后传播到外层元素。
  • 事件捕获则相反,事件首先由最外层元素处理,然后传播到内部元素。
<div onclick="alert('div')">
<p onclick="alert('p')">
Click me!
</p>
</div>

在这个例子中,如果p元素被点击,事件将首先被p元素捕获并alert('p')调用函数。然后,事件将传播到div元素并alert('div')调用该函数。这是事件冒泡的一个例子。如果我们使用useCaptureaddEventListener 中的参数并将其设置为 true,则事件将div首先被元素捕获,然后传播到p元素。这是一个事件捕获的例子。


4. 用 JavaScript 解释“this”

在 JavaScript 中,this指函数是其方法的对象。

const person = {
name: "John",
sayName: function() {
console.log(this.name);
}
}

person.sayName(); // "John"

在此示例中,this引用person对象,因此调用this.name返回“John”。的值this可以根据调用函数的方式而改变。


5. 解释原型继承在 JavaScript 中的工作原理

在 JavaScript 中,所有对象都有一个原型,它们从中继承属性和方法。当在对象上调用属性或方法但在该对象上找不到时,JavaScript 将在对象的原型上查找它。

const animal = {
type: "unknown"
}

const dog = Object.create(animal);
dog.breed = "Golden Retriever";

console.log(dog.type); // "unknown"
console.log(dog.breed); // "Golden Retriever"

在此示例中,dog对象是使用 创建的Object.create(),它将animal对象设置为其原型。当我们尝试访问对象type上的属性时dog,它并没有在dog对象本身上找到,所以 JavaScript 在原型上寻找它并在对象上找到它animal。


6. 解释setTimeout在 JavaScript 中是如何工作的

setTimeout是一个允许您在经过一定时间后执行函数的函数。

console.log("Started!");
setTimeout(() => {
console.log("Hello!");
}, 2000);
console.log("Ended!");

在此示例中,console.log("Started!")立即调用,然后setTimeout使用记录“Hello!”的回调函数调用。和 2000 毫秒的时间。console.log("Ended!")之后立即调用。传递给 setTimeout 的回调函数将在 2 秒后调用。


7.解释setInterval在JavaScript中是如何工作的

setInterval类似于setTimeout,但它会以指定的时间间隔重复执行提供的功能。

let count = 0;
const intervalId = setInterval(() => {
console.log(`Interval count: ${count}`);
count++;
if (count === 5) {
clearInterval(intervalId);
}
}, 1000);

在此示例中,提供的函数将每 1000 毫秒(1 秒)执行一次,每次计数都会增加 1。该clearInterval函数用于在 5 次迭代后停止间隔。


8. 解释什么是 JavaScript 中的 promise

Promise 是一个对象,表示异步操作的最终完成(或失败)及其结果值。

const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success!");
}, 2000);
});

promise
.then(result => console.log(result))
.catch(error => console.log(error));

setTimeout在此示例中,使用在 2 秒后调用该函数的函数创建了一个 promise resolve。promise 有两个方法,then和catch,可用于处理已解析的值或发生的任何错误。


9.解释JavaScript中==和===的区别

==(松散相等)在执行任何必要的类型转换后比较两个值是否相等。===(严格相等)在不执行任何类型转换的情况下比较两个值是否相等。

console.log(0 == false); // true
console.log(0 === false); // false

在此示例中,0和false大致相等,因为它们都是假值,但它们并不严格相等,因为0是一个数字并且false是一个布尔值。

通常建议===在 JavaScript 中用于比较,因为它可以帮助防止意外的类型强制转换。


10. 解释JavaScript 中let, var, 和const之间的区别

let和var用于在 JavaScript 中声明变量,但它们的行为略有不同。let变量是块作用域的,这意味着它们只能在声明它们的块内访问。var变量是函数作用域的,这意味着它们可以在它们声明的整个函数内访问。

if (true) {
let x = 5;
}
console.log(x); // ReferenceError: x is not definedCopy code
if (true) {
var x = 5;
}
console.log(x); // 5

const用于声明一个常量变量,这意味着它的值在声明后不能重新赋值。

const x = 5;
x = 10; // TypeError: Assignment to constant variable

const通常,最佳做法是默认使用并且仅let在需要重新分配变量时才使用。

通过了解这些常见的 JavaScript 面试问题,您将为下一次面试做好充分准备!不要让这些问题让你措手不及,对你的答案充满信心并炫耀你的 JavaScript 知识。

来源英文:https://medium.com/@maria_laramie/10-common-javascript-interview-questions-and-how-to-answer-them-328b59806cf7

链接: https://www.fly63.com/article/detial/12385

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,

前端面试之webpack面试常见问题

什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?

每个 JavaScript 工程师都应当知道的 10 个面试题

多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。

37个JavaScript基本面试问题和解答

面试比棘手的技术问题要多,这篇文章整理了37个JavaScript基本面试问题和解答,这些仅仅是作为指导。希望对前端开发的你有所帮助!

React常见面试题

React常见面试题:React中调用setState之后发生了什么事情?React中Element与Component的区别?优先选择使用ClassComponent而不是FunctionalComponent?React中的refs属性的作用是什么?React中keys的作用是什么?

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3) 返回 true

题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。

js练习笔记:10道JavaScript题目

10道JavaScript题目:累加函数addNum、实现一个Person类、实现一个arrMerge 函数、实现一个toCamelStyle函数、setTimeout实现重复调用、实现一个bind函数、实现一个Utils模块、输出一个对象自身的属性

vue菜鸟从业记:没准备好的面试,那叫尬聊

面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。

毕业一年左右的前端妹子面试总结

把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习

vue面试时需要准备的知识点

vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!