前端高频面试题汇总正题+(附答案解析)

这篇具有很好参考价值的文章主要介绍了前端高频面试题汇总正题+(附答案解析)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

正题

1、

 1 var length = 1;
 2 function fn() {
 3     console.log(this.length);
 4 }
 5 var obj = {
 6     length: 100,
 7     action: function (callback) {
 8         callback();
 9         arguments[0]();
10     }
11 }
12 obj.action(fn, ...[1, 2, 3, 4]);

2、

1 var a = 10;
2 function test() {
3     console.log(a);
4     a = 100;
5     console.log(this.a);
6     var a;
7     console.log(a);
8 }
9 test();

3、

1 var a = 10;
2 function f1() {
3     var b = 2 * a; 
4     var a = 20;
5     var c = a + 1;
6     console.log(b);
7     console.log(c);
8 }
9 f1();

4、

1 var a = 10;
2 function fn1() {
3     console.log(a);
4 }
5 function fn2() {
6     var a = 20;
7     fn1();
8 }
9 fn2();

5、

1 var a = b = 10; 
2 function f1() {
3     var a = b = 20;
4     var c = a + 1;
5     console.log(c);
6 }
7 f1();
8 console.log(a);
9 console.log(b);

6、

 1 const motion = () => {
 2     let speed = 100;
 3     return {
 4         run() {
 5             speed++;
 6             console.log(speed);
 7         }
 8     }
 9 };
10 const m1 = motion();
11 const m2 = motion();
12 m1.run();
13 m1.run();
14 m2.run();

7、

 1 var x = 1;
 2 function f(y) { 
 3     return this.x + y;
 4 }
 5 var obj = {
 6     x: 2
 7 }
 8 var f2 = function () {
 9     return f.apply(obj, arguments) 
10 }
11 var z = f2(3);
12 console.log(z);

8、

 1 setTimeout(() => {
 2     console.log(1)
 3 }, 100);
 4 setTimeout(() => {
 5     console.log(2)
 6 }, 0);
 7 console.log(3);
 8 let p = new Promise((resolve, reject) => {
 9     resolve(4);
10     console.log(5);
11 });
12 p.then(res => {
13     console.log(res);
14 });
15 console.log(6);

9、

 1 function f2() {
 2     console.log(1);
 3     setTimeout(() => {
 4         console.log(2);
 5     }, 100)
 6 }
 7 async function f() {
 8     console.log(3);
 9     await f2();
10     console.log(4);
11 }
12 f();
13 console.log(5);

10、

给一个数组 const arr = [3,1,7,8]和目标值n=10,请求出该数组中元素相加等于目标值的下标。
比如: arr=[1,2,3,4] n=7; 输出:[2,3]

解析

第1题解析
前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 var length = 1;
 2 function fn() {
 3     console.log(this.length);
 4 }
 5 var obj = {
 6     length: 100,
 7     action: function (callback) {
 8         callback();
 9         arguments[0]();
10     }
11 }
12 obj.action(fn, ...[1, 2, 3, 4]);
13 // 考核点:this的指向
14 // 输出结果:1 5
15 // 第一个输出1,是因为fn在全局被调用,this指向是window
16 // 第二个输出5,是因为fn被arguments调用,而arguments里有length属性,传入了五个参数,length为5,所以输出是5
View Code

第2题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 var a = 10; // 全局变量
 2 function test() {
 3     console.log(a); // 变量提升
 4     a = 100;
 5     console.log(this.a); // this指向全局的window
 6     var a;
 7     console.log(a); // 局部变量
 8 }
 9 test();
10 // 考核点:变量提升
11 // 输出结果:undefined 10 100
View Code

第3题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 var a = 10;
 2 function f1() {
 3     var b = 2 * a; // a=undefined
 4     var a = 20;
 5     var c = a + 1;
 6     console.log(b);
 7     console.log(c);
 8 }
 9 f1();
10 // 考核点:
11 // 输出结果:NaN 21
View Code

第4题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 var a = 10;
 2 function fn1() {
 3     console.log(a);
 4 }
 5 function fn2() {
 6     var a = 20;
 7     fn1();
 8 }
 9 fn2();
10 // 考核点:
11 // 输出结果:10
View Code

第5题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 var a = b = 10;    // 相当于b = 10; var a = b;
 2 function f1() {
 3     var a = b = 20; // 相当于 b=20; var a = 20;
 4     var c = a + 1;  // c = 20 + 1
 5     console.log(c);
 6 }
 7 f1();
 8 console.log(a);
 9 console.log(b);
10 // 考核点:JavaScript中变量作用域、变量声明提升和变量赋值的知识点
11 // 输出结果:21 10 20
View Code

