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

正题

1、

var length = 1;
function fn() {
    console.log(this.length);
}
var obj = {
    length: 100,
    action: function (callback) {
        callback();
        arguments[0]();
    }
}
obj.action(fn, ...[1, 2, 3, 4]);

2、

var a = 10;
function test() {
    console.log(a);
    a = 100;
    console.log(this.a);
    var a;
    console.log(a);
}
test();

3、

var a = 10;
function f1() {
    var b = 2 * a; 
    var a = 20;
    var c = a + 1;
    console.log(b);
    console.log(c);
}
f1();

4、

var a = 10;
function fn1() {
    console.log(a);
}
function fn2() {
    var a = 20;
    fn1();
}
fn2();

5、

var a = b = 10; 
function f1() {
    var a = b = 20;
    var c = a + 1;
    console.log(c);
}
f1();
console.log(a);
console.log(b);

6、

const motion = () => {
    let speed = 100;
    return {
        run() {
            speed++;
            console.log(speed);
        }
    }
};
const m1 = motion();
const m2 = motion();
m1.run();
m1.run();
m2.run();

7、

var x = 1;
function f(y) { 
    return this.x + y;
}
var obj = {
    x: 2
}
var f2 = function () {
    return f.apply(obj, arguments) 
}
var z = f2(3);
console.log(z);

8、

setTimeout(() => {
    console.log(1)
}, 100);
setTimeout(() => {
    console.log(2)
}, 0);
console.log(3);
let p = new Promise((resolve, reject) => {
    resolve(4);
    console.log(5);
});
p.then(res => {
    console.log(res);
});
console.log(6);

9、

function f2() {
    console.log(1);
    setTimeout(() => {
        console.log(2);
    }, 100)
}
async function f() {
    console.log(3);
    await f2();
    console.log(4);
}
f();
console.log(5);

10、

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

解析

1、解析过程

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

2、解析过程

var a = 10; // 全局变量
function test() {
    console.log(a); // 变量提升
    a = 100;
    console.log(this.a); // this指向全局的window
    var a;
    console.log(a); // 局部变量
}
test();
// 考核点：变量提升
// 输出结果：undefined 10 100

3、解析过程

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

4、解析过程

var a = 10;
function fn1() {
    console.log(a);
}
function fn2() {
    var a = 20;
    fn1();
}
fn2();
// 考核点：
// 输出结果：10

5、解析过程

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

6、解析过程

const motion = () => {
    let speed = 100;
    return {
        run() {
            speed++;
            console.log(speed);
        }
    }
};
const m1 = motion();
const m2 = motion();
m1.run();
m1.run();
m2.run();
// 考核点：闭包
// 输出结果：101 102 101

栗子

var a = 100;
function f1() {
    a++;
    console.log(a);
}
f1(); // 101
f1(); // 102

function f1() {
    var a = 100;
    a++;
    console.log(a);
}
f1(); // 101
f1(); // 101

// 闭包保存变量的状态
function f1() {
    var a = 100; // 局部变量
    return function () {
        a++;
        console.log(a);
    }
}

var a1 = f1();
a1(); // 101
a1(); // 102

7、解析过程

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

栗子

f.apply(obj, 参数);

var id = 10;
function fn() {
    console.log(this.id); // 10
}
fn();

var o1 = {
    id: 999
}
// 如何让fn函数中this的指向o1
fn.apply(o1) // this.id = o1.id 相当于fn函数在o1对象中执行

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var y1 = new Person('y1', 20);
var o2 = {}; //o2空对象
Person.apply(o2, ['o2', 18]); // apply 参数是一个数组
console.log(o2.name);

var o3 = {};
Person.call(o3, "hsl", 18);  // call 参数是字符串
console.log(o3.name);

8、解析过程

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

9、解析过程

function f2() {
    console.log(1);
    setTimeout(() => {
        console.log(2);
    }, 100)
}
async function f() {
    console.log(3);
    await f2();
    console.log(4);
}
f();
console.log(5);
// 考核点：async和await
// 输出结果：3 1 5 4 2

10、解析过程

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

// 方法一
function arrFn(arr, n) {
    let newArr = [];
    for (let i = 0, len = arr.length; i < len; i++) {
        for (let j = i + 1, len = arr.length; j < len; j++) {
            if (n === arr[i] + arr[j]) {
                newArr.push(i, j);
            }
        }
    }
    return newArr;
}
console.log(arrFn([3, 1, 7, 8], 10));

// 方法二
function twoSum(nums, target) {
    // 1、构造哈希表
    const map = new Map(); // 存储方式 {need, index}

    // 2、遍历数组
    for (let i = 0; i < nums.length; i++) {
        // 2.1 如果找到 target - nums[i] 的值
        if (map.has(nums[i])) {
            return [map.get(nums[i]), i]
        } else {
            // 2.2 如果没找到则进行设置
            map.set(target - nums[i], i)
        }
    }
}
console.log(twoSum([3, 1, 7, 8], 10));