JavaScript经典面试题

undefined 和null 有什么区别？

JavaScript的7中基本类型

String, Number，Null，Undefined, Boolean， Symbol，bigint

可以使用 boolean(value) 或则！！value 转化成布尔值， 值为false

undefined 是未指定特定值的变量的默认值，或者没有返回值的函数，还包括对象中不存在的属性

null是 不代表任何值的值。 null是已经明确定义给变量的值。

比较undefined和null的时候， 用 == 得到 true， 用 === 得到false

事件传播

事件传播的三个阶段：

1. 捕获阶段 - 事件从Window开始， 然后向下到每个元素， 直到到达目标元素
2. 目标阶段 - 事件已经到达目标元素
3. 冒泡阶段 - 事件从目标元素冒泡， 然后上升到每个元素， 最后到达window

事件冒泡

当事件发生在DOM元素上， 该事件并不完全发生在那个元素上。 在冒泡阶段，事件冒泡，或者事件发生在它的父代、祖父母， 祖父母的父代， 直到到达window为止

function addEvent(el, event, callback, isCapture = true) {
    if (!el || !event || !callback || typeof callback !== 'function') {
        return;
    }

    if (typeof el === 'string') {
        el = document.querySelector(el);
    }
    el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
    const child = document.querySelector('.child');
    const parent = document.querySelector('.parent');
    const grandparent = document.querySelector('.grandparent');

    addEvent(child, 'click', function (e) {
        console.log('child');
    });
    addEvent(parent, 'click', function (e) {
        console.log('parent');
    });
    addEvent(grandparent, 'click', function (e) {
        console.log('grandparent');
    });
    addEvent(document, 'click', function (e) {
        console.log('document');
    });
    addEvent('html', 'click', function (e) {
        console.log('html');
    });
    addEvent(window, 'click', function (e) {
        console.log('window');
    });
});

event.preventDefault() 和 event.stopPropagation() 有什么却别

event.preventDefault()方法可以防止元素的默认行为。 可以在事件对象中使用event.defaultPrevented属性，返回一个布尔值表明是否在特定元素中调用了event.preventDefault()方法

event.stopPropagation() 用于阻止捕获和冒泡阶段中当前事件的进一步传播

!! 运算符

!!运算符可以将右侧的值强制转换为布尔值，这也是将值转换为布尔值的一种简单方法

console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!''); // false
console.log(!!0); // false
console.log(!!NaN); // false
console.log(!!' '); // true
console.log(!!{}); // true
console.log(!![]); // true
console.log(!!1); // true
console.log(!![].length); // false

JavaScript中的虚值

就是在转换为布尔值时变为false的值

如

['', 0, null, undefined, NaN， false]