JavaScript经典面试题

原创

前端小tips

发布于 2021-11-28 18:57:53

4850

undefined 和null 有什么区别？

JavaScript的7中基本类型

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

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

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

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

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

事件传播

事件传播的三个阶段：

捕获阶段 - 事件从Window开始，然后向下到每个元素，直到到达目标元素
目标阶段 - 事件已经到达目标元素
冒泡阶段 - 事件从目标元素冒泡，然后上升到每个元素，最后到达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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

编程算法

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

编程算法

作者已关闭评论

0 条评论

热度