10道典型的JavaScript面试题

发布时间 - 2026-01-11 00:18:42    点击率:

问题1: 作用域(Scope)

考虑以下代码:

(function() {
 var a = b = 5;
})();
console.log(b);

控制台(console)会打印出什么?

答案:5

如果 严格模式开启,那么代码就会报错 ” Uncaught ReferenceError: b is not defined” 。请记住,如果这是预期的行为,严格模式要求你显式地引用全局作用域。所以,你需要像下面这么写:

(function() {
 'use strict';
 var a = window.b = 5;
})();
console.log(b);

问题2: 创建 “原生(native)” 方法

在 String 对象上定义一个 repeatify 函数。这个函数接受一个整数参数,来明确字符串需要重复几次。这个函数要求字符串重复指定的次数。举个例子:

console.log('hello'.repeatify(3));

应该打印出hellohellohello.

答案:

String.prototype.repeatify = String.prototype.repeatify || function(times) {
 var str = '';
 for (var i = 0; i < times; i++) {
  str += this;
 }
 return str;
};

在这里,另一个关键点是,看你怎样避免重写可能已经定义了的方法。这可以通过在定义自己的方法之前,检测方法是否已经存在。

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

问题3: 变量提升(Hoisting)

执行以下代码的结果是什么?为什么?

function test() {
 console.log(a);
 console.log(foo());
 var a = 1;
 function foo() {
  return 2;
 }
}
test();

答案:

这段代码的执行结果是undefined 和 2。

这个结果的原因是,变量和函数都被提升(hoisted) 到了函数体的顶部。因此,当打印变量a时,它虽存在于函数体(因为a已经被声明),但仍然是undefined。换言之,上面的代码等同于下面的代码:

function test() {
 var a;
 function foo() {
  return 2;
 }
 console.log(a);
 console.log(foo());
 a = 1;
} 
test();

问题4: 在javascript中,`this`是如何工作的

以下代码的结果是什么?请解释你的答案。

var fullname = 'John Doe';
var obj = {
 fullname: 'Colin Ihrig',
 prop: {
  fullname: 'Aurelio De Rosa',
  getFullname: function() {
   return this.fullname;
  }
 }
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());

答案:

这段代码打印结果是:Aurelio De Rosa 和 John Doe 。原因是,JavaScript中关键字this所引用的是函数上下文,取决于函数是如何调用的,而不是怎么被定义的。

在第一个console.log(),getFullname()是作为obj.prop对象的函数被调用。因此,当前的上下文指代后者,并且函数返回这个对象的fullname属性。相反,当getFullname()被赋值给test变量时,当前的上下文是全局对象window,这是因为test被隐式地作为全局对象的属性。基于这一点,函数返回window的fullname,在本例中即为第一行代码设置的。

问题5: call() 和 apply()

修复前一个问题,让最后一个console.log() 打印输出Aurelio De Rosa.

答案:

这个问题可以通过运用call()或者apply()方法强制转换上下文环境。

console.log(test.call(obj.prop));

问题6: 闭包(Closures)

考虑下面的代码:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
 nodes[i].addEventListener('click', function() {
  console.log('You clicked element #' + i);
 });
}

请问,如果用户点击第一个和第四个按钮的时候,控制台分别打印的结果是什么?为什么?

答案:

两次打印都是nodes.length的值。

问题7: 闭包(Closures)

修复上题的问题,使得点击第一个按钮时输出0,点击第二个按钮时输出1,依此类推。

答案:

有多种办法可以解决这个问题,下面主要使用两种方法解决这个问题。

第一个解决方案使用立即执行函数表达式(IIFE)再创建一个闭包,从而得到所期望的i的值。实现此方法的代码如下:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
 nodes[i].addEventListener('click', (function(i) {
  return function() {
   console.log('You clicked element #' + i);
  }
 })(i));
}

另一个解决方案不使用IIFE,而是将函数移到循环的外面。这种方法由下面的代码实现:

function handlerWrapper(i) {
 return function() {
  console.log('You clicked element #' + i);
 }
}
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
 nodes[i].addEventListener('click', handlerWrapper(i));
}

问题8:数据类型

考虑如下代码:

console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);

答案:

object
object
object
undefined

问题9:事件循环

下面代码运行结果是什么?请解释。

function printing() {
 console.log(1);
 setTimeout(function() { console.log(2); }, 1000);
 setTimeout(function() { console.log(3); }, 0);
 console.log(4);
}
printing();

答案:

1
4
3
2

想知道为什么输出顺序是这样的,你需要弄了解setTimeout()做了什么,以及浏览器的事件循环原理。浏览器有一个事件循环用于检查事件队列,处理延迟的事件。UI事件(例如,点击,滚动等),Ajax回调,以及提供给setTimeout()和setInterval()的回调都会依次被事件循环处理。因此,当调用setTimeout()函数时,即使延迟的时间被设置为0,提供的回调也会被排队。回调会呆在队列中,直到指定的时间用完后,引擎开始执行动作(如果它在当前不执行其他的动作)。因此,即使setTimeout()回调被延迟0毫秒,它仍然会被排队,并且直到函数中其他非延迟的语句被执行完了之后,才会执行。

