JS面试题集锦——自测Javascript熟练程度（1-10）

前端常见JS面试题，自测JS熟练程度

1. undefined和null的区别？
   二者都是JS中的基本数据类型（types=['string'、'number'、'boolean'、'null'、'undefined'、'symbol'、'bigint']），且二者同为虚值:

console.log(!!null)          // false
console.log(!!undefined)          //false
console.log(Boolean(null))         //false
console.log(Boolean(undefined))       //false

undefined：是未指定特定值的变量的默认值，或者没有显式返回值的函数，还包括对象中不存在的属性，这些JS引擎都会为其分配undefined值。

let a
console.log(a)  // undefined
// let b
console.log(b)  // 报错
console.log(typeof a)  // undefined
console.log(typeof b)  // undefined,因此尽量显式初始化变量

null:逻辑上，它表示一个空对象指针 console.log(typeof null) // object。
事实上，undefined衍生自null因此console.log(null == undefined) //true
我们要尽量避免将一个变量显式地初始化为undefined，而对于要保存对象的变量，我们可以明确地将其先初始化为null。
2. 使用+或一元加运算符是将字符串转换为数字的最快方法吗？
根据MDN文档， +是将字符串转换为数字的最快方法，因为如果值已经是数字，它不会执行任何操作
3. DOM是什么
document object model（文档对象模型）：是HTML和XML文档的接口。当浏览器第一次读取（解析）HTML文档时，它会创建一个基于HTML文档的非常大的对象，这就是DOM。它是从一个HTML文档中建模的树状结构。DOM用于交互和修改DOM结构或特定元素或节点。
在JS中，用document对象表示DOM。它为我们提供了许多方法，我们可以使用这些方法来选择元素来更新元素等等。（不要频繁操作DOM元素，避免性能受到影响）
4. 什么是事件传播？
当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在“冒泡阶段（IE方案）”中，事件冒泡或向上传播至父级、祖父母，祖父母地父级…直到到达window为止； 而在“捕获阶段（Netscape方案）”中，事件从window开始向下触发元素。
而W3C的方案：
事件传播有三个阶段：捕获阶段、目标阶段（事件到达目标元素）、冒泡阶段
5. addEventListener方法？
该方法有三个参数，第一个参数是要绑定的事件，第二个参数是事件触发时要执行的函数，第三个参数是useCapture，表示事件是否在捕获阶段执行，默认值为false即事件句柄在冒泡阶段执行。
6. event.preventDefault()和event.stopPropagation()之间有什么区别？
前者可阻止元素的默认行为：如果在表单元素中使用，它将阻止其提交；如果在锚元素中使用，它将阻止其导航。evnet.stopPropagation()方法用于阻止捕获和冒泡阶段中当前事件的进一步传播。
7. 如何知道是否在元素中使用了‘event.preventDefault()’方法？
我们可以在事件对象中使用event.defaultPrevented属性。它返回一个布尔值用来表明是否在特定元素中调用了event.preventDefault()。
8. 为什么此代码obj.someprop.x会引发错误？

const obj = {};
console.log(obj.someprop.x);

显然，someprop并没有在对象与其原型中。所以obj.someporp值为undefined。而试图访问undefined不存在的属性x就会报错。
9. 什么是event.target?
简单来说，event.target是发生事件的元素或触发事件的元素。
假设HTML代码为：

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
    <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
        <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
          <button style="margin:10px">
             Button
          </button>
        </div>
    </div>
 </div>

JS代码：

function clickFunc(event) {
  console.log(event.target);
}

如果单击button，即使我们将事件附加在最外面的div上，它也将打印button标签，因此，event.target是触发事件的元素。

10. 什么是event.currentTarget?
    event.currentTarget是我们在其上显式附加事件处理程序的元素。
    如：

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
   <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
       <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
         <button style="margin:10px">
            Button
         </button>
       </div>
   </div>
</div>

JS代码：

function clickFunc(event) {
  console.log(event.currentTarget);
}

如果单击button，即使我们单击button，它也会打印最外面的div标签。在此示例中，我们可以的得出结论，event.currentTarget是附加事件处理的元素。
原文链接