第6题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 const motion = () => {
 2     let speed = 100;
 3     return {
 4         run() {
 5             speed++;
 6             console.log(speed);
 7         }
 8     }
 9 };
10 const m1 = motion();
11 const m2 = motion();
12 m1.run();
13 m1.run();
14 m2.run();
15 // 考核点:闭包
16 // 输出结果:101 102 101
View Code

举例:

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 var a = 100;
 2 function f1() {
 3     a++;
 4     console.log(a);
 5 }
 6 f1(); // 101
 7 f1(); // 102
 8 
 9 function f1() {
10     var a = 100;
11     a++;
12     console.log(a);
13 }
14 f1(); // 101
15 f1(); // 101
16 
17 // 闭包保存变量的状态
18 function f1() {
19     var a = 100; // 局部变量
20     return function () {
21         a++;
22         console.log(a);
23     }
24 }
25 
26 var a1 = f1();
27 a1(); // 101
28 a1(); // 102
View Code

第7题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 var x = 1;
 2 function f(y) { // 函数申明
 3     return this.x + y; // this指向
 4 }
 5 var obj = {
 6     x: 2
 7 }
 8 var f2 = function () { // 函数表达式
 9     return f.apply(obj, arguments) // obj={ x: 2 }, arguments=3,arguments 类似于数组,代表参数集合  
10 }
11 var z = f2(3);
12 console.log(z);
13 // 考核点:call()和apply(),改变this的指向 arguments
14 // 输出结果:5
View Code

举例:

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 f.apply(obj, 参数);
 2 
 3 var id = 10;
 4 function fn() {
 5     console.log(this.id); // 10
 6 }
 7 fn();
 8 
 9 var o1 = {
10     id: 999
11 }
12 // 如何让fn函数中this的指向o1
13 fn.apply(o1) // this.id = o1.id 相当于fn函数在o1对象中执行
14 
15 function Person(name, age) {
16     this.name = name;
17     this.age = age;
18 }
19 
20 var y1 = new Person('y1', 20);
21 var o2 = {}; //o2空对象
22 Person.apply(o2, ['o2', 18]); // apply 参数是一个数组
23 console.log(o2.name);
24 
25 var o3 = {};
26 Person.call(o3, "hsl", 18);  // call 参数是字符串
27 console.log(o3.name);
View Code

第8题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 setTimeout(() => {
 2     console.log(1)
 3 }, 100);  // 异步-宏任务
 4 setTimeout(() => {
 5     console.log(2)
 6 }, 0);  // 异步-宏任务
 7 console.log(3); // 同步
 8 let p = new Promise((resolve, reject) => {
 9     resolve(4);
10     console.log(5); // 同步
11 });
12 p.then(res => {
13     console.log(res); // 异步-微任务
14 });
15 console.log(6);  // 同步
16 // 考核点:同步、异步-微任务、异步-宏任务
17 // 微任务:Promise的then『Promise同步,但Promise中的then是异步』、async await
18 // 宏任务:setTimeout、setInterval
19 // 输出结果:3 5 6 4 2 1
View Code

第9题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 function f2() {
 2     console.log(1);
 3     setTimeout(() => {
 4         console.log(2);
 5     }, 100)
 6 }
 7 async function f() {
 8     console.log(3);
 9     await f2();
10     console.log(4);
11 }
12 f();
13 console.log(5);
14 // 考核点:async和await
15 // 输出结果:3 1 5 4 2
View Code

第10题解析

前端高频面试题汇总正题+(附答案解析)前端高频面试题汇总正题+(附答案解析)
 1 /*
 2 给一个数组 const arr = [3,1,7,8]和目标值n=10,请求出该数组中元素相加等于目标值的下标。
 3 比如: arr=[1,2,3,4] n=7; 输出:[2,3]
 4 */
 5 
 6 // 方法一
 7 function arrFn(arr, n) {
 8     let newArr = [];
 9     for (let i = 0, len = arr.length; i < len; i++) {
10         for (let j = i + 1, len = arr.length; j < len; j++) {
11             if (n === arr[i] + arr[j]) {
12                 newArr.push(i, j);
13             }
14         }
15     }
16     return newArr;
17 }
18 console.log(arrFn([3, 1, 7, 8], 10));
19 
20 // 方法二
21 function twoSum(nums, target) {
22     // 1、构造哈希表
23     const map = new Map(); // 存储方式 {need, index}
24 
25     // 2、遍历数组
26     for (let i = 0; i < nums.length; i++) {
27         // 2.1 如果找到 target - nums[i] 的值
28         if (map.has(nums[i])) {
29             return [map.get(nums[i]), i]
30         } else {
31             // 2.2 如果没找到则进行设置
32             map.set(target - nums[i], i)
33         }
34     }
35 }
36 console.log(twoSum([3, 1, 7, 8], 10));
View Code

 鉴定完毕,欢迎友们一起交流学习!!文章来源地址https://www.toymoban.com/news/detail-710094.html