问题10:算法

写一个isPrime()函数,当其为质数时返回true,否则返回false。

答案:

我认为这是面试中最常见的问题之一。然而,尽管这个问题经常出现并且也很简单,但是从被面试人提供的答案中能很好地看出被面试人的数学和算法水平。

首先, 因为JavaScript不同于C或者Java,因此你不能信任传递来的数据类型。如果面试官没有明确地告诉你,你应该询问他是否需要做输入检查,还是不进行检查直接写函数。严格上说,应该对函数的输入进行检查。

第二点要记住:负数不是质数。同样的,1和0也不是,因此,首先测试这些数字。此外,2是质数中唯一的偶数。没有必要用一个循环来验证4,6,8。再则,如果一个数字不能被2整除,那么它不能被4,6,8等整除。因此,你的循环必须跳过这些数字。如果你测试输入偶数,你的算法将慢2倍(你测试双倍数字)。可以采取其他一些更明智的优化手段,我这里采用的是适用于大多数情况的。例如,如果一个数字不能被5整除,它也不会被5的倍数整除。所以,没有必要检测10,15,20等等。

最后一点,你不需要检查比输入数字的开方还要大的数字。我感觉人们会遗漏掉这一点,并且也不会因为此而获得消极的反馈。但是,展示出这一方面的知识会给你额外加分。

现在你具备了这个问题的背景知识,下面是总结以上所有考虑的解决方案:

function isPrime(number) {
 // If your browser doesn't support the method Number.isInteger of ECMAScript 6,
 // you can implement your own pretty easily
 if (typeof number !== 'number' || !Number.isInteger(number)) {
  // Alternatively you can throw an error.
  return false;
 }
 if (number < 2) {
  return false;
 }
 if (number === 2) {
  return true;
 } else if (number % 2 === 0) {
  return false;
 }
 var squareRoot = Math.sqrt(number);
 for(var i = 3; i <= squareRoot; i += 2) {
  if (number % i === 0) {
   return false;
  }
 }
 return true;
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!


# js  # 面试题  # 13道关于JavaScript正则表达式的面试题  # 详解JS中的this、apply、call、bind(经典面试题)  # 关于javascript作用域的常见面试题分享  # 面试常见的js算法题  # 80%应聘者都不及格的JS面试题  # Javascript前端经典的面试题及答案  # JavaScript中最常见的三个面试题解析  # 一篇文章搞定JavaScript类型转换(面试常见)  # 总结几道关于Node.js的面试问题  # 「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)  # 第一个  # 回调  # 这个问题  # 的是  # 这是  # 这段  # 解决这个问题  # 自己的  # 都是  # 这一  # 就会  # 如果你  # 加分  # 在这里  # 很好  # 给你  # 也会  # 结果是  # 是这样  # 依此类推 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: javascript基本数据类型及类型检测常用方法小结  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  iOS验证手机号的正则表达式  济南网站建设制作公司,室内设计网站一般都有哪些功能?  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗?  如何快速搭建高效可靠的建站解决方案?  bing浏览器学术搜索入口_bing学术文献检索地址  网页制作模板网站推荐,网页设计海报之类的素材哪里好?  BootStrap整体框架之基础布局组件  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  javascript中数组(Array)对象和字符串(String)对象的常用方法总结  如何在云服务器上快速搭建个人网站?  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  消息称 OpenAI 正研发的神秘硬件设备或为智能笔,富士康代工  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗?  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  网站制作大概多少钱一个,做一个平台网站大概多少钱?  如何快速生成ASP一键建站模板并优化安全性?  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  Laravel怎么为数据库表字段添加索引以优化查询  如何在 Telegram Web View(iOS)中防止键盘遮挡底部输入框  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】  Laravel如何使用Facades(门面)及其工作原理_Laravel门面模式与底层机制  Laravel如何自定义分页视图?(Pagination示例)  如何用狗爹虚拟主机快速搭建网站?  如何快速使用云服务器搭建个人网站?  韩国代理服务器如何选?解析IP设置技巧与跨境访问优化指南  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  昵图网官方站入口 昵图网素材图库官网入口  怎样使用JSON进行数据交换_它有什么限制  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站?  如何用已有域名快速搭建网站?  lovemo网页版地址 lovemo官网手机登录  打造顶配客厅影院,这份100寸电视推荐名单请查收  jQuery validate插件功能与用法详解  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  如何快速查询域名建站关键信息?  LinuxShell函数封装方法_脚本复用设计思路【教程】  Laravel Session怎么存储_Laravel Session驱动配置详解  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设?  公司网站制作需要多少钱,找人做公司网站需要多少钱?  如何快速登录WAP自助建站平台?  详解jQuery停止动画——stop()方法的使用  JavaScript如何实现继承_有哪些常用方法