首页 > 其他分享 >前端高频面试题汇总正题+(附答案解析)

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

时间:2023-09-24 13:13:05浏览次数:35  
标签:function 10 面试题 console log 正题 11 var 高频

正题

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

 鉴定完毕,欢迎友们一起交流学习!!

标签:function,10,面试题,console,log,正题,11,var,高频
From: https://www.cnblogs.com/liushihong21/p/17725851.html

相关文章

  • 数据类型以及可能的面试题
    数据类型以及可能的面试题基础类型intzs=30;longnum=30L;//这个一般在后面加一个Lfloatf=0.1f;doubled=0.1;//字符charstr1='刘';//字符只能用单引号,并且只能有一个字符//字符串String不是关键字是类Stringstr2="uhsdaoja";拓展//=======......
  • 一个关于 i++ 和 ++i 的面试题打趴了所有人
    前言都说大城市现在不好找工作,可小城市却也不好招人。我们公司招了挺久都没招到,主管感到有些心累。我提了点建议,是不是面试问的太深了,在这种小城市,能干活就行。他说自己问的面试题都很浅显,如果答不上来说明基础太弱了。我问了下面试题,然后我沉默了。起因起因就......
  • Redis主从复制,高可用性面试题
    参考链接:https://xiaolincoding.com/redis/cluster/master_slave_replication.html#%E7%AC%AC%E4%B8%80%E6%AC%A1%E5%90%8C%E6%AD%A5 主从第一步同步的过程? 分成三步进行:1、建立连接,从服务器获得主服务的id和复制位置,一开始是-1。2、主服务器fork一个子进程用来创建当前的R......
  • 剑指Offer面试题10:斐波那契数列
    一、题目示例:输入:4返回值:3说明:根据斐波那契数列的定义可知,fib(1)=1,fib(2)=1,fib(3)=fib(3-1)+fib(3-2)=2,fib(4)=fib(4-1)+fib(4-2)=3,所以答案为3。二、题解2.1解法一:迭代相加知识点:动态规划动态规划算法的基本思想是:将待求解的问题分解成若干个相互联系的子问题,先求解子问题,然......
  • 随想录Day4|24. 两两交换链表中的节点、19. 删除链表的倒数第N个节点、面试题 02.07.
    随想录Day4|24.两两交换链表中的节点、19.删除链表的倒数第N个节点、面试题02.07.链表相交、142.环形链表Ⅱ 24.两两交换链表中的节点文章讲解视频讲解给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,......
  • vue3的面试题
    1.什么是Vue3?Vue3有哪些新增特性?答:Vue3是Vue.js框架的最新版本,它增加了很多新特性,包括CompositionAPI、Teleport、Suspense和Fragment等。2.Vue3CompositionAPI是什么?它的作用是什么?答:Vue3CompositionAPI是Vue3中的一个新特性,它的作用是将组件中的逻辑分解成可复用的可......
  • 常见面试题汇总
    现在到处都能搜到面试题,也说的很全,可有时候发现,刷的有时候面试官也不问,就跟考试一样,复习的都是被面试官跳过的,这样就很被动,要是问到知识盲区了,还有可能直接社死。请教了一些我认为很强的大佬们,收集了一些问的我或者会被常问到的问题,目的就是面试前能临阵磨磨枪,笔记记一堆,那时候找......
  • JVM面试题、关键原理、JMM
    boolean:占用1个字节,取值为true或false。byte:占用1个字节,范围为-128到127。short:占用2个字节,范围为-32,768到32,767。int:占用4个字节,范围为-2,147,483,648到2,147,483,647。long:占用8个字节,范围为-9,223,372,036,854,775,808到9,223,372,036,854,775,807。float:占用4个字节,范......
  • MySQL数据库查询对象空值判断与Java代码示例【含面试题】
    AI绘画关于SD,MJ,GPT,SDXL百科全书面试题分享点我直达2023Python面试题2023最新面试合集链接2023大厂面试题PDF面试题PDF版本java、python面试题项目实战:AI文本OCR识别最佳实践AIGamma一键生成PPT工具直达链接玩转cloudStudio在线编码神器玩转GPUAI绘画、AI讲话、......
  • 资深java面试题及答案整理
    编写Java程序时,如何在Java中创建死锁并修复它?经典但核心Java面试问题之一。如果你没有参与过多线程并发Java应用程序的编码,你可能会失败。如何避免Java线程死锁?如何避免Java中的死锁?是Java面试的热门问题之一,也是多线程的编程中的重口味之一,主要在招高级程序员时......