100个最常问的JavaScript面试问答-第2部分(共10部分)

简介: 100个最常问的JavaScript面试问答-第2部分(共10部分)

问题11.什么是DOM?


答:


DOM代表文档对象模型,它是HTML和XML文档的接口(API)。

当浏览器第一次读取(解析)HTML文档时,它会创建一个大对象,基于HTML文档的真正大对象就是DOM。

它是从HTML文档建模的树状结构。

DOM用于交互和修改DOM结构或特定的元素或节点。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document Object Model</title>
</head>
<body>
   <div>
    <p>
        <span></span>
    </p>
    <label></label>
    <input>   // other elements
   </div>
</body>
</html>


上面代码的DOM的图形表示类似于


image.png


JavaScript中的文档对象代表DOM。


它为我们提供了许多可用于选择元素以更新元素内容的方法。


JavaScript可以更改页面中的所有HTML元素

JavaScript可以更改页面中的所有HTML属性

JavaScript可以更改页面中的所有CSS样式

JavaScript可以删除现有的HTML元素和属性

JavaScript可以添加新的HTML元素和属性

JavaScript可以对页面中所有现有的HTML事件做出反应

JavaScript可以在页面中创建新的HTML事件

问题12.请说明attributes和property之间的区别?


答:


JS DOM对象的property类似于特定元素的实例变量。

property可以是各种数据类型。

通过与Vanilla JS中的对象进行交互或使用jQuery的prop()方法,可以访问property。

attributes位于HTML中,而不是DOM中。

attributes类似于property,但不如其功能强大。

如果可以使用property,建议使用property而不是attribute。与property不同,attribute 是字符串数据类型

问题13.什么是Cookie?您将如何使用JavaScript创建,读取和删除Cookie?


答:


Cookie只是从网站发送的数据,通常是很小的数据,并通过用于访问网站的Web浏览器存储在用户的计算机上。

这是网站记住状态信息并记录用户浏览活动的可靠方法。

创建一个Cookie:


使用JS创建Cookie的最基本方法是为文档分配一个字符串值。


document.cookie = “key1 = value1; key2 = value2; … ; keyN= valueN; expires = date”;


读取Cookie:


使用JS读取cookie就像创建一样简单。

Cookie对象是cookie,只要您想访问cookie,就使用此字符串。

该document.cookie字符串保留一对name = value列表,其中一个分号将每对分开。

该name代表一个cookie的名称,以及value代表各自的cookie的字符串值。

要将字符串分为键和值,可以使用split()方法。

删除Cookie:


只需将过期日期设置为已经过去的时间。

某些Web浏览器不允许您删除cookie,除非您未指定cookie的路径。

因此,定义cookie路径对于确保正确的cookie是deleted.assign文档的字符串值很重要。

问题14.什么是事件传播?


答:


当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。

在“冒泡阶段”中,事件冒泡或向上传播至父级,祖父级,祖父的父级,直到到达窗口为止;而在“捕获阶段”中,事件从窗口开始向下直到触发元素事件或event.target。

此过程称为事件传播。

它分为三个阶段。

1.Capturing Phase –事件从窗口开始,然后下降到每个元素,直到到达目标元素。

2.Target Phase –事件已达到目标元素。

3.Bubbling Phase –事件从目标元素冒泡,然后上升到每个元素,直到到达窗口。

问题15.什么是事件冒泡?


答:

当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。


在Bubbling Phase中,事件冒泡,或者到达父级,祖父级,祖父的父级,直到到达窗口为止。


如果我们有像这样的示例标记


<div class="grandparent">
    <div class="parent">
          <div class="child">1</div>
    </div>
</div>


和javascript代码。

function addEvent(el, event, callback, isCapture = false) {
       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');
     });
});



该addEventListener()方法具有第三个可选参数useCapture,其默认值为false,事件将在Bubbling phase中发生。

如果useCapture是true,则事件将在Capturing Phase中发生。

如果单击子元素,它将child, parent, grandparent, html, document 和window分别记录在控制台上。

这整个事件是事件冒泡。

问题16.什么是事件捕获?


答:

当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。

在捕获阶段,事件从窗口开始一直到触发事件的元素。


如果我们有这样的示例标记


<div class="grandparent">
    <div class="parent">
          <div class="child">1</div>
    </div>
</div>


和JavaScript代码是

function addEvent(el, event, callback, isCapture = false) {
     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');
     }, true);
     addEvent(parent, 'click', function (e) {
    console.log('parent');
     }, true);
  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  }, true);
  addEvent(document, 'click', function (e) {
    console.log('document');
  }, true);
  addEvent('html', 'click', function (e) {
    console.log('html');
  }, true)
  addEvent(window, 'click', function (e) {
    console.log('window');
  }, true)
});



