海风蓝 发表于 2023-9-24 23:30:29

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

正题
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();
10   }
11 }
12 obj.action(fn, ...);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 = 和目标值n=10,请求出该数组中元素相加等于目标值的下标。
比如: arr= n=7; 输出:解析
第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();
10   }
11 }
12 obj.action(fn, ...);13 // 考核点:this的指向14 // 输出结果:1 515 // 第一个输出1,是因为fn在全局被调用,this指向是window16 // 第二个输出5,是因为fn被arguments调用,而arguments里有length属性,传入了五个参数,length为5,所以输出是5View 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 100View 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 21View 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 // 输出结果:10View 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 20View 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 101View 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(); // 102View 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 // 输出结果:5View 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 1View 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和await15 // 输出结果:3 1 5 4 2View Code第10题解析
1 /*
2 给一个数组 const arr = 和目标值n=10,请求出该数组中元素相加等于目标值的下标。
3 比如: arr= n=7; 输出:
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 + arr) {
12               newArr.push(i, j);
13             }
14         }
15   }
16   return newArr;
17 }
18 console.log(arrFn(, 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 的值
28         if (map.has(nums)) {
29             return ), i]
30         } else {
31             // 2.2 如果没找到则进行设置
32             map.set(target - nums, i)
33         }
34   }
35 }
36 console.log(twoSum(, 10));View Code 鉴定完毕,欢迎友友们一起交流学习!!

来源:https://www.cnblogs.com/liushihong21/p/17725851.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 前端高频面试题汇总正题+(附答案解析)