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

海风蓝

正题
1、

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

复制代码

2、

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

复制代码

3、

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

复制代码

4、

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

复制代码

5、

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

复制代码

6、

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

复制代码

7、

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

复制代码

8、

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

复制代码

9、

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

复制代码

10、

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

复制代码

解析
第1题解析

1. 1 var length = 1;
2. 2 function fn() {
3. 3     console.log(this.length);
4. 4 }
5. 5 var obj = {
6. 6     length: 100,
7. 7     action: function (callback) {
8. 8         callback();
9. 9         arguments[0]();
10. 10     }
11. 11 }
12. 12 obj.action(fn, ...[1, 2, 3, 4]);13 // 考核点：this的指向14 // 输出结果：1 515 // 第一个输出1，是因为fn在全局被调用，this指向是window16 // 第二个输出5，是因为fn被arguments调用，而arguments里有length属性，传入了五个参数，length为5，所以输出是5

复制代码

View Code第2题解析

1. 1 var a = 10; // 全局变量
2. 2 function test() {
3. 3     console.log(a); // 变量提升
4. 4     a = 100;
5. 5     console.log(this.a); // this指向全局的window
6. 6     var a;
7. 7     console.log(a); // 局部变量
8. 8 }
9. 9 test();
10. 10 // 考核点：变量提升
11. 11 // 输出结果：undefined 10 100

复制代码

View Code第3题解析

1. 1 var a = 10;
2. 2 function f1() {
3. 3     var b = 2 * a; // a=undefined
4. 4     var a = 20;
5. 5     var c = a + 1;
6. 6     console.log(b);
7. 7     console.log(c);
8. 8 }
9. 9 f1();
10. 10 // 考核点：
11. 11 // 输出结果：NaN 21

复制代码

View Code第4题解析

1. 1 var a = 10;
2. 2 function fn1() {
3. 3     console.log(a);
4. 4 }
5. 5 function fn2() {
6. 6     var a = 20;
7. 7     fn1();
8. 8 }
9. 9 fn2();
10. 10 // 考核点：
11. 11 // 输出结果：10

复制代码

View Code第5题解析

1. 1 var a = b = 10;    // 相当于b = 10; var a = b;
2. 2 function f1() {
3. 3     var a = b = 20; // 相当于 b=20; var a = 20;
4. 4     var c = a + 1;  // c = 20 + 1
5. 5     console.log(c);
6. 6 }
7. 7 f1();
8. 8 console.log(a);
9. 9 console.log(b);
10. 10 // 考核点：JavaScript中变量作用域、变量声明提升和变量赋值的知识点
11. 11 // 输出结果：21 10 20

复制代码

View Code第6题解析

1. 1 const motion = () => {
2. 2     let speed = 100;
3. 3     return {
4. 4         run() {
5. 5             speed++;
6. 6             console.log(speed);
7. 7         }
8. 8     }
9. 9 };
10. 10 const m1 = motion();
11. 11 const m2 = motion();
12. 12 m1.run();
13. 13 m1.run();
14. 14 m2.run();15 // 考核点：闭包16 // 输出结果：101 102 101

复制代码

View Code举例：

1. 1 var a = 100;
2. 2 function f1() {
3. 3     a++;
4. 4     console.log(a);
5. 5 }
6. 6 f1(); // 101
7. 7 f1(); // 102
8. 8
9. 9 function f1() {
10. 10     var a = 100;
11. 11     a++;
12. 12     console.log(a);
13. 13 }
14. 14 f1(); // 101
15. 15 f1(); // 101
16. 16
17. 17 // 闭包保存变量的状态
18. 18 function f1() {
19. 19     var a = 100; // 局部变量
20. 20     return function () {
21. 21         a++;
22. 22         console.log(a);
23. 23     }
24. 24 }
25. 25
26. 26 var a1 = f1();
27. 27 a1(); // 101
28. 28 a1(); // 102

复制代码

View Code第7题解析

1. 1 var x = 1;
2. 2 function f(y) { // 函数申明
3. 3     return this.x + y; // this指向
4. 4 }
5. 5 var obj = {
6. 6     x: 2
7. 7 }
8. 8 var f2 = function () { // 函数表达式
9. 9     return f.apply(obj, arguments) // obj={ x: 2 }, arguments=3，arguments 类似于数组，代表参数集合  
10. 10 }
11. 11 var z = f2(3);
12. 12 console.log(z);
13. 13 // 考核点：call()和apply()，改变this的指向 arguments
14. 14 // 输出结果：5

复制代码

View Code举例：

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

复制代码

View Code第8题解析

1. 1 setTimeout(() => {
2. 2     console.log(1)
3. 3 }, 100);  // 异步-宏任务
4. 4 setTimeout(() => {
5. 5     console.log(2)
6. 6 }, 0);  // 异步-宏任务
7. 7 console.log(3); // 同步
8. 8 let p = new Promise((resolve, reject) => {
9. 9     resolve(4);
10. 10     console.log(5); // 同步
11. 11 });
12. 12 p.then(res => {
13. 13     console.log(res); // 异步-微任务
14. 14 });
15. 15 console.log(6);  // 同步
16. 16 // 考核点：同步、异步-微任务、异步-宏任务
17. 17 // 微任务：Promise的then『Promise同步，但Promise中的then是异步』、async await
18. 18 // 宏任务：setTimeout、setInterval
19. 19 // 输出结果：3 5 6 4 2 1

复制代码

View Code第9题解析

1. 1 function f2() {
2. 2     console.log(1);
3. 3     setTimeout(() => {
4. 4         console.log(2);
5. 5     }, 100)
6. 6 }
7. 7 async function f() {
8. 8     console.log(3);
9. 9     await f2();
10. 10     console.log(4);
11. 11 }
12. 12 f();
13. 13 console.log(5);14 // 考核点：async和await15 // 输出结果：3 1 5 4 2

复制代码

View Code第10题解析

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

复制代码

View Code 鉴定完毕，欢迎友友们一起交流学习！！

来源:https://www.cnblogs.com/liushihong21/p/17725851.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！