该addEventListener()方法具有第三个可选参数useCapture,其默认值为false,事件将在Bubbling phase中发生。

如果useCapture是true,则事件将在Capturing Phase中发生。

如果单击子元素,它将window, document, html, grandparent, parent和child分别记录在控制台上。

这整个事件是事件捕获

问题17.解释event.preventDefault()和event.stopPropagation()方法之间的区别?


答:


event.preventDefault()方法可防止元素的默认行为。

如果在表单元素中使用,它将阻止其提交。

如果在锚元素中使用,它将阻止其导航。

如果在上下文菜单中使用,它将阻止其显示或显示。

当event.stopPropagation()方法停止事件的传播时。

它阻止了事件在冒泡或捕获阶段发生。

问题18.如何知道是否在元素中使用了event.preventDefault()方法?


答:


我们可以在事件对象中使用event.defaultPrevented属性。

它返回一个布尔值,指示是否在特定元素中调用event.preventDefault()。

顶部↑


问题19.什么是Closure(闭包)?


答:


每当从某个内部范围内访问在当前范围之外定义的变量时,都会创建Closures。

它使我们能够从内部函数访问外部函数的范围。

换句话说,闭包是与函数相关的本地声明的变量,并在相关函数返回时保留在内存中。

闭包包含创建闭包时在范围内的所有局部变量。

在JavaScript中,每次创建函数时都会创建闭包。要使用闭包,只需在另一个函数中定义一个函数并将其公开即可。

让我们看一个例子


没有Closure


function greet(message) {
  console.log(message);
}
function greeter(name, number) {
  return name + " says Hey!! He has " + age + " subscribers";
}
var message = greeter("Tech Talks", 1026);
greet(message);


有Closure

function greeter(name, age) {
  var message = name + " says Hey!! He has " + age + " subscribers";
  return function greet() {
    console.log(message);
  };
}
// Generate the closure
var TechTalksGreeter = greeter("Tech Talks", 1026);
// Use the closure
TechTalksGreeter();



问题20.您可以用几种方法在JavaScript中创建数组?


答:

使用JavaScript创建数组的方法有以下三种:


通过创建数组的实例:

var someArray = new Array();


通过数组构造函数:

var someArray = new Array(‘value1’, ‘value2’,…, ‘valueN’)


通过使用数组文字:

var someArray = [value1, value2,…., valueN];


目录
相关文章
|
21天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
44 5
|
10天前
|
JavaScript 前端开发 测试技术
「一劳永逸」送你21道高频JavaScript手写面试题(上)
「一劳永逸」送你21道高频JavaScript手写面试题
36 0
|
1月前
|
设计模式 JavaScript 前端开发
最常见的26个JavaScript面试题和答案
最常见的26个JavaScript面试题和答案
47 1
|
1月前
|
存储 JavaScript 前端开发
【JavaScript】面试手撕浅拷贝
引入 浅拷贝和深拷贝应该是面试时非常常见的问题了,为了能将这两者说清楚,于是打算用两篇文章分别解释下深浅拷贝。 PS: 我第一次听到拷贝这个词,有种莫名的熟悉感,感觉跟某个英文很相似,后来发现确实Copy的音译,感觉这翻译还是蛮有意思的
45 6
|
1月前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
53 3
|
2月前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
36 0
|
2月前
|
前端开发 JavaScript 算法
【JavaScript】面试手撕数组排序
这章主要讲的是数组的排序篇,我们知道面试的时候,数组的排序是经常出现的题目。所以这块还是有必要进行一下讲解的。笔者观察了下前端这块的常用算法排序题,大概可以分为如下
24 2
|
2月前
|
JavaScript 前端开发 索引
【JavaScript】面试手撕数组原型链(易)
续借上文,这篇文章主要讲的是数组原型链相关的考题,有些人可能会纳闷,数组和原型链之间有什么关系呢?我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰,如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和,该如何做呢?我们知道数组没有sum函数,于是我们需要在数组的原型上定义这个函数,才能方便我们调用,具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。
39 6
|
2月前
|
JavaScript 前端开发
【JavaScript】面试手写题精讲之数组(上)
该专题主要是讲解我们在面试的时候碰到一些JS的手写题, 确实这种手写题还是比较恶心的。有些时候好不容易把题目写出来了,突然面试官冷不丁来一句有没有更优的解法,直接让我们僵在原地。为了解决兄弟们的这些困扰,这个专题于是就诞生啦。我们会将一些常见的不是最优解的答案作为对比,方便大家更好理解。
38 3
|
3月前
|
存储 人工智能 JavaScript
【利用AI刷面试题】AI:十道JavaScript面试题巩固一下知识
【利用AI刷面试题】AI:十道JavaScript面试题巩固一下知识