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

  • 前端高频面试题汇总正题+(附答案解析)已关闭评论
  • 81 次浏览
  • A+
所属分类:Web前端
摘要

正题1、2、3、4、5、6、7、8、9、10、解析第2题解析第3题解析第4题解析第5题解析

正题

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

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