一线大厂前端经典面试题JavaScript部分

你的名字 2022-12-10 10:08 296阅读 0赞

### BAT笔试题中几道关于堆栈内存和闭包作用域的问题 ###

let a = {}, b = '0', c = 0;
    a[b] = 'JavaScript';
    a[c] = 'HTML+CSS';
    console.log(a[b]); //HTML+CSS
    
    //原因：对象中属性名不能重复，一般都为字符串属性，字符串属性名跟数字属性名是一样的

let a  = {}, b = Symbol('1'), c = Symbol('1');
    a[b] = 'JavaScript';
    a[c] = 'HTML+CSS';
    console.log(a[b]);//JavaScript
    
    //Symbol的特点是：创建的唯一值。Symbol('1')与Symbol('1')是不相等的

var test = (function(i){
        	return function(){
            	alert(i*=2);// alert输出结果都会转为字符串
            }
        })(2)
        
        test(5); // '4'
    //首先是创建一个自调用函数，在函数中又返回一个函数，这里有闭包产生。
    //立即执行函数接收的实参是2，然后返回一个函数。
    //这时test是一个无参函数，函数体就是alert(i*=2)，由于闭包作用这里的i是立即执行函数的参数i，而立即执行函数执行时传入的参数是2
    //当调用test函数时虽然传了个参数5，但由于test是一个无参函数，因此5没有任何作用
    //所以最终结果是4，而又因alert会把内容转换为字符串，所以最终alert的是字符串4

var a = 0, b = 0;
    
    function A(a){
        A = function(b){
            alert(a+b++);
        }
        alert(a++)
    }
    
    A(1); // "1"
    A(2); // "4"

### 对象（数组）的深克隆和浅克隆（头条） ###

### 一道关于面向对象面试题引发的血案（阿里） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70][]

### 一道面试题让你彻底掌握JS中的EventLoop（头条） ###

async function async1(){
        console.log('async1 start');
        await async2();
        console.log('async1 end');
    }
    
    async function async2(){
        console.log('async2');
    }
    
    console.log('script start');
    
    setTimeout(function(){
        console.log('setTimeout');
    },0);
    
    async1();
    
    new Promise(function(resolve){
        console.log('promise1');
        resolve();
    }).then(function(){
        console.log('promise2');
    });
    
    console.log('script end');

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 1][]

var x = 0, y = 1;
    function fn(){
        x += 2;
        fn = function(y){
            console.log(y + (--x));
        }
        console.log(x, y);
    }
    
    fn(3);//2,1  1.执行代码在fn中对x进行+=2操作，x变为2，2. fn重新指向另一个函数，3.输出x和y的值2,1
    
    fn(4);//5 fn已经指向另一个函数即console.log(y + (--x));y为传入的参数4，x则为上级作用域中的x值为2，自减后变为1 所以输出4+1=5
    console.log(x, y);//1,1 执行完上两个步骤后x变为1，全程未对全局变量y操作，所以y依然是1

setTimeout(() => {
        console.log(1);
    }, 20);
    
    console.log(2);
    
    setTimeout(() => {
        console.log(3);
    }, 10);
    
    console.log(4);
    console.time("AA");
    
    for(let i = 0; i < 90000000; i++){
        //do somthing这里为了代码阻塞
    }
    
    console.timeEnd('AA');
    
    console.log(5);
    
    setTimeout(() => {
        console.log(6);
    }, 8);
    
    console.log(7);
    
    setTimeout(() => {
        console.log(8);
    }, 15);
    
    console.log(9);
    
    //结果输出：
    // 2 4 时间长 5 7 9 3 1 6 8
    //在代码从上到下执行时优先执行console.log/time/timeEnd，然后将setTimeout添加到宏任务列队中，在for循环阻塞前先加了两个setTimeout，阻塞后又加了2个。所以在主栈代码执行完成后开始执行列队中的任务，因为阻塞前的先添加进去的所以优先按顺序执行，然后再执行阻塞后的即后添加到列队中的。

// 当a为何值时，下面的条件能够成立
    var a;
    
    if(a == 1 && a == 2 && a == 3){
        console.log('条件成立');
    }
    
    //在==进行比较时，对象会调用自身的toString方法转换为字符串后再转换为数字进行比较，所以可以利用这一点对toString进行重写以达到目的
    
    //1. 每比较一次都会调用一次toString，i就会加1，从而使条件成立
    var a = {
        i: 0,
        toString: function(){
            return ++i;
        }
    }
    
    //2. 利用数组的shift和对象的toString
    var a = [1, 2, 3];
    a.toString = a.shift;
    
    //3. 利用Object.defineProperty()来监听window对象的a属性并重写get方法
    //这里不用a是因为在get中进行自加时又会调用get方法导致死循环
    var i = 0;
    Object.defineProperty(window, 'a', {
        get: function(){
            return ++i;
        }
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70]: /images/20221123/72136c8c77a34e58853e227c77d7ceef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 1]: /images/20221123/c45e34fae64f43f6a9052a28d0e3a8dc.png