到了这里,关于前端高频面试题汇总正题+(附答案解析)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 260道网络安全常见面试题汇总(附答案解析+配套资料)

    以下为网络安全各个方向涉及的面试题,星数越多代表问题出现的几率越大,祝各位都能找到满意的工作。 注:所有的资料都整理成了PDF,面试题和答案将会持续更新,因为无论如何也不可能覆盖所有的面试题。 目录 一、渗透测试 二、Web安全相关 三、PHP安全 四、JAVA安全

    2024年02月13日
    浏览(41)
  • 高频前端面试题汇总之计算机网络篇

    1. GET和POST的请求的区别 Post 和 Get 是 HTTP 请求的两种方法,其区别如下: 应用场景: GET 请求是一个幂等的请求,一般 Get 请求用于对服务器资源不会产生影响的场景,比如说请求一个网页的资源。而 Post 不是一个幂等的请求,一般用于对服务器资源会产生影响的情景,比如

    2024年02月09日
    浏览(40)
  • 2023前端超全面试题,全是金三银四面试真题整理!附答案。

    目录 HTML 标签语意化 HTML5新特性 SEO input元素的类型 iframe的特点 CSS Flex BFC 重排重绘 CSS优先级 CSS3新特性 清除浮动的方法 盒模型的理解 响应式布局 移动适配方案 三栏布局 圣杯布局和双飞翼布局 JS JS为何是单线程 JS数据类型 js判断数据类型 js中的length属性 判断空对象 判断空

    2024年02月08日
    浏览(47)
  • 前端面试题汇总大全(含答案)-- 持续更新

    1. 简述一下你对 HTML 语义化的理解? 用正确的标签做正确的事情。 html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的; 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关

    2024年01月20日
    浏览(51)
  • 最新网络安全岗位面试题汇总(附答案解析)

    以下为网络安全各个方向涉及的面试题,星数越多代表问题出现的几率越大,祝各位都能找到满意的工作。 一、渗透测试 如何绕过CDN找到真实IP,请列举五种方法 (★★★) redis未授权访问如何利用,利用的前提条件是?(★★★) mysql提权方式有哪些?利用条件是什么? (★) win

    2024年02月12日
    浏览(50)
  • 2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新

    专项练习–持续更新 HTML篇 CSS篇 JS篇 Vue篇 TypeScript篇 React篇 微信小程序篇 前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 1.xhtml和html有什么区别 功能上 主要是 XHTML 可兼容各大浏览器、手机以及 PDA ,并且浏览器也能快速

    2024年02月12日
    浏览(56)
  • 2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新

    HTML篇 CSS篇 JS篇 Vue篇 TpeScript篇 React篇 微信小程序篇 前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 1. 谈谈你对MVVM开发模式的理解? MVVM是一种简化用户界面的 实践驱动编程方式 。在当前主流的前后端分离的开发模式中,MVVM模式的优越性日益体现,相较

    2024年02月10日
    浏览(56)
  • 50道web前端工程师面试题及答案解析,你学会了吗

    简介:本文包含了50个实用的前端面试题及答案解析,涵盖了HTML、CSS、JavaScript、DOM、Ajax、MVC、模块化、ES6、SPA、Webpack、Babel、Virtual DOM、响应式设计、移动优先设计、响应式图片、CSS 预处理器、后处理器、模块化、布局、盒模型、浮动、定位、动画、选择器、HTML5、WebGL、

    2024年02月02日
    浏览(83)
  • Elasticsearch 高频面试题(含答案)

    16、Elasticsearch 在部署时,对 Linux 的设置有哪些优化方法? 17、对于 GC 方面,在使用 Elasticsearch 时要注意什么? 18、Elasticsearch 对于大数据量(上亿量级)的聚合如何实现? 19、在并发情况下,Elasticsearch 如果保证读写一致? 20、如何监控 Elasticsearch 集群状态? 21、介绍下你们

    2024年04月11日
    浏览(39)
  • 网络安全面试题汇总(附答案)

    作为从业多年的网络安全工程师,我深知在面试过程中面试官所关注的重点及考察的技能点。网络安全作为当前信息技术领域中非常重要的一部分,对于每一个从事网络安全工作的人员来说,不仅需要掌握一定的技术能力,更需要具备全面的综合素质。 在我职业发展的过程中

    2024年02月13日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包