本篇文章列出几道经典前端基础题目，通过做这些题目可以对自己的前端基础进行查漏补缺。如有问题，欢迎一起学习和讨论。

1px问题

在移动端开发中，由于不同设备的 设备像素比（DPR，Device Pixel Ratio） 不同，CSS 中的 1px 可能会在某些高分辨率设备上表现得比预期粗。为了确保 1px 在所有设备上都能保持视觉一致性，请你编写一个 CSS 解决方案，确保在移动设备上实现 1px 的边框效果，要求在 DPR 为 2 的设备上，仍然表现出与低分辨率设备一致的 1px 视觉效果。

参考文章1 参考文章2

考察知识点：移动端适配、设备像素比

答案：

（以下列出常见的几种方案，方案的优缺点其他文章都写得很清楚，这里不做赘述）

方案	优点	缺点
使用0.5px实现	代码简单，使用css即可	IOS及Android老设备不支持
使用border-image实现	兼容目前所有机型	修改颜色不方便
通过 viewport + rem 实现	一套代码，所有页面	和0.5px一样，机型不兼容
使用伪类 + transform实现	兼容所有机型	不支持圆角
box-shadow模拟边框实现	兼容所有机型	box-shadow不在盒子模型，需要注意预留位置

请写出下面代码分别在浏览器环境和Node环境下的执行结果：

考察知识点：事件循环

function test () {
   console.log('start')
    setTimeout(() => {
        console.log('children2')
        Promise.resolve().then(() => {console.log('children2-1')})
    }, 0)
    setTimeout(() => {
        console.log('children3')
        Promise.resolve().then(() => {console.log('children3-1')})
    }, 0)
    Promise.resolve().then(() => {console.log('children1')})
    console.log('end') 
}

test()

答案：

// 以上代码在node11以下版本的执行结果(先执行所有的宏任务，再执行微任务)
// start
// end
// children1
// children2
// children3
// children2-1
// children3-1

// 以上代码在node11及浏览器的执行结果(顺序执行宏任务和微任务)
// start
// end
// children1
// children2
// children2-1
// children3
// children3-1

input 搜索如何防抖？，如何处理中文输入？

考察知识点：防抖

答案：

<input id='myinput'>

function debounce(timeout){
    var timer;
    function input(e){
    if(e.target.composing){
        return ;
    }
    if(timer){
       clearTimeout(timer);
    }
    timer = setTimeout(() => {
           console.log(e.target.value);
           timer = null;
       }, timeout); 
    }
    return input;
}

function onCompositionStart(e){
    e.target.composing = true;
}
function onCompositionEnd(e){
    //console.log(e.target)
    e.target.composing = false;
    var event = document.createEvent('HTMLEvents');
    event.initEvent('input');
    e.target.dispatchEvent(event);
}
var input_dom = document.getElementById('myinput');
input_dom.addEventListener('input',debounce(1000));
input_dom.addEventListener('compositionstart',onCompositionStart);
input_dom.addEventListener('compositionend',onCompositionEnd);

实现一个isEqual函数使其通过以下测试用例

考察知识点：Object.is()，DFS，比较算法

function isEqual(v1, v2) {
    // coding here
}

console.log(isEqual(0, -0)) // false
console.log(isEqual(NaN, NaN)) // true
console.log(isEqual({ a: 1 }, { a: 1 })) // true
console.log(isEqual({ a: 1, b: [ 2, { c: 3 } ] }, { a: 1, b: [ 2, { c: 3 } ] })) // true
console.log(isEqual({ a: 1, b: 2 }, { b: 2, a: 1 })) // true

答案：

function isEqual(v1, v2) {
    // 使用Object.is判断基础值的相等，处理NaN和0的特殊情况
    if (Object.is(v1, v2)) {
        return true;
    }

    // 如果是对象类型，递归检查
    if (typeof v1 === 'object' && typeof v2 === 'object' && v1 !== null && v2 !== null) {
        // 首先检查对象的键是否相同
        const keys1 = Object.keys(v1);
        const keys2 = Object.keys(v2);
        if (keys1.length !== keys2.length) {
            return false;
        }

        // 遍历所有键，并递归检查键对应的值是否相等
        for (let key of keys1) {
            if (!keys2.includes(key) || !isEqual(v1[key], v2[key])) {
                return false;
            }
        }

        return true;
    }

    return false;
}

请写出以下代码输出结果。

考察知识点：变量提升，立即执行函数

var name = 'Tom';
(function() {
if (typeof name == 'undefined') {
  var name = 'Jack';
  console.log('Goodbye ' + name);
} else {
  console.log('Hello ' + name);
}
})();

答案：

Goodbye